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.

[intro_ad]

Plugin Overview and Preview

Plugin: Blue-Slider
Author: Babak Gholamzdeh
Category: Carousel
Published: January 20, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 2 MB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
11,741
[ad_after_overview]

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>
    </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,
}); 
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]

[ad_after_artical]
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X