Multiple Image Slider jQuery Example

Category: Slideshow | January 25, 2022
Author: Babak-Gholamzadeh
Official Page: Go to Website
Last Update: September 20, 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 examples 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 a custom slide index, setting the 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>

Initialize Javascript

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.

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

You Might Be Interested In:

Leave a Comment

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