A comprehensive jQuery / JavaScript slideshow, slider, carousel, galleries plug-in

A one stop solution for slider, carousel, gallery component

In this tutorial, I am going to share a one stop solution for the carousel, slider, slideshow or gallery component for your web site.

Generally, you may require different plug-ins for different purposes. For example, if you need to have a carousel component then go for one plug-in and if you need to slideshow images then go for some other.

The plug-in I am going to share here not only allows you creating slideshows, galleries, carousels or sliders but it has plenty of styles for presenting these components as well.

The package supports around 300 slideshow transitions including fading effects, swing outside effects, swing inside effects, dodge dance outside effects, dodge pet outside effects, rotating effects and .

In this post, I will show you a few demos while you may look at the complete list by downloading the plug-in from Github site.

A demo of banner rotator with SlideOut effect

In this demo, a banner rotator is created with four images. You may navigate through the images by clicking the small boxes at right bottom or images will change with a transition after certain duration. Have a look:

query banner rotate

See online demo and code

You need to include the jQuery and plug-in JS files:

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<script type=”text/javascript” src=”js/jssor/jssor.slider.mini.js”></script>

The style and jQuery code are also used for creating this rotating banner. You may see the live demo and get the complete code from the demo page. (See the plug-in download link at the bottom of this tutorial)

A demo of banner/image slider

In this demo, again four images are used in the slider. You may use boxes to navigate from one image to the other or use right and left arrows. The images are also draggable by mouse pointer or finger. Also notice, the mouse pointer allows sliding images horizontally and vertically:

jquery banner slider

See online demo and code

A demo of content slider

In this demo, a content slider is created where you may place textual information, button, images etc. You may use mouse dragging for moving the slides or small thumbnails that are placed towards the right bottom of the content slider. The content rotates automatically at certain duration if none of the method are used:

jquery content slide

See online demo and code

Get the complete code from the demo page.

An example of full-width responsive slider

You may also create full width responsive sliders as using this plug-in. The images or banners will adjust as per the screen of the user; whether it is different sizes in desktop/laptop or mobiles and tablets.

The controls for moving the slides are either left and right arrows or its automatic. The small circles are also given that are aligned center / bottom for moving to a specific slide directly. The slides may include any type of content including images, text, html headings etc:

query full width slider

See online demo and code

A demo of image gallery

See this demo where image gallery is used by using this awesome plug-in. The gallery images change with a cool transition while thumbnails of images are presented at the bottom so that a user may click on the small images to quick jump to any specific slide:

jquery image gallery

See online demo and code

An example of partially visible neighbor slides

The following slider shows or gives an idea what the next and previous slides are. The current item is displayed fully while previous and next sliding items are displayed partially. That way, a user may has an idea what the next and previous slides are about:

jquery slider partial

See online demo and code

A demo of tab slider

The following demo slider is with tabs on top of the sliding image. You may use specific headings for the tabs.

jquery slider tabs

See online demo and code

A demo of simple slider with Javascript – no jQuery

In this demo, the slider is created by using JavaScript. No jQuery code is used. So, if you do not want using the jQuery while having the same slider as in first example, this is how you may create it:

javascript slider

See online demo and code

For that, you need to include the jssor.slider.debug.js file in the <head> section. You may get this file from the downloaded package.

How to download this plug-in

The plug-in name is jssor slider that you may download from the Github website here. The package includes a lot of demos with source code including JavaScript sliders without using the jQuery. You simply need to choose the type of slider that is required and use your own images.

Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we unravel the mysteries of coding together!