Question

任何人都可以帮助我在MaterializeCSS中使用网格和卡片实现以下轮播（火车轮播）效果。我尝试了许多解决方案，但无法达到预期的效果。

这是我到目前为止所取得的成就：https://jsfiddle.net/c5mq2ezo/1/（对不起链接中的图像）

但是问题是我需要使用任意数量的可用网格/卡来创建火车轮播效果。现在，它在可见的幻灯片中给出了意外的结果。如果添加4或5张卡，则仅显示3而不是4。如果添加7或8张卡，则它将显示4张卡。

以下是代码：

 <body class="grey darken-3">


<section>
  <div class="carousel carousel-slider">
      <a class="carousel-item black-text" href="#one">
      <div class="card">
        <div class="card-image">
          <img src="images/samples/insurance.png">
        </div>
        <div class="card-content">
          <h6>Insurance</h6>
          <p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent...</p>
        </div>
      </div>  
      </a>
      <a class="carousel-item black-text" href="#two">
        <div class="card">
        <div class="card-image">
          <img src="images/samples/manufucturing.png">
        </div>
        <div class="card-content">
          <h6>Manufucturing defects</h6>
          <p>Production lines are often equipped with cameras, but it can be challenging to infer quality or safety problems...</p>
        </div>
      </div>  
      </a>
      <a class="carousel-item black-text" href="#three">
        <div class="card">
        <div class="card-image">
          <img src="images/samples/retail.png">
        </div>
        <div class="card-content">
          <h6>Retail</h6>
          <p>Recommend products that match your customers' style, analyze reviews or survey data for topics and trends</p>
        </div>
      </div>  
      </a>

      <a class="carousel-item black-text" href="#three">
        <div class="card">
        <div class="card-image">
          <img src="images/samples/retail.png">
        </div>
        <div class="card-content">
          <h6>Content filtering</h6>
          <p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent future ...</p>
        </div>
      </div>  
      </a>

      <a class="carousel-item black-text" href="#three">
        <div class="card">
        <div class="card-image">
          <img src="images/samples/retail.png">
        </div>
        <div class="card-content">
          <h6>Card 5</h6>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
      </div>  
      </a>


  </div>
</section>
</body>

CSS：

.carousel .carousel-item {
    width: 340px !important;
    padding: 20px;
}

.card{ 
    border-radius: 8px; 
    position: relative !important;
    right: 20px !important;
}

Answer 1

实际上，您可以将卡片添加到轮播中，将类别carousel-item添加到卡片中，而不使用a标签：

<div class="carousel ">
  <div class="card carousel-item">
    <div class="card-content">
      <span class="card-title">Card 1</span>      
      Card 1 content
    </div>
  </div>

  <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>

View in browser

问题是当您添加图片时，因为图片使用了所有空间，并且内容显示在转盘下方，也许有某些样式可以修复，但我对CSS不太了解。

希望这会有所帮助。

MaterializeCSS：网格和卡片轮播效果

1 个答案: