jQuery Multiple Image Carousel Slider – Blue-Slider

How to Create jQuery Multiple Image Carousel Slider

1. To create such slider, we need to getting started with Blue-Slider plugin. So, first of all load the jQuery JavaScript library into your web project.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. After loading jQuery, include plugin assets (from downloaded directory) in your page.

<!-- Blue-Slider CSS -->
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/fontello.css">
<!-- Blue-Slider JS -->
<script src="js/blue-slider.js"></script>

3. Now, create HTML div element with class name “slider” and place your images in it.

  <div class="slider-container first-sample">
    <div class="slider">
      <div class="item"><img src="image/pic1.jpg" alt=""></div>
      <div class="item"><img src="image/pic2.jpg" alt=""></div>
      <div class="item"><img src="image/pic3.jpg" alt=""></div>
      <div class="item"><img src="image/pic4.jpg" alt=""></div>
      <div class="item"><img src="image/pic5.jpg" alt=""></div>
      <div class="item"><img src="image/pic6.jpg" alt=""></div>
      <div class="item"><img src="image/pic7.jpg" alt=""></div>
      <div class="item"><img src="image/pic8.jpg" alt=""></div>
      <div class="item"><img src="image/pic9.jpg" alt=""></div>
      <div class="item"><img src="image/pic10.jpg" alt=""></div>
    </div>
    <i class="left-open-big-icon prev-slide"></i>
    <i class="right-open-big-icon next-slide"></i>
  </div>

4. After all this, call the Blue-Slider plugin (with .slider selector) in jQuery document ready function to active the multiple images slider.

$(document).ready(function(){
	$(document).ready(function() {
  $('.first-sample .slider').blue_slider({
    // slide_template: '1fr 2fr 1fr',
    // slide_template: '1fr 1fr',
    // slide_template: '1fr',
    slide_template: '1fr 4fr (2,1fr) .5fr',
    current_fr_index: 2,
    current_fr_index_flow: false,
    // speed: 500,
    // ease_function: 'cubic-bezier(.32,.38,.16,.98)',
    // slide_step: 1,
    current_fr_class: 'my-fr-current',
    active_fr_class: 'my-fr-active',
    custom_fr_class: '       fr-1         fr-2        fr-3    ',
    // left_padding: 100,
    // right_padding: 100,
    slide_gap: 10,
    // speed: 1000,
    ease_function: 'ease-in-out',
    sencitive_drag: 100,
    loop: false,
    auto_play: true,
    auto_play_period: 5000,
    start_slide_index: 0,
    arrows: true,
    prev_arrow: '.first-sample .prev-slide',
    next_arrow: '.first-sample .next-slide',
  });
});
});

For more advance usage, please check the Configuration Options tab. If you like this slider, don’t forget to rate it.