MaterializeCSS：网格和卡片轮播效果答案

【问题标题】：MaterializeCSS: Grids and cards carousel effectMaterializeCSS：网格和卡片轮播效果
【发布时间】：2018-10-28 18:26:10
【问题描述】：

谁能帮助我在 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;
}

【问题讨论】：

您可以向我们提供小提琴或分享您尝试过的代码，以便我们为您提供帮助:)
jsfiddle.net/c5mq2ezo/1
@Manjunath 我已经用更多信息编辑了这个问题

标签： javascript css materialize

【解决方案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不太了解。

希望这会有所帮助。

【讨论】：