Minimal Responsive Card Slider In jQuery

A flexible, horizontal, fully responsive card slider built with jQuery and CSS flexible box.

Click/tap the prev/next buttons to scroll through the card content. Supports multiple instances on the same page.

How to use it:

1. Create the content containers and navigation controls for the card slider.

<div class="card-slider" id="slider-example">
  <header>
    <h3>Minimal Card slider</h3>
    <div class="slider-nav">
      <button data-direction="prev" class="disabled">Prev</button>
      <button data-direction="next">Next</button>
    </div>
  </header>
  <div class="inner">
    <ul>
      <li>
        <figure>
          <img src="1.jpg">
        </figure>
        <div>
          <h4>Card 1</h4>
          <p>Card Content 1</p>
        </div>
      </li>
      <li>
        <figure>
          <img src="2.jpg">
        </figure>
        <div>
          <h4>Card 2</h4>
          <p>Card Content 2</p>
        </div>
      </li>
      <li>
        <figure>
          <img src="3.jpg">
        </figure>
        <div>
          <h4>Card 3</h4>
          <p>Card Content 3</p>
        </div>
      </li>
      
      More cards here ...

    </ul>
  </div>
</div>

2. The necessary CSS/CSS3 for the card slider.

figure {
  margin: 0;
  padding: 0;
}

img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.card-slider {
  width: 90%;
  margin: 3em auto 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.card-slider header {
  flex: 1 1 25%;
  padding: 0 1.5em 0 0;
}

.card-slider .inner {
  overflow: hidden;
  flex-wrap: wrap;
  flex: 1 1 75%;
}

.card-slider ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  transition: left 200ms ease;
  left: 0;
}

.card-slider ul li {
  list-style: none;
  position: relative;
  flex: 1 0 250px;
  vertical-align: top;
  box-sizing: border-box;
  white-space: normal;
  padding: 0 1.5em 0 0;
}

3. Style the prev/next button.

.card-slider .slider-nav {
  width: 100%;
  overflow: hidden;
}

.card-slider .slider-nav .disabled {
  opacity: 0.4;
}

.card-slider .slide-next {
  float: right;
}

4. Include the needed jQuery JavaScript library at the end of the document.

<script src="/path/to/jquery.slim.min.js"></script>

5. The jQuery script to enable the card slider.

$(".card-slider").each(function(){
  var $slider = $(this),
    $sliderContainer = $slider.find(".inner"),
    $sliderList = $slider.find(".inner > ul"),
    $sliderItem = $slider.find(".inner > ul > li"),
    $sliderButton = $slider.find(".slider-nav button"),
    $slidePrev = $slider.find('[data-direction="prev"]'),
    $slideNext = $slider.find('[data-direction="next"]'),
    
    setItemWidth = function(){
      $sliderList.removeAttr("style");
      var curWidth = $($sliderItem[0]).outerWidth() * $sliderItem.length;
      $sliderList.css("width", curWidth);
    },
    
    slide = function(){
      var $button = $(this),
        dir = $button.data("direction"),
        curPos = parseInt($sliderList.css("left")) || 0,
        moveto = 0,
        containerWidth = $sliderContainer.outerWidth(),
        listWidth = $sliderList.outerWidth(),
        before = (curPos + containerWidth),
        after = listWidth + (curPos - containerWidth);
      
      if(dir=="next"){
        if(after < containerWidth) {
          moveto = curPos - after;
          $slideNext.addClass('disabled');
          $slidePrev.removeClass('disabled');
        }
        else {
          moveto = curPos - containerWidth;
          $slidePrev.removeClass('disabled');
        }
      } 
      else {
        if(before >= 0) {
          moveto = 0;
          $slidePrev.addClass('disabled');
          $slideNext.removeClass('disabled');
        }
        else {
          moveto = curPos + containerWidth;
          $slideNext.removeClass('disabled');
        }
      }

      $sliderList.css('left', moveto);
    };
  
  $(window).resize(function(){
    setItemWidth();
  });
  
  setItemWidth();
  $sliderButton.on("click", slide);
});

---

This awesome jQuery plugin is developed by ppnelles. For more Advanced Usages, please check the demo page or visit the official website.