jQuery Multiple Image Carousel Slider – Blue-Slider

Yet another carousel plugin for jQuery to create multiple image carousel slider. The plugin, “Blue-Slider” is a mobile-friendly, touch enabled and well developed jQuery based content / image slider. This plugin allows you to auto play bulk images in slider. Besides this, users can navigate slider using touch swipe or with next & previous arrow buttons. You just need to place your images in its HTML container, then this plugin render a beautiful image slider.

Furthermore, each element of blue slider is customizable with its options. You can set custom slide index, speed etc.

Plugin Overview and Preview

Plugin: Blue-Slider
Author: Babak Gholamzdeh
Category: Carousel
Published: November 26, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 2 MB
Dependencies: jQuery 3.0 or Latest version
Last Modified:

Code Rating

[site_reviews_summary assigned_to=”post_id”]

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>
    <i class="left-open-big-icon prev-slide"></i>
    <i class="right-open-big-icon next-slide"></i>

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() {
  $('.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.



  • Initial release.

Advance Configuration Options for Multiple Image Carousel Slider

The following are some advanced configuration options to create jQuery based multiple image carousel slider.

Option Default Type Description
slide_gap 0 Number Define the gap in px between slides.


	slide_gap : 0,
slide_step 1 Number This option define the step after that next slide will be show.


	slide_step : 1,
left_padding & right_padding Shown in example Number These options set the CSS left and right padding property for slide.


	left_padding & right_padding : Shown in example,
speed 1000 Number Define transition speed in milliseconds for sliding items.


	speed : 1000,
loop false Boolean Decide whether to loop items. (If true then sliding items will start from 0 after reaching at last).


	loop : false,
auto_play false Boolean Enable / disable auto play sliding items.


	auto_play : false,
auto_play_period 3000 Number It define the delay in milliseconds after that next slide will be show.


	auto_play_period : 3000,
start_slide_index 1 Number Define the index position where to start the slider on initialization,


	start_slide_index : 1,
arrows false Boolean This option is useful to show / hide next and previous arrows.


	arrows : false,
prev_arrow & next_arrow Shown in Example String If you want to use custom arrows for slider navigation, then use these options.


	prev_arrow & next_arrow : Shown in Example,
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]