Multiple Image Slider jQuery Example

Category: Slideshow | January 25, 2022
Author: Babak-Gholamzadeh
Official Page: Go to Website
Last Update: February 5, 2022
License: MIT

When it comes to showing more content when you have less space on your web page than multiple images Carousel plays a vital role. Hence, we are going to share a jQuery plugin for multiple image slider example that is a mobile-friendly, touch-enabled, and well-developed slideshow. This plugin works well with both images and content so you can slide both contents.

One of the amazing features is auto-play bulk images in the slider that enhance the user experience. The site users can quickly view multiple photos at the same time. Apart from that, it allows users to navigate the slider through the next/prev arrow buttons and also enables them to swipe using touch.

Implementing this multiple jQuery slideshow is so simple and easy. All you have to place the images inside the HTML container and you are ready to render nice looking image slider. Moreover, you can easily customize the slider options such as you can set custom slide index, set number of photos, and speed adjustment.

How to Create Multiple Image Slider jQuery Example

Let’s start with adding the slider to your project. First, we simply need to add the slider plugin. Loading the main jQuery library into your web page header.

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

Our next step is to load the plugin assets from the download directory into your website. We have one main style.min.css and another one is fontello.css which will use for icons. The blue-slider.js is the main file for handling multi-slider features.

<!-- 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>

As for HTML concern, we will create the main div element with the class name “slider-container” that will hold a child div with class name “slider“. Inside the child class, we will place the images within the “item” div. In the end, we will have two icons using “i” element that will perform navigation.

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

Finally, we will define the slider plugin by using the .slider selector within the jQuery document ready function to activate the multiple images slider. The below function will help you to control the slider settings.

$(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',
  });
});
});

Advance Configuration Options for Multiple Image Carousel Slider

If you want to play with multiple image carousel slider advance options then here is the complete table.

OptionDefaultTypeDescription
slide_gap0NumberDefine the gap in px between slides.

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

Example: $(selector).blue_slider({ slide_step : 1, });
left_padding & right_paddingShown in exampleNumberThese options set the CSS left and right padding property for slide.

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

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

Example: $(selector).blue_slider({ loop : false, });
auto_playfalseBooleanEnable / disable auto play sliding items.

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

Example: $(selector).blue_slider({ auto_play_period : 3000, });
start_slide_index1NumberDefine the index position where to start the slider on initialization,

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

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

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

You Might Be Interested In:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.