Sliders

<div class="slider">
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <article class="cards__item">
            <a href="#" class="cards__item-link">
              <div class="cards__item-image" style="background-image: url(http://via.placeholder.com/512x512);">
                <div class="post-tag mt-4">Category</div>
              </div>
              <time datetime="2021-02-11" class="cards__item-date">11.9.2020</time>
              <h3>Post headline</h3>
              <div class="keywords">
                <span class="keywords__item">Whitepaper</span>
                <span class="keywords__item">Tag</span>
                <span class="keywords__item">Keyword</span>
              </div>
            </a>
          </article>
        </div>
        <div class="swiper-slide">
          <article class="cards__item">
            <a href="#" class="cards__item-link">
              <div class="cards__item-image" style="background-image: url(http://via.placeholder.com/512x512);">
                <div class="post-tag mt-4">Category</div>
              </div>
              <time datetime="2021-02-11" class="cards__item-date">11.9.2020</time>
              <h3>Post headline</h3>
              <div class="keywords">
                <span class="keywords__item">Whitepaper</span>
                <span class="keywords__item">Tag</span>
                <span class="keywords__item">Keyword</span>
              </div>
            </a>
          </article>
        </div>
        <div class="swiper-slide">
          <article class="cards__item">
            <a href="#" class="cards__item-link">
              <div class="cards__item-image" style="background-image: url(http://via.placeholder.com/512x512);">
                <div class="post-tag mt-4">Category</div>
              </div>
              <time datetime="2021-02-11" class="cards__item-date">11.9.2020</time>
              <h3>Post headline</h3>
              <div class="keywords">
                <span class="keywords__item">Whitepaper</span>
                <span class="keywords__item">Tag</span>
                <span class="keywords__item">Keyword</span>
              </div>
            </a>
          </article>
        </div>
        <div class="swiper-slide">
          <article class="cards__item">
            <a href="#" class="cards__item-link">
              <div class="cards__item-image" style="background-image: url(http://via.placeholder.com/512x512);">
                <div class="post-tag mt-4">Category</div>
              </div>
              <time datetime="2021-02-11" class="cards__item-date">11.9.2020</time>
              <h3>Post headline</h3>
              <div class="keywords">
                <span class="keywords__item">Whitepaper</span>
                <span class="keywords__item">Tag</span>
                <span class="keywords__item">Keyword</span>
              </div>
            </a>
          </article>
        </div>
        <div class="swiper-slide">
          <article class="cards__item">
            <a href="#" class="cards__item-link">
              <div class="cards__item-image" style="background-image: url(http://via.placeholder.com/512x512);">
                <div class="post-tag mt-4">Category</div>
              </div>
              <time datetime="2021-02-11" class="cards__item-date">11.9.2020</time>
              <h3>Post headline</h3>
              <div class="keywords">
                <span class="keywords__item">Whitepaper</span>
                <span class="keywords__item">Tag</span>
                <span class="keywords__item">Keyword</span>
              </div>
            </a>
          </article>
        </div>
        <div class="swiper-slide">
          <article class="cards__item">
            <a href="#" class="cards__item-link">
              <div class="cards__item-image" style="background-image: url(http://via.placeholder.com/512x512);">
                <div class="post-tag mt-4">Category</div>
              </div>
              <time datetime="2021-02-11" class="cards__item-date">11.9.2020</time>
              <h3>Post headline</h3>
              <div class="keywords">
                <span class="keywords__item">Whitepaper</span>
                <span class="keywords__item">Tag</span>
                <span class="keywords__item">Keyword</span>
              </div>
            </a>
          </article>
        </div>
    </div>
  </div>
  <button class="swiper-button-prev swiper-button-prev--offset"></button>
  <button class="swiper-button-next swiper-button-next--offset"></button>
</div>
<div class="slider mt-5">
          <div class="swiper-container swiper-container--wide swiper-container-initialized swiper-container-horizontal">
            <div class="swiper-wrapper" style="transition: all 0ms ease 0s;">
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(hhttp://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
            </div>
          </div>
          <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
          <button class="swiper-button-prev"></button>
          <button class="swiper-button-next"></button>
        </div>
<div class="slider mt-5">
          <div class="swiper-container swiper-container--wide swiper-container-initialized swiper-container-horizontal">
            <div class="swiper-wrapper" style="transition: all 0ms ease 0s;">
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
                <div class="swiper-slide">
                  <div class="image-overflow-cards__item">
                    <div class="image-overflow-cards__image" style="background-image: url(http://via.placeholder.com/768x768);">
                      <span class="post-tag mb-4">Line name</span>
                    </div>
                  </div>
                </div>
              
            </div>
          </div>
          <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
          <button class="swiper-button-prev"></button>
          <button class="swiper-button-next"></button>
        </div>
Veneer peeling lathe r7-55
Test 2
Test 3
<div class="bg-white py-5 ">
  <div class="xl:container mx-auto px-2">
    <div class="slider">
      <div class="swiper-container swiper-container--wide swiper-container--product-images swiper-container-initialized swiper-container-horizontal">
        <div class="swiper-wrapper" style="transition: all 0ms ease 0s;">
            <div class="swiper-slide">
    <div class="product-image product-image--single">
        
        <img class="product-image__image" src="http://via.placeholder.com/320x280" alt="">

        <div class="product-image__title">Veneer peeling lathe r7-55</div>
    </div>
            </div>
            <div class="swiper-slide">
    <div class="product-image">
        
        <img class="product-image__image" src="http://via.placeholder.com/320x280" alt="">

        <div class="product-image__title">Test 2</div>
    </div>
    <div class="product-image">
        
        <img class="product-image__image" src="http://via.placeholder.com/320x280" alt="">

        <div class="product-image__title">Test 3</div>
    </div>
            </div>
        </div>
      </div>
      <button class="swiper-button-prev" data-slide="previous"></button>
      <button class="swiper-button-next" data-slide="next"></button>
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
    </div>
  </div>
</div>
© Raute Corporation 2021