MaterializeCSS: эффект карусели сеток и карт - PullRequest
Новая
       11

MaterializeCSS: эффект карусели сеток и карт

0 голосов
/ 28 октября 2018

Может ли кто-нибудь помочь мне в достижении следующего эффекта карусели (карусели поездов) с использованием сетки и карт в MaterializeCSS.Я испробовал много решений, но не смог достичь желаемых результатов.

enter image description here

Вот что я достиг на данный момент: 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;
}
...