The jquery slider is responsive. Making a simple jQuery slider jQuery image slider and description

From the author: despite rumors about the alleged “death” of the part of web pages visible without scrolling, the need for a good slider has not disappeared anywhere. Let's be honest for a second - sliders are fun. In addition, nothing else, unlike moving content, causes a “wow” effect in the user. All sliders are a set of several slides that replace each other and it is extremely important that the slider code be as light as possible. This is where jQuery comes in handy.

Take a look at 20 jQuery sliders from Envato Market and you'll see that there are sliders that are more than just a slider block.

1. RoyalSlider - Touchscreen Image Gallery with jQuery

Now a responsive slider that is also touchscreen friendly means a lot more than it used to. RoyalSlider combines both features: adaptability and work with touch screens. A good choice as the gallery is written in HTML5 and CSS3.

A few interesting features:

JavaScript. Fast start

SEO optimization

High customizability

Over 10 starter templates

There is a fallback for CSS3 transitions

In my opinion, the coolest feature is the “modular script architecture”, which allows you to disable unnecessary things from the main JS file, thereby reducing weight. RoyalSlider, a jQuery touchscreen image gallery, is a robust JavaScript slider that should be a must-have for any developer's toolkit.

2. Slider Revolution Responsive jQuery Plugin

It's not easy to do something "revolutionary" with a slider. When it comes to sliders, there are so many features you can add to them. However, Slider Revolution is a really good try. Among jQuery sliders, this instance meets all your possible requirements.

The list of slider features is so long, so I will list only the very best:

Parallax effect and custom animation

Unlimited layers and slides with links

ready to use, deeply customizable styles

and much more

The ability to add an image, a built-in video player and social media links makes Slider Revolution one of the most flexible and customizable options on the web.

3. LayerSlider Responsive jQuery slider plugin

The title "LayerSlider Responsive jQuery Slider Plugin" doesn't really do justice to this slider.
200+ 2D and 3D slide transitions will turn anyone's head.

A couple of notable features:

13 skins and 3 menu types

Ability to place a fixed image on top of the slider

And jQuery fallback

And much more

As with the previous slider, almost any content can be added, even HTML5 resident multimedia content. The LayerSlider brings the sliders to life and is also very pretty.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow is a pretty simple slider that doesn't sacrifice any of the core functionality.

Opportunities:

Tooltips, text inserts, etc.

Preview and various options for viewing components

Timer with a delay for one slider or for all

Multiple transitions for all slides or different transitions for each one individually

jQuery Banner Rotator / Slideshow has only basic features compared to other jQuery sliders, but you should not forget about it.

5. All In One Slider - Responsive jQuery Slider Plugin

Any slider that appears on the web has its own unique vision and solves any problems in its field. But not this one. All In One Slider can be called "all inclusive".

I think most web developers and designers have a proven solution, but they are always looking for something new. And this "something new" includes:

Banner rotator

preview banner

Playlist banner

Content Slider

Carousel

All slider types support most, if not all, of the functionality required by jQuery sliders. Will All In One Slider be your All Inclusive?

6. UnoSlider - Responsive touchscreen slider

If your slider is not responsive and does not support touch screens, then you have the wrong slider. UnoSlider is correct.

This slider has found its place in the sun between simplicity and rich feature set. Functions:

Theme support

12 pre-made themes

40 transitions

IE6+ support

All features with a focus on design and style, making UnoSlider a great content slider with the ability to add themes.

7. Master Slider - jQuery touchscreen slider

Looking for "one jQuery slider to rule them all"? Try Master Slider – jQuery touchscreen slider for different screen sizes…

When it comes to good design, this example is one of the best:

Over 25 templates

Hardware accelerated transitions

Touch and swipe support

And much more

Interactive transitions, animated layers and hotspots will definitely grab your attention. Master Slider is a work of art.

8. TouchCarousel - jQuery content scroller and slider

TouchCarousel attracts with free support and updates. However, this is not all the features of this lightweight jQuery carousel slider.

If the name contains the word "touch", you can guess that the slider is fully responsive and supports touch. Other features:

SEO optimization

Smart autoplay

CSS3 hardware accelerated transitions

Customizable UI and 4 skins for Photoshop

TouchCarousel, because of its unique physical slide scrolling, is a whole new level of experience on mobile devices.

9. Advanced Slider - jQuery XML Slider

jQuery sliders can be used for more than just websites. They can also be useful in web applications. Advanced Slider allows you to do this.

With HTML or XML markup, this advanced slider makes a lasting impression:

Animated Layers and Smart Video

100+ transitions and 150+ custom properties

15 slider skins, 7 scrollbar skins and native lightbox support

Keyboard navigation, touch support and full customization

And much more

However, the best feature is the Advanced Slider, the jQuery XML Slider API, which makes the slider the perfect choice for your web application.

10. jQuery Slider Zoom In/Out Effect Fully Responsive

One of those jQuery sliders that will make you want to watch a demo before you start reading about its features. You just want to understand what this "zoom in/out effect" means.

The zoom effect is rather weak, but it adds a sense of control and a real touch to the image while the rest of the slider is static. Slider features:

CSS3 layer transitions

Animation end option for layers

Fixed Width, Full Screen, and Full Width Options

Animated text with HTML and CSS formatting

Most sliders try to pack in as many effects as possible, and the jQuery Slider Zoom In/Out Effect Fully Responsive only has a Ken Burns effect, but it's well implemented.

11. jQuery Carousel Evolution

Like the aforementioned Advanced Slider - jQuery XML Slider, jQuery Carousel Evolution has its own API that can be used to enhance functionality or integrate the slider into another project.

JavaScript. Fast start

Learn the basics of JavaScript with a practical example of building a web application

With images, HTML markup, YouTube and Vimeo videos, you also get:

SEO optimization

9 carousel styles

Shadow and reflection effects

Image size can be adjusted, both front and back

jQuery Carousel Evolution is a simple carousel with many uses.

12 Sexy Slider

Sexy Slider is not as sexy as before. However, due to its age, this slider is trustworthy.

At first glance, the slider is not very impressive, but if it is well configured, it will fit perfectly into your design. Opportunities:

Autoplay slides

Image captions

Continuous slide playback

6 transition effects

Sexy Slider is waiting for you to unlock its full power and unleash its potential.

13. jQuery Image & Content Scroller w/ Lightbox

With all these mobile-friendly designs and touch screen support, it's nice to see a jQuery slider that hasn't forgotten about the desktop.

jQuery Image & Content Scroller w/ Lightbox supports keyboard input and mouse wheel, among other features:

Horizontal and vertical orientation

Text captions inside or outside the slider

Ability to set a certain number of slides visible at a time

Inline images, Flash, iframe, Ajax and inline content

The slider also has a built-in lightbox. Optionally, in the jQuery Image & Content Scroller w/ Lightbox, you can not launch the slider itself, but launch the lightbox separately.

14. Translucent - Responsive Banner Rotator / Slider

Most jQuery sliders have their own design. You can customize it for yourself, but sometimes you just want everything to be inside the slider. Your attention is represented by Translucent.

The slider has a lot of presets. You may just need to set certain settings and that's it. Opportunities:

6 different styles

4 transition effects

2 swipe transitions

Customizable buttons and labels

Like others, this slider is touch-enabled, responsive and hardware accelerated. Translucent is a slider with a minimal design that puts the content itself at the forefront.

15. FSS - Full Screen Sliding Website Plugin

Do you want to make a full screen site with slides? Then you need FSS.

In fact, it is extremely easy to create a full-screen slider site using this jQuery slider. Opportunities:

AJAX support

Scrollbar

Support for deep linking technology

2 different transition effects

It is also worth paying attention to keyboard support and an 11-page guide. However, the real impression is the weight of the FSS, only 5Kb.

16. Zozo Accordion - Responsive touchscreen slider

Another example of a style-focused jQuery slider that does the job well. Zozo Accordion is a must for anyone looking for a good accordion slider with the ability to change styles.

This CSS3 animation beauty also has a pretty wide range of features:

Horizontal and vertical accordion

Semantic HTML5 and SEO optimization

Support for touch, keyboard and WAI-ARIA

Over 10 skins and 6 layouts

And much more

Zozo Accordion has free support and constant updates, as well as all the features you want to see in a jQuery accordion.

17.jQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin is more like a simple animation than a slider. Instead of displaying one slide at a time, this instance incrementally fills the screen with slides until there is no room left in the area before moving on to the next slide.

CSS3 animation works from within Animate.css, it is lightweight, has multiple layers and is mobile friendly. Multiple features:

There is also a drag and drop navigation option. The jQuery Responsive OneByOne Slider Plugin is powered by the Twitter Bootstrap carousel.

18. Accordionza - jQuery Plugin

There is no jQuery slider easier than this. It only takes 3Kb of slider to work, making Accordionza the lightest accordion type slider.

If you don't like the three style options, you can tweak the HTML and CSS yourself. Opportunities:

Keyboard navigation

Easy to customize effects and buttons

Progressive enhancement technique - works without JavaScript

Keep in mind that Accordionza can display many variations of mixed content, making it extremely flexible.

19. mightySlider - Responsive Multipurpose Slider

MightySlider is a really powerful slider. It can be used not only as a simple image slider, but also as a full-screen one-way slider with menu item navigation. With it, you can make a great one-page website.

Under the hood you will find many options:

Keyboard, mouse and touch support

CSS3 hardware accelerated transitions

Clean valid markup and SEO optimization

Unlimited slides, caption layers and effects

The API is very powerful and developer friendly, which opens up a variety of ways to use it. MightySlider is an excellent progressive jQuery slider with clean and well commented code.

20. Parallax Slider - Responsive jQuery Plugin

Parallax Slider works like the jQuery Responsive OneByOne Slider Plugin and allows you to animate each layer separately within the same slide. You can animate all slides or even just one by adding parallax animation.

The kit comes with 4 sliders of different types, all with a parallax effect. Like other jQuery sliders it has:

Full customizability

Touch support

Fully responsive, unlimited layers

Autoplay, looping, height and width adjustment, and timer

Animated layers are not just text or images. You can also add YouTube, Vimeo and HTML5 videos. Parallax Slider is another good example of how you can simulate Flash effects even better than Flash itself, which is also supported on all devices.

Conclusion

It's interesting to see how jQuery sliders have grown from something that simply replaces one image with another, into a huge set of creative tools. Now there are 3D sliders, parallax sliders, full page sliders, responsive sliders and those that can be viewed on both desktop computers and smartphones.

If you don't like any of the sliders on this list, you can always go through the jQuery Code Tutorial on Envato and develop something completely new and unique.

Or check out the other sliders on Envato Market to choose from. What is your favorite jQuery slider and why?

The slider horizontally scrolls the images arranged in a row. Images must be the same size. Scrolling through the images occurs automatically or using the forward and backward buttons. An example of what happens as a result can be seen in the example below.

This slider is very easy to install. as usual, you need to take several steps to implement scripts and codes in order to achieve the desired result.

HTML code

In the place where you want to display the slider itself, you need to add the HTML code of our future slider.

• sl_ctr- the main container of the slider, which contains all the elements of the slider.
• sldr- container with images. inside which are 4 images. You can post as many images as you like.
• prv_b- button to move slides back.
• nxt_b- button to move slides forward.

CSS styles

Sl_ctr( position:relative; width:450px; height:300px; overflow:hidden; ) .sldr( position:relative; width:10000px; height:300px; ) .sldr img( float:left; ) .prv_b, .nxt_b( position:absolute; top:135px; display:block; width:35px; height:35px; cursor:pointer; ) .prv_b:hover, .nxt_b:hover(opacity:.6;) .prv_b( left:10px; background: url(images/prv.png) no-repeat; ) .nxt_b( right:10px; background:url(images/nxt.png) no-repeat; )

• sl_ctr- we give our container the dimensions of the slider, in this case 450 pixels wide and 300 pixels high. The overflow:hidden parameter is also set, to crop everything that goes beyond the boundaries of this container. In our case, these are images that are located in one line.
• sldr- we set a large width of 10000 pixels for the container with pictures, so that we can fit all the pictures, no matter how many there are. the height is also set, like the main container, to 300 pixels.
• sldr img- we press all the pictures to the left so that they become in a row.
• .prv_b, .nxt_b- we set common styles for control buttons, then for each separately.

Connecting scripts

Well, the script itself, which will animate and control the slider. Using the instructions, you can also connect it in a convenient way.

Well, let's analyze the basic settings in the script.

• varsldr = $(".sldr")- we set a variable from our container for images. If you change the class name, then do it very carefully so that they match both in HTML and CSS and in the script.
• slideWidth = $(".sl_ctr").outerWidth()- define the width of our slider.
• slideCount = $(".sldrimg").length- determine the number of slides, that is, how many you added to the code of pictures.
• prv_b = $(".prv_b")- we define a block with a back button, slide controls.
• prv_b = $(".nxt_b")- we define a block with a forward button, slide controls.
• sldrInterval = 3300- time how long one image is shown. 3.3 seconds
• animateTime = 1000- animation time, slide change. 1 second.
• course = 1- slide direction. In this case, the images are shifted to the left, showing us those that are located to the right. If you set the value to -1, then the direction will change.
• margin = - slideWidth;- initial slide offset.

Also, the slider stops its animation if you hover over it.

If everything is done and configured correctly, then the slider should already work on your site. The material is not complicated, you can customize it for yourself and specific tasks on the site, and this slider will delight you and your visitors.

That's all, thanks for your attention. 🙂

A simple, lightweight (21Kb compressed) slider written in pure Javascript with no dependencies, i.e. works without jQuery.

Tested in the following browsers:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE10
• Opera 16.0

There is incomplete support for IE8/9 (no effects).

Peculiarities

• You can add an unlimited number of sliders to the page, even place one inside the other.
• Resizes based on content, but can be disabled.
• Keyboard navigation - when the cursor is on a slider, it is possible to switch sliders with arrows.
• Support for mobile touch events.

Connection

Before closing tag

need to connect slider.js or slider.min.js file.

HTML markup

slider.js can work with any inline , inline-block , block elements that have an id attribute. You can use any first-level child elements with the data-slidr attribute, for example:

• apple
• banana
• coconut

javascript

After connection slider.js the global slider object becomes available. The easiest way to create a slider is:

Slidr.create("slidr-id").start();

Call with all settings:

Slidr.create("slidr-id", ( after: function(e) ( console.log("in: " + e.in.slidr); ), before: function(e) ( console.log("out: " + e.out.slidr); ), breadcrumbs: true, controls: "corner", direction: "vertical", fade: false, keyboard: true, overflow: true, theme: "#222", timing: ( " cube": "0.5s ease-in" ), touch: true, transition: "cube" )).start();

Settings

All available settings for slidr.js are listed in the table below.

Parameter	A type	By default	Description
after	function		callback after slide change
before	function		callback function before slide change
breadcrumbs	bool	false	Show breadcrumbs to manage your slides. true or false .
controls	string	border	The location of the arrows to control the slides. border , corner or none .
direction	string	horizontal	The default direction for new slides. horizontal or h , vertical or v .
fade	bool	true	Enable fade-in/out effect for slide transitions. true or false .
keyboard	bool	false	Enable changing slides using the keyboard. true or false .
overflow	bool	false	Enable overflow for slider block. true or false .
pause	bool	false	Do not change slides automatically on mouse hover (need to run auto()). true or false .
theme	string	#fff	The color of the slider controls (breadcrumbs and arrows). #hexcode or rgba(value) .
timing	object	{}	Custom animation timings to apply. ("transition": "timing") .
touch	bool	false	Enable touch control on mobile devices. true or false .
transition	string	linear	Slide transition effect. cube , linear , fade , or none .

The after and before callbacks receive the following data:

( id: "slidr-id", in: ( el: # , slidr: "data-slidr-in", trans: "transition-in", dir: "direction-in" ), out: ( el: # , slidr: "data-slidr-out", trans: "transition-out", dir: "direction-out" ) )

Slider.js global API

The slidr global namespace provides the following functionality:

/** * Current version * @return (string) major.minor.patch. */functionversion()(); /** * Available transition effects. * @return (Array) of transitions. */ function transitions() (); /** * Creates and returns a Slidr. * Calling this function twice on the same element will return the already created Slidr object. * @param (string) element id for Slidr. * @param (Object=) opt_settings Settings for the slider. */ function create(id, opt_settings) ();

Slider API

// Initialize Slidr with custom settings var s = slidr.create("slidr-api-demo", ( breadcrumbs: true, overflow: true )); // Add horizontal slides with default transition effect. // duplicate array element "one" at the end allows Slidr // to scroll the slides indefinitely s.add("h", ["one", "two", "three", "one"]); // Adds a vertical slide with a "cube" transition effect. s.add("v", ["five", "four", "three", "five"], "cube"); // Start slider. s.start();

Short entry

Var s = slidr.create("slidr-api-demo", ( breadcrumbs: true, overflow: true )).add("h", ["one", "two", "three", "one"]) .add("v", ["five", "four", "three", "five"], "cube") .start();

The full list of Slidr.js API functions is below.

/** * Start the Slider! * Automatically finds slides to create if nothing was added prior to calling start(). * @param (string) opt_start `data-slidr` id to start on. * @return (this) */ function start(opt_start) (); /** * Check whether we can slide. * @param (string) next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return (boolean) */ function canSlide(next) (); /** * Slide! * @param (string) next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return (this) */ function slide(next) (); /** * Adds a set of slides. * @param (string) direction `horizontal || h` or `vertical || v`. * @param (Array) ids A list of `data-slidr` id"s to add to Slidr. Slides must be direct children of the Slidr. * @param (string=) opt_transition The transition to apply between the slides, or uses the default.* @param (boolean=) opt_overwrite Whether to overwrite existing slide mappings/transitions if conflicts occur.* @return (this) */ function add(direction, ids, opt_transition, opt_overwrite) (); /** * Automatically advance to the next slide after a certain timeout.Calls start() if not already called.* @param (int=) opt_msec The number of millis between each slide transition.Defaults to 5000 (5 seconds).* @param (string= ) opt_direction "up", "down", "left", or "right".Defaults to "right".* @param (string=) opt_start The `data-slidr` id to start at (only works if auto is called to start the Slidr).* @return (this) */ function auto(opt_msec, opt_direction, opt_start) (); /** * Stop auto transition if it"s turned on. * @return (this) */ function stop() (); /** * Set custom animation timings. * @param (string|Object) transition Either a transition name (i.e. "cube"), or a ("transition": "timing") object. * @param (string=) opt_timing The new animation timing (i.e "0.5s ease-in"). Not required if transition is an object. * @return (this) */ function timing(transition, opt_timing) (); /** * Toggle breadcrumbs. * @return (this) */ function breadcrumbs() (); /** * Toggle controls. * @param (string=) opt_scheme Toggle on/off if not present, else change layout. "border", `corner` or `none`. * @return (this) */ function controls(opt_scheme) ();

Scrolled pages during slide transition

This annoying bug appears in some browsers. To fix it, you need to add a style to the body:

Body ( overflow: hidden; )

Dynamic resizing

Slidr itself "understands" whether it is necessary to resize the slider to fit the image. If the slider block has dimensions, then Slidr will not automatically change them. If the min-width and min-height properties are specified, then the slider will resize itself according to the content, taking into account these values. Otherwise, the sizing will take place automatically.

Automatic resizing

Static dimensions

Slider Controls

The layout of the controls is as follows:

You can customize any slider control with CSS selectors:

aside .slidr-control.right ( width: 50px !important; height: 50px !important; top: 50% !important; margin-top: -25px !important; right: -25px !important; border-radius: 25px; background : url("/static/images/arrow_right.png") 14px 13px no-repeat black; opacity: 0.4; ) aside .slidr-control.right:hover ( opacity: 1; )

The arrow control is implemented with the :after pseudo-selector, so to hide it use the following code:

// Hide a single arrow within a single controller. aside .slidr-control.right:after ( border-color: transparent !important; ) // Hide all arrows within a single controller. aside .slidr-control:after ( border-color: transparent !important; ) // Hide all Slidr arrows. aside .slidr-control:after ( border-color: transparent !important; )

Breadcrumbs Slidr

Breadcrumbs have simple HTML markup. Each ul stands for the entire line, and each li stands for a breadcrumb:

Styling breadcrumbs with CSS:

// Customize the position, size, border color and background color. aside ( right: 50% !important; margin-right: -41px !important; ) aside .slidr-breadcrumbs li ( width: 15px !important; height: 15px !important; margin: 3px !important; ) aside .slidr-breadcrumbs li.normal ( border-color: white !important; ) aside .slidr-breadcrumbs li.active ( background-color: black !important; )

License

This software is free to use under the MIT license.

This is a responsive touch slider written in jQuery. The engine of this plugin uses CSS3 animations, but at the same time, fallbacks are provided for older versions of browsers. Glide.js is simple and lightweight.

Usage

1. Include jQuery

The only plugin dependency is jQuery, which we must include first:

2. Include Glide.js

3. Add html

Let's connect the base styles.

Let's roll up the html structure of the slider.

4. Initialization

Launching the slider with default settings...

... or customize it for yourself

Settings

List of available options:

Parameter	Default value	A type	Description
autoplay	4000	int/bool	Autoscroll (false to disable)
hoverpause	true	bool	Pause autoscroll when mouse hovering over slider
animationTime	500	int	!!! This option works if the browser does NOT support css3. If css3 is supported by the browser, then this parameter must be changed in the .css file!!!
arrows	true	bool/string	Show/hide/attach arrows. True to display arrows in the slider container. False to hide. You can also specify the name of the class (example: ".class-name") to attach a special html code
arrowsWrapperClass	slider-arrows	string	The class that will be assigned to the container with arrows
arrowMainClass	slider arrow	string	Main class for all arrows
arrowRightClass	slider-arrow-right	string	Class for right arrow
arrowLeftClass	slider-arrow-left	string	Class for left arrow
arrowRightText	next	string	Text for right arrow
arrowLeftText	prev	string	Text for left arrow
nav	true	bool/string	Show/hide/attach slide navigation. True to display. False to hide
navCenter	true	bool	Center Navigation
navClass	slider-nav	string	Class for navigation container
navItemClass	slider-nav_item	string	Class for the navigation element
navCurrentItemClass	slider-nav__item--current	string	Class for the current navigation element
keyboard	true	bool	Scroll the slide by pressing the left/right buttons
touchDistance	60	int/bool	Touch support (touch). False to disable this feature.
beforeInit	function()()	function	Callback that will run before plugin initialization
afterInit	function()()	function	Callback that will run after plugin initialization
beforeTransition	function()()	function	Callback that will run before scrolling the slider
afterTransition	function()()	function	Callback that will run after the slider is scrolled

API

To use the API, write glide to a variable.

var glide = $(".slider").glide().data("api_glide");

The API methods are now available to you.

Glide.jump(3, console.log("Wooo!"));

• .current() - Return current side number
• .play() - Start auto-scrolling
• .pause() - Stop auto scrolling
• .next(callback) - Scroll the slider forward
• .prev(callback) - Scroll the slider back
• .jump(distance, callback) - Jump to a specific slide
• .nav(target) - Attach navigation to a specific element (ex: "body", ".class", "#id")
• .arrows(target) - Attach arrows to a specific element (eg: "body", ".class", "#id")

Adaptive or, if you like, responsive web design is now not just another design trend, it is already a kind of website development standard that ensures the versatility of websites, harmonious visual perception on the screens of various user devices. More recently, when developing an adaptive template, I had to face various difficulties in integrating certain sliders and image galleries without violating the overall design style. Now everything is much simpler, there are a huge number of ready-made solutions on the network, and what is especially pleasing is that most of them are freely available, open source.

Due to the variety of tools on offer, I have compiled a short overview of the most notable developments of responsive jQuery image sliders that have appeared most recently and are distributed without any restrictions, i.e. absolutely free.

WOW Slider

Responsive jQuery image slider with a great set of visual effects (rotations, flyouts, blurs, spirals, blinds, etc...) and lots of ready-made templates. With WOW Slider's built-in page embed wizard, you can easily create stunning slideshows in minutes. The developer's site contains all the necessary documentation for setting up and using the plugin in Russian, excellent live examples of the plugin. A standalone Wordpress plugin and Joomla module are also available for download. I am sure that many people will like this wonderful slider, both for beginners and advanced webmasters.

HiSlider

HiSlider - HTML5, Jquery slider and image gallery, absolutely free plugin for personal use on sites running popular systems - WordPress, Joomla, Drupal. With the help of this simple, but quite functional tool, you can easily create amazing and vibrant slide shows, spectacular presentations and announcements of new messages on the pages of your sites. Several ready-made templates and skins for the slider, amazing content transition (change) effects, the output of various multimedia content: videos from YouTube and Vimeo, flexible user settings, etc...

Nivo Slider

Nivo Slider - good old, well known to everyone in the subject, one of the most beautiful and easy to use image slider. The jQuery Nivo Slider plugin is free to download and use under the MIT license. There is also a separate plugin for WordPress, but unfortunately it is already paid and you will have to pay $ 29 for one license for it. It’s better to do some magic with the WP theme files and attach the free jQuery version of the Nivo Slider plugin to your blog, since there is enough information on the net how to do this.
As for the functionality, everything is in order with this. It uses the jQuery v1.7+ library, beautiful transition effects, simple and very flexible settings, adaptive layout, automatic image cropping and much more.

The idea of ​​the slider was inspired by the developers, well-known to all the style of presenting Apple products, where several small items (pictures) change on click on the selected category with a simple animation effect. Codrops provides you with a detailed tutorial on how to create this slider, a complete layout of the Html markup, a set of CSS rules and an executable jQuery plugin, as well as a wonderful live example of using the slider.

Slider Slider

Full screen image slider in jQuery and CSS3 + a detailed tutorial on integrating the plugin into website pages. The idea is to slice open the current slide with specific content when moving to the next or previous content. With jQuery and CSS animations, you can create unique transitions between slides. Responsive slider layout ensures that it will look equally good on the screens of different types of user devices.

Elastic Content Slider

A content slider that automatically adjusts in width and height depending on the size of the parent container in which it is located. Quite simple in execution and flexible in settings, the slider works on JQuery, with navigation at the bottom, when the screen size is changed downwards, the navigation is displayed in the form of icons. Very detailed documentation (creation tutorial) and live examples of use.

3D Stack Slider

An experimental version of the slider that shows images with transitions from the 3D plane. The images are divided into two horizontal stacks, with the help of the navigation arrows, the change and transition of each subsequent image to the viewing state is carried out. In general, nothing special, but the idea itself and the technique of execution are quite interesting.

Very simple, 100% responsive and fullscreen jQuery image slider. The work of the slider is based on CSS transitions (transition property) in conjunction with jQuery magic. The max-width is set to 100% by default, so images will resize as the screen size changes. There are no special animation effects and frills in the design, everything is simple and sharpened for smooth operation.

Minimal Slides

The name says it all, it's probably one of the most lightweight and minimalist jQuery image sliders I've come across (1kb plugin). ResponsiveSlides.js- A tiny jQuery plugin that creates a slideshow using elements inside a container. Works with a wide range of browsers, including all versions of IE, the famous progress brake, from IE6 and up. The work uses CSS3 transitions in conjunction with javascript, for reliability. Simple markup using an unordered list, setting transitions and time intervals, automatic and manual control of switching slides, as well as support for multiple slide shows at once. Here is such a frisky "baby".

camera

Camera is a free jQuery slideshow plugin for website pages, a lightweight slider with many transition effects, 100% responsive layout, and very simple settings. It will fit perfectly on the screens of any user devices (PC monitors, tablets, smartphones and mobile phones). Possibility of demonstration of embedded video. Automatic slide change and manual control via buttons and image thumbnail block. Almost a complete gallery of pictures in a compact design.

bxSlider jQuery

Another pretty simple jQuery responsive slider. Slides can contain any content, videos, images, text and other elements. Extended touch screen support. Using CSS animation transitions. A large number of different variations of slideshow presentation and compact image galleries. Automatic and manual control. Switch slides using buttons and by selecting thumbnails. Small source file size, very easy to set up and implement.

Flex Slider 2

FlexSlider 2 - An updated version of the eponymous slider, with improved responsiveness, script minification, and minimizing reflow/redraw. The plugin includes a basic slider, slide management controls with thumbnails, built-in left-right arrows, and a button-like bottom navigation bar. The ability to display video in slides (vimeo), flexible parameter settings (transitions, design, time interval), fully adaptive layout.

Galleria

A well known and quite popular responsive jQuery plugin for creating high quality image galleries and sliders. The slider interface, thanks to its control panel, visually resembles a familiar video player, the plugin includes several different themes. Support for embedded video and images from popular services: Flickr, Vimeo, YouTube and others. Detailed documentation on setup and use.

blueberry

A simple, no-frills free jQuery image slider written specifically for responsive web design. Blueberry is an open source experimental jQuery plugin. Minimalistic design, no effects, only smoothly pop-up images replacing each other after a certain period of time. It's very simple, install, connect and go ...

jQuery popeye 2.1

Very compact jQuery image slider with Lightbox elements. Thanks to its flexible size, it is very easy to fit into any container, in a single post in the form of thumbnails, when you hover over or click on them, a lightbox with a larger image and controls is activated. It is convenient to place such a slider in the sidebars to present products or news announcements. An excellent solution for sites with a large amount of information.

Sequence

Free responsive slider with advanced CSS3 transitions. Minimalistic style, 3 themes, Each frame slides in a horizontal direction, appearing in the center, the picture goes to the left, the caption to the right, the thumbnails are duplicated in the lower right corner. Pagination of product views to view in every frame. The controls also include back and forward buttons. Support for all modern browsers.

Swipe

A very simple picture slider both in terms of functionality and settings, from the settings there is a change in the speed of the slides, the connection of a manual mode (the control buttons are activated), a continuous slide show. This slider has the right to be and it attracted me only by the fact that it exists, I didn’t find anything particularly interesting in this development for myself, maybe I was looking badly)))

Responsive Image Slider

Such a beautiful, adaptive image slider from Vladimir Kudinov comrades. A solid, well-designed tool is provided with illustrative examples and detailed instructions for creating, installing and using. Responsive design, cute green buttons and arrows, everything is quite nice and calm, without pressure.

FractionSlider

Free jQuery slider plugin with parallax effect for images and text slides. Slide animations have multiple show values ​​with full control over each timing and animation setting. The ability to animate several elements on a slide at once. You can set different animation methods, fade slides or transitions from a specific direction. Automatic display and manual control using the navigation arrows that pop up when hovering over the image. 10 kinds of slideshow animation effects and more...

The review turned out to be quite extensive, but not informative enough due to the large number of products under consideration. You can find out all the details and detailed descriptions of the functionality of a particular plugin directly on the developers' pages. I can only hope that it has made it easier for someone to find the very right tool for creating colorful image sliders on the pages of their sites.

Ever thought about the fact that it would be nice to be able to work with Russified templates? Just think for a minute. No wasting time working with English-language templates. We hasten to please you with the fact that you can now find . The text for each of them was written by hand. And, of course, all ready-made solutions are incredibly easy to use.

With all respect, Andrew