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