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:
MIT
145 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

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.

Changelog

25/11/2019

  • 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.

Example:

$(selector).blue_slider({
	slide_gap : 0,
}); 
slide_step 1 Number This option define the step after that next slide will be show.

Example:

$(selector).blue_slider({
	slide_step : 1,
}); 
left_padding & right_padding Shown in example Number These options set the CSS left and right padding property for slide.

Example:

$(selector).blue_slider({
	left_padding & right_padding : Shown in example,
}); 
speed 1000 Number Define transition speed in milliseconds for sliding items.

Example:

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

Example:

$(selector).blue_slider({
	loop : false,
}); 
auto_play false Boolean Enable / disable auto play sliding items.

Example:

$(selector).blue_slider({
	auto_play : false,
}); 
auto_play_period 3000 Number It define the delay in milliseconds after that next slide will be show.

Example:

$(selector).blue_slider({
	auto_play_period : 3000,
}); 
start_slide_index 1 Number Define the index position where to start the slider on initialization,

Example:

$(selector).blue_slider({
	start_slide_index : 1,
}); 
arrows false Boolean This option is useful to show / hide next and previous arrows.

Example:

$(selector).blue_slider({
	arrows : false,
}); 
prev_arrow & next_arrow Shown in Example String If you want to use custom arrows for slider navigation, then use these options.

Example:

$(selector).blue_slider({
	prev_arrow & next_arrow : Shown in Example,
}); 

There are no reviews yet. Be the first one to write one.

Submit Your Review