40+ Simple jQuery Slider Plugins

Nowadays, you can develop an image / content slider for websites easily, there are many slider plugins that you can choose to create an awesome slider to amaze your visitors, You can use CSS-only slider or jQuery based slider to build it.

Depending on your need, you can use jquery slider to create awesome slider with fancy change effects, beautiful transition and much more.

In our previous blog post we’ve talked about about fullscreen slider that perfect for photography websites. In this post, we present 40 simple jQuery slider plugins for your next project.

Please Be Aware: Before starting off, keep in mind that to implement the following jQuery slider, you must have programming language knowledge such as HTML & Javascript.

See Also: Pure CSS Fullscreen Slider (No JavaScript)

jQuery touchSwipe Carousel

jquery_touchswipe_carousel

jQuery touchSwipe Carousel/Slider plugin is required for detecting swipe events on on touch input devices and falling back to mouse ‘drags’ on the desktop.

DemoDownload

Animated SVG Image Slider

animated_svg_image_slider

A simple, responsive carousel with animated SVG paths used as transition effects.

DemoDownload

Multirange

multirange_tiny_polyfill_for_html5_multihandle_sliders

Multirange is a tiny polyfill for HTML5 multi-handle sliders.

DemoDownload

SSS

sss_super_simple_slider

Super Simple Slider (SSS) is a flexible and lightweight jQuery slider with super simple to set up.

DemoDownload

Sliding Panels Template with CSS and jQuery

sliding_panels_template_with_css_and_jquery

A simple portfolio template, with project preview images that slide out to reveal the selected project by using css and jQuery.

DemoDownload

Zoom Slider

zoom_slider_content_slider_with_depthlike_zoom_functionality

Zoom Slider is a simple content slider with depth-like zoom functionality.

DemoDownload

Bootstrap Slider Plugin

bootstrap_slider_plugin

Bootstrap Slider is a customizable jQuery component to create vertical and horizontal slider. Also it can be use as a range slider.

DemoDownload

Ideal Image Slider

ideal_image_slider

Ideal Image Slider is a simple slider that has just the right amount of features, with no bloat and be easy to extend so that more features can be added as “extensions”.

DemoDownload

360 Degrees Product Viewer with CSS and Javascript

360_degrees_product_viewer_with_css_and_javascript

A tutorial about creating simple, interactive resource that can be used to provide a virtual tour of your product.

DemoDownload

Presentation Slideshow with CSS and jQuery

presentation_slideshow_with_css_and_jquery

A tutorial about creating simple presentation template in CSS and jQuery.

DemoDownload

Zenith

zenith_responsive_slider_jquery_plugin

Zenith is responsive slider jQuery plugin that has 4 basic layouts + 4-th layout has dozen variations of it’s own, giving 3 additional sub-layouts.

DemoDownload

before-after.js

beforeafter.js_responsive_image_comparision_slider

before-after.js is a simple and responsive image comparison slider.

DemoDownload

roundSlider

roundslider_jquery_circular_range_slider_plugin

Round Slider is a jQuery plugin that allows the user to select a value or range of values. Not only a round slider it supports the quarter, half and pie circle shapes also.

DemoDownload

TouchSlider

touchslider_javascript_component_to_create_sliding_effect

TouchSlider is a lightweight javascript component to create sliding effect for mobile and PC.

DemoDownload

Clipped SVG Slider

clipped_svg_slider

Clipped SVG Slider is a simple slider, with morphing preview images animated using SVG properties.

DemoDownload

ArtDesignSlider

artdesignslider_responsive_jquery_image_slider

ArtDesignSlider is a responsive jQuery image slider with support auto resize images with different dimension.

DemoDownload

Simple Slider with jQuery

simple_slider_with_jquery

A tutorial about creating simple slider with jQuery and CSS.

DemoDownload

Responsive Layered Slider

responsive_layered_slider

In this tutorial you will lean how to create a responsive layered slider. The slider will have multiple slides, each slide will have multiple layers which can have a different fade in effect.

DemoDownload

Product Preview Slider

product_preview_slider

An easy way to show more product images and variations right in the product gallery. A simple slider to check product variations before jumping into the product page.

DemoDownload

jQuery Image Player

jquery_image_player

jQuery Image Player is a jQuery plugin that is an image based player with a look and feel of video player. It also has slide effects.

DemoDownload

Radial SVG Slider

radial_svg_slider

Radial SVG Slider is a simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements.

DemoDownload

Nex

nex_flexible_jquery_fullscreen_slider

Nex slider is a blazing fast fullscreen slider optimized for best performances and compatible with all platforms. It allows you to embed images, videos and even google maps in the same slider.

DemoDownload

lory

lory_touch_enabled_minimalistic_slider_with_javascript

lory is a touch enabled minimalistic slider written in vanilla JavaScript.

DemoDownload

Flickity

flickity_touch,_responsive,_flickable_galleries

Flickity makes galleries, sliders, & carousels that feel lively and effortless. You can use Flickity as a jQuery plugin.

DemoDownload

Turntable.js

turntable.js_responsive_jquery_slider

Turntable.js is a responsive jQuery slider that will let you rotate through a list of images as your mouse (or finger) sweeps across a container.

DemoDownload

Animated SVG Hero Slider

animated_svg_hero_slider

A tutorial about creating full page slider, with animated SVG elements used as transition effects.

DemoDownload

gridslide.js

gridslide.js_multidirectional_jquery_image_slider

gridslide.js is a multi-directional jQuery image slider. It’s useful for displaying multiple albums on one page or diorama style photo arrays.

DemoDownload

ajSlider

ajslider_jquery_slideshow_plugin

ajSlider is a jQuery slideshow plugin which can be used as the main banner for your webpages or as a image gallery which fits into user defined sizes.

DemoDownload

Bootstrap Ambilight Slider

bootstrap_ambilight_slider

Bootstrap Ambilight Slider is a plugin to create custom slider/carousel with ambilight effect and bootstrap.

DemoDownload

2 Blocks Template

2_blocks_template

A template split in 2 animated blocks of content. On bigger devices, the content is split in two main containers. When the user surfs through the content using the navigation, new content overlaps the old one. On smaller devices, we have a simple gallery of projects, with a slide-in panel containing additional project information.

DemoDownload

Wipe Slider

wipe_slider_jquery_rotating_slider_with_wipe_effect

Wipe Slider is a jQuery plugin that creates rotating slider wipe effect using background-size:cover and background-position:center.

DemoDownload

How To Create Simple Image Slideshow

how_to_create_simple_image_slideshow

In this tutorial you’ll learn how to create a simple image slider using GreenSock TweenLite and TimelineLite with cool tilt effect.

DemoDownload

jQuery Hero Slider

jquery_hero_slider

jQuery Hero Slider is a full-width, responsive and easy to customize slideshow, enriched by a tabbed navigation.

DemoDownload

Slider Animation

slider_animation_material_design_inspired_content_slider

Slider Animation is a content slider with Material Design inspired animations and hover effects by using CSS and jQuery.

DemoDownload

Sliiide

sliiide_jquery_plugin_to_create_sliding_nav_menu

Sliiide is a jQuery plugin to create a sliding menu easily. Sliiide will help you out to create an App-style navigation menu that will slide when a hamburger icon is clicked.

DemoDownload

SlidePanel

slidepanel_jquery_collapsable_panel_plugin

Slide Panel is a jQuery plugin that allows elements to expand and collapse creating a sliding panel effect.

DemoDownload

Flat Slider

flat_slider_style_your_jquery_ui_slider

Flat Slider is a useful tool to customize and style jQuery UI Slider.

DemoDownload

jQuery Hero Slider Plugin

jquery_hero_slider_plugin

jQuery Hero Slider Plugin is a light-weight and easy to install. It is responsive, powerful, and customizable. It has different kinds of transition effects.

DemoDownload

Elastic Circle Slideshow

elastic_circle_slideshow

Elastic Circle Slideshow is a very simple content slideshow with circular slides and an elastic, bouncy navigation effect.

DemoDownload

jQuery Lens Slider

jquery_lens_slider

jQuery Lens Slider comes with full open source jQuery code library, that user can develop, debug and deep customize slider of one’s own.

DemoDownload

Pointy Slider with CSS and jQuery

pointy_slider_with_css_and_jquery

Pointy Slider is a simple, responsive slider, with a sharp design and an interesting motion effect: with each new slide item, a sliding-in block of content covers the old one, and unveils a new image.

DemoDownload

SuperSimpleSlider

supersimpleslider_jquery_slider_plugin

Super Simple Slider is a jQuery plugin that automatically generates your slider and gives you a balanced amount of settings to configure. Also it can be use as carousel.

DemoDownload

Pogo Slider

pogo_slider_jquery_animated_slider_plugin

Pogo Slider is a jQuery plugin that allows you to create animated image/content sliders. CSS animations are used to transition between slides.

DemoDownload

JavaScript Slideshows Tutorial

javascript_slideshows_tutorial

A nice and detailed tutorial about basics of JavaScript slideshows. It describe the fundamental building blocks of a JavaScript slideshow (HTML, CSS, JavaScript) and the basic techniques used to create JavaScript slideshows.

DemoDownload

Simple DIY Responsive Image Slideshow with HTML5, CSS3 and jQuery

simple_diy_responsive_image_slideshow_with_html5,_css3_and_jquery

A tutorial about creating responsive image slideshow by using HTML5, CSS3 and jQuery. It also supports swiping on touch devices. It works on all modern browsers including IE 10+.

DemoDownload

Leave a Reply

Your email address will not be published. Required fields are marked *

Support Us