Touch-friendly Carousel With jQuery And Velocity.js

A responsive, mobile-friendly jQuery carousel slider plugin which uses Velocity.js for smooth, fast, accelerated animations between slides.

More features:

• Autoplay.
• Pagination bullets.
• Navigation arrows.
• Easing functions.
• Auto adjusts the number of slides to show per page based on the screen size.

How to use it:

1. Include the needed jQuery and Velocity.js libraries on the webpage.

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

2. Insert a list of images to the carousel.

<div class="slide" id="js-slide">
  <div class="slideWrap">
    <div class="slideMain" id="js-slideMain">
      <div class="slideContent" id="js-slideContent">
        <ul class="slideGroup js-slideGroup">
          <li class="slideChild js-slideChild">
            <img src="images/img_01.jpg" alt="" class="img-rsp">
          </li>
          <li class="slideChild js-slideChild">
            <img src="images/img_02.jpg" alt="" class="img-rsp">
          </li>
          <li class="slideChild js-slideChild">
            <img src="images/img_03.jpg" alt="" class="img-rsp">
          </li>
          <li class="slideChild js-slideChild">
            <img src="images/img_04.jpg" alt="" class="img-rsp">
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

3. Call the plugin to generate a basic carousel slider.

$(function(){
  $("#js-slide").slider();
});

4. Possible configs to customize the carousel slider.

$(function(){
  $("#js-slide").slider({

    // animation speed
    speed: 600,

    // animation delay
    delay: 800, 

    // easing function
    easing: 'ease', 

    // shows pagination controls
    pager: true,

    // shows navigation arrows
    arrow: true,

    // autoplay
    autoPlay: false,

    // initial index
    index: 0,

    // breakpoint in px
    spWidth: 768
    
  });
});

---

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