JSFiddle - React, Tailwind, and code Playground

by Tiago Sousa

HTML

<div class="infinite-slider">
  <div class="slider-item">
    <div class="card card--product">
      <div class="card__media">
        <a href="#"><img src="https://placehold.co/400" /></a>
      </div>
      <div class="card__info-container">
        <div class="card__info">
          <h3><a href="">Prodct 1</a></h3>
        </div>
        <div class="card__quick-add">
          <!-- Quantity start -->
          <div class="product-quantity-wrap">
            <div class="quantity-selector-wrapper">
              <button class="btn-quantity-selector" tabindex="-1" type="button">
              -
              </button>
              <input
                type="number"
                class="text-input input-quantity"
                step="1"
                value="1"
              />
              <button class="btn-quantity-selector" tabindex="-1" type="button">
                +
              </button>
            </div>
          </div>
          <!-- / Quantity End -->
          
          <!-- Buy Now Start -->
          <div class="button-purchase button-inline">
            <button type="button" class="btn-small no-margin   ">
              <span class="purchase-amount">
                Ajouter (€15.86)
              </span>
            </button>
          </div>
          <!-- /end buy now -->
        </div>
      </div>
    </div>
  </div>
  <div class="slider-item">
    <a href="#"><img src="https://placehold.co/400" /></a>
    <h3>Prodct 1</h3>
    <span class="price">3.34</span>
  </div>
  <div class="slider-item">
    <a href="#"><img src="https://placehold.co/400" /></a>
    <h3>Prodct 1</h3>
    <span class="price">3.34</span>
  </div>
  <div class="slider-item">
    <a href="#"><img src="https://placehold.co/400" /></a>
    <h3>Prodct 1</h3>
    <span class="price">3.34</span>
  </div>
  <div class="slider-item">
    <a href="#"><img src="https://placehold.co/400" /></a>
    <h3>Prodct 1</h3>
    <span class="price">3.34</span>
  </div>
  <div...

CSS

.infinite-slider {
    display: flex;
    gap: 20px;
    overflow: hidden;
}

.slider-item {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 5px;
    transition: transform 0.3s;
}

.slider-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.slider-item h3 {
    font-size: 16px;
    margin: 10px 0;
}

.slider-item .price {
    color: #0071a1;
    font-weight: bold;
}

.quantity-selector-wrapper {
    border: 1px solid var(--spark-input-color, #ccc);
    border-radius: var(--spark-border-radius-default, 4px);
    justify-content: center;
    height: 100%;
    display: flex;
}


.btn-quantity-selector {
    background: var(--spark-lightest-color, #fff);
    color: var(--spark-primary-color-dark, #999);
    border-radius: var(--spark-border-radius-default, 4px);
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all .3s;
    display: flex;
    position: relative;
    
    flex-grow: 1;
    max-width: 40px;
}

.input-quantity {
    box-sizing: border-box;
    text-align: center;
    min-width: 0;
    max-width: 50px;
    margin: 0;
    line-height: 16px;
    border: 0 !important;
    border-right: 1px solid var(--spark-input-color, #ccc) !important;
    border-left: 1px solid var(--spark-input-color, #ccc) !important;
    border-radius: 0 !important;
    width: 40% !important;
    padding: 0 !important;
    
    flex-grow: 2;
    width: 0 !important;
    max-width: 100% !important;
}

.input-quantity::-webkit-outer-spin-button,
.input-quantity::-webkit-inner-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

.input-quantity[type=number] {
  -moz-appearance: textfield;
}


button.btn-small {
color: var(--spark-button-raised-color, var(--spark-lightest-color, #fff));
    background-color: var(--spark-button-raised-background,...

JavaScript

jQuery(document).ready(function($) {
    $('.infinite-slider').slick({
        infinite: false,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: false,
        dots: false,
        arrows: false,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    });
});