Slider with description in jquery. Making a simple slider using jQuery

We need a simple slider with automatic scrolling. Let's get started...

Description of how the slider works.

The slides will be lined up and will scroll after a certain amount of time.

The red frame shows the visible part of the slider.

At the end of the slider you need to duplicate the first slide. This is necessary in order to ensure scrolling from the third slide to the first. You also need to add the last slide to the beginning to be able to scroll backwards from the first slide to the third. Below is shown how the slider works in the forward direction.

When the slider reaches the end, a copy of it from the beginning of the slider is instantly placed in place of the last slide. Then the cycle repeats again. This creates the illusion of an endless slider.

HTML markup

First, let's make a simple slider with automatic scrolling. It requires two containers to operate. The first one will set the size of the visible area of ​​the slider, and the second one is needed to place sliders in it. The slider layout will look like this:

Slider styles .slider-box( width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relative ; width : 10000px ; height : 210px ; ) .slider img( float : left ; z-index : 0 ; )

Container.slider-box specifies the dimensions of the slider. Using the overflow:hidden property, all elements that are not included in the area inside the element are hidden.

Container.slider is set to a large width. This is necessary so that all the slides fit into the line.

Slides are aligned using the float:left property.

Below is a schematic layout of the slider blocks.

Script

The movement of the slides will be carried out by smoothly changing the margin-left property of the container.slider.

$(function () ( var width= $(".slider-box" ) .width () ; // Slider width. interval = 4000 ; // Slide change interval. $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // A copy of the last slide is placed at the beginning. $() .eq (1 ) .clone () .appendTo ( "slider" ) ; // A copy of the first slide is placed at the end. // Container.slider is shifted to the left by the width of one slide setInterval("animation()" , interval) ; // The animation() function is launched to change slides. ) ) ; function animation() ( var margin = parseInt($(".slider") .css ("marginLeft" ) ) ; // Current block offset.slider width= $(".slider-box" ) .width () , / / Slider width. slidersAmount= $(".slider" ) .children () .length ; // Number of slides in the slider. if (margin!= (- width* (slidersAmount- 1 ) ) ) // If the current slide is not the last , ( margin= margin- width; // then the margin value is reduced by the width of the slide. ) else ( // If the last slide is shown, $(".slider" ) .css ("margin-left" , - width) ; // then block.slider is returned to starting position, margin=- width* 2 ; ) $(".slider") .animate (( marginLeft: margin) , 1000 ) ; // Block.slider is shifted to the left by 1 slide. ) ;

The result was a simple slider with endless automatic scrolling.

Hello, dear blog readers. Today I present to you a useful selection of free jQuery slider ov with examples. If you still decide to put an image slider on your resource, this selection will be very useful to you, and, believe me, you have plenty to choose from. Moreover, all the sliders have examples, and you can try each of them in action. In general, I won’t distract you, take your pick :-)

Simple jQuery image slider

The most common and small thumbnail slider on your site.

Thumbnail Slider in JQuery

A very simple and interesting slider with thumbnails that is suitable for almost any design.

Beautiful slider for the site

A large and very beautiful image slider, with interesting text scrolling.

Regular jQuery slider

The most common and simple slider for your resource

Large slider with description

A spectacular slider that is impossible to pass by.

JQuery image slider and description

Wait and stylish text slider with images and with a beautiful flipping effect.

Scrolling images with hints

Interesting scrolling of images that scrolls continuously and smoothly. By default there are images of different fruits, which you can change to your own.

jQuery slider with big arrows

An interesting slider with large pink arrows that change size by enlarging the image.

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

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

WOW Slider

Responsive jQuery image slider with a great set of visual effects (rotation, flyout, blur, spirals, blinds, etc...) and many ready-made templates. With WOW Slider's built-in page insertion wizard, you can easily and effortlessly create stunning slideshows in minutes. The developer’s website contains all the necessary documentation for setting up and using the plugin in Russian, as well as excellent live examples of how the plugin works. A separate Wordpress plugin and a module for Joomla are also available for download. I am sure that many will like this wonderful slider, both beginners and experienced 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 websites. Several ready-made templates and skins for the slider, stunning content transition (change) effects, output of various multimedia content: videos from YouTube and Vimeo, flexible custom settings etc...

Nivo Slider

Nivo Slider is a good old one, well known to everyone in the know, one of the most beautiful and easy to use image sliders. The JQuery Nivo Slider plugin is free to download and use and is licensed 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. It’s better to do a little magic with the WP theme files and attach the free jQuery version of the Nivo Slider plugin to your blog, since there is plenty of information on how to do this on the Internet.
As for functionality, everything is in order with this in perfect order. The jQuery v1.7+ library is used for work, beautiful effects transitions, simple and very flexible settings, adaptive layout, automatic image cropping and much more.

The idea of ​​the slider was inspired by the developers, who are well known for their presentation style Apple products, where several small objects (pictures) change by clicking on the selected category with a simple animation effect. Codrops presents at your disposal a detailed lesson on how to create this slider, a complete layout of Html markup, a set CSS rules and executable jQuery plugin, as well as a wonderful live example of using the slider.

Slit Slider

Full-screen image slider using JQuery and CSS3 + detailed tutorial on integrating the plugin into website pages. The idea is to slice the open current slide with specific content when moving to the next or previous content. Using JQuery and CSS Animations you can create unique transitions between slides. Responsive slider layout ensures it looks equally good across screens various types 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 to implement and flexible in settings, the slider runs 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 demonstrates images with transitions from the 3D plane. The images are divided into two horizontal stacks, using the navigation arrows to change and transition each subsequent image to the viewing state. In general, nothing special, but the idea itself and the execution technique are quite interesting.

A very simple, 100% responsive and full screen jQuery image slider. The slider's operation is based on CSS transitions (the transition property) in conjunction with the magic of jQuery. The max-width value is set to 100% by default, so the size of the images will change depending on changes in screen size. There are no special animation effects or frills in design, everything is simple and designed for trouble-free operation.

Minimal Slides

The name speaks for itself, this is perhaps one of the most lightweight and minimalistic jQuery image sliders that I have come across (1kb plugin). ResponsiveSlides.js is a tiny JQuery plugin that creates slideshows using elements inside a container. Works with a wide range of browsers, including all versions of IE - the famous brake on progress, from IE6 and higher. The work uses CSS3 transitions in conjunction with javascript for reliability. Simple markup using unordered list, setting transitions and time intervals, automatic and manual control of slide switching, as well as support for several slide shows at once. Here is such a playful “baby”.

Camera

Camera is a free JQuery plugin for organizing slideshows on website pages, a lightweight slider with many transition effects, a 100% responsive layout, and very simple settings. Fits perfectly on the screens of any user devices (PC monitors, tablets, smartphones and Cell phones). Possibility of demonstrating embedded video. Automatic slide change and manual control using buttons and image thumbnail block. An almost complete gallery of pictures in a compact design.

bxSlider jQuery

Another fairly simple responsive slider in jQuery. You can place any content, video, images, text and other elements on your slides. Extended support touch screens. Using CSS transition animations. A large number of different variations of slide shows and compact image galleries. Automatic and manual control. Switch slides using buttons and by selecting thumbnails. Small size source file, very easy to configure and implement.

FlexSlider 2

FlexSlider 2 - An updated version of the slider of the same name, with improved responsiveness, minification of the script, and minimization of reflow/redrawing. The plugin includes a basic slider, slide control with thumbnails, built-in left-right arrows and a bottom navigation bar in the form of buttons. The ability to display video in slides (vimeo), flexible 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 design themes. Support for embedded videos 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 experimental open source jQuery plugin. Minimalistic design, no effects, only smoothly pop-up images replacing each other after a certain period of time. Everything is very simple, install, connect and go...

jQuery popeye 2.1

A very compact jQuery image slider with Lightbox elements. Thanks to its flexible dimensions, it is very easy to integrate into any container, into a single entry in the form of thumbnails, when hovering the mouse cursor or clicking on them, a lightbox with an enlarged picture and controls is activated. It is convenient to place such a slider in side panels 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. Minimalist style, 3 design themes, Each frame slides horizontally, appearing in the center, the picture goes to the left, the signature to the right, thumbnails are duplicated in the lower right corner. Pagination of product views to be viewed in each frame. The controls also include back and forward buttons. Support from everyone modern browsers.

Swipe

A very simple image slider both in terms of functionality and settings; among the settings there is a change in the speed of changing slides, activation of the manual mode (control buttons are activated), continuous slide show. This slider has the right to exist and it attracted me only because it exists; I didn’t find anything particularly interesting in this development, maybe I wasn’t looking for it well)))

Responsive Image Slider

Such a beautiful, adaptive image slider from Vladimir Kudinov, comrades. A solid, well-designed tool, provided with clear examples and detailed instructions on creation, installation and use. Adaptive design, nice buttons and green 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 display values ​​with full control in each timing and animation setting. The ability to animate several elements on a slide at once. You can install various methods animations, slides fading, or transitions from a certain direction. Automatic display and manual control using navigation arrows that pop up when you hover over the image. 10 types of slide animation effects and much more...

The review turned out to be quite extensive, but not informative enough due to large quantity the products in question. All details and detailed descriptions functionality of this or that plugin, you can find out directly on the developers’ pages. I can only hope that I have made it easier for someone to find that very necessary tool for creating colorful picture sliders on the pages of their websites.

Have you ever thought that it would be nice to be able to work with Russian-language templates? Just think about it for a minute. No wasting time working with English-language templates. We hasten to please you that you can now find it on the TemplateMonster marketplace. 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

If you need to add a high-quality jQuery image slider to your site, then in this article you will find a description required plugins. Even though JQuery has made working with JavaScript much easier, we still need plugins to speed up the web design process.

We can make changes to some of these plugins and create new sliders that are much more suitable for the purposes of our site.

For other sliders, you simply add titles, images, and select slide transition effects that come with the slider. All of these plugins are accompanied by detailed documentation, so adding new effects or functions to them will not be difficult. You can even change event-based triggers if you're an experienced JQuery programmer.

Latest trends such as responsive design are very important for web projects, whether you are implementing a plugin or a script. All of these elements make each of these plugins very flexible. Everything that came out in 2014 is included in this list.

JQuery image sliders Jssor Responsive Slider

I recently came across this powerful JQuery slider and was able to see first hand that it does its job very well. It contains limitless possibilities that can be expanded through the open source code of the slider:

  • Adaptive design;
  • More than 15 customization options;
  • More than 15 image changing effects;
  • Image gallery, carousel, full screen size support;
  • Vertical banner rotator, list of slides;
  • Video support.

Demo | Download

PgwSlider - responsive slider based on JQuery / Zepto

The only task of this plugin is to show slides of images. It is very compact, since the JQuery files are only 2.5 KB in size, which allows it to load really quickly:

  • Adaptive layout;
  • SEO optimization;
  • Support for different browsers;
  • Simple image transitions;
  • The archive size is only 2.5 KB.

Demo | Download

Jquery Vertical News Slider

A flexible and useful JQuery slider designed for news resources with a list of publications on the left side and an image displayed on the right:

  • Adaptive design;
  • Vertical column for switching news;
  • Expanded headers.

Demo | Download

Wallop Slider

This slider does not contain jQuery, but I would like to present it as it is very compact and can significantly reduce page loading time. Let me know if you like it:

  • Adaptive layout;
  • Simple design;
  • Various slide changing options;
  • Minimal JavaScript code;
  • The size is only 3KB.

Demo | Download

Flat-style Polaroid gallery

A document-scattered-on-a-desk style gallery with a flexible layout and beautiful design should be of interest to many of you. More suitable for tablets and large displays:

  • Adaptive slider;
  • Flat design;
  • Random slide change;
  • Full access to source code.

Demo | Download

A-Slider

Demo | Download

HiSlider – HTML5, jQuery and WordPress image slider

HiSlider has introduced a new free jQuery slider plugin with which you can create a variety of image galleries with fantastic transitions:

  • Adaptive slider;
  • Does not require programming knowledge;
  • Several amazing templates and skins;
  • Beautiful transition effects;
  • Support for different platforms;
  • Compatible with WordPress, Joomla, Drupal;
  • Ability to display content different types: images, YouTube video and Vimeo videos;
  • Flexible setup;
  • Useful additional features;
  • Unlimited amount of content displayed.

Demo |Download

Wow Slider

WOW Slider is a responsive jQuery image slider with amazing visual effects(domino, rotate, blur, flip and flash, fly out, blinds) and professional templates.

WOW Slider comes with an installation wizard that allows you to create fantastic sliders in seconds without having to understand code or edit images. Versions of the plugin for Joomla and WordPress are also available for download:

  • Fully responsive;
  • Supports all browsers and all types of devices;
  • Support touch devices;
  • Easy installation on WordPress;
  • Flexibility in configuration;
  • SEO-optimized.

Demo |Download

Nivo Slider – free jQuery plugin

Nivo Slider is known all over the world as the most beautiful and easy to use image slider. The Nivo Slider plugin is free and released under the MIT license:

  • Requires JQuery 1.7 and above;
  • Beautiful transition effects;
  • Simple and flexible to configure;
  • Compact and adaptive;
  • Open source;
  • Powerful and simple;
  • Several different templates;
  • Automatic image cropping.

Demo |Download

Simple jQuery slider with technical documentation

The idea was inspired by Apple's sliders, in which several small elements can fly out with different animation effects. The developers tried to implement this concept taking into account minimum requirements for creating simple design an online store in which the “flying” elements represent various categories:

  • Adaptive layout;
  • Minimalistic design;
  • Various drop-out and slide changing effects.

Demo |Download

Full size jQuery image slider

A very simple slider that occupies 100% of the page width and adapts to screen sizes mobile devices. It works with CSS transitions, and images are "stacked" along with anchors. The anchor can be replaced or removed if you do not want to attach a link to the image.

When installed, the slider expands to 100% of the screen width. It can also automatically reduce the size of slide images:

  • Adaptive JQuery slider;
  • Full size;
  • Minimalist design.

Demo |Download

Elastic Content Slider + tutorial

Elastic Content Slider automatically adjusts the width and height based on the dimensions of the parent element. This is a simple jQuery slider. It consists of a slide area at the top, and a navigation tab bar at the bottom. The slider adjusts its width and height according to the dimensions of the parent container.

When viewed on small diagonal screens, the navigation tabs turn into small icons:

  • Adaptive design;
  • Mouse click scrolling.

Demo |Download

Free 3D Stack Slider

An experimental slider that scrolls through images in 3D. The two stacks resemble stacks of paper, from which, when scrolled, images are displayed in the center of the slider:

  • Adaptive design;
  • Flip - transition;
  • 3D effects.

Demo |Download

Fullscreen Slit Slider based on JQuery and CSS3 + tutorial

This tutorial will show you how to create a slider with a twist: the idea is to “cut” and display the current slide as you open the next or previous image. Using JQuery and CSS animation, we can create unique transition effects:

  • Adaptive design;
  • Split transition;
  • Full screen slider.

Demo |Download

Unislider - a very small jQuery slider

No unnecessary bells and whistles, less than 3KB in size. Use any HTML code for your slides, extend it with using CSS. Everything related to Unslider is hosted on GitHub:

  • Support for various browsers;
  • Keyboard support;
  • Height adjustment;
  • Adaptive design;
  • Touch input support.

Demo | Download

Minimal Responsive Slides

A simple and compact plugin (only 1 KB in size) that creates a responsive slider using elements inside a container. ResponsiveSLides.js works with big amount browsers, including all versions of IE from IE6 and higher:

  • Fully responsive;
  • Size 1 KB;
  • CSS3 transitions with the ability to run via JavaScript;
  • Simple markup using bulleted lists;
  • Ability to customize transition effects and viewing duration of one slide;
  • Supports the ability to create multiple slide shows;
  • Automatic and manual scrolling.

Demo |Download

Camera - free jQuery slider

Camera is a plugin with many transition effects and a responsive layout. Easy to set up, supported by mobile devices:

  • Fully responsive design;
  • Signatures;
  • Ability to add videos;
  • 33 different color icons.

Demo |Download

SlidesJS, responsive jQuery plugin

SlidesJS is a responsive plugin for JQuery (1.7.1 and above) with support for touch devices and CSS3 transitions. Experiment with it, try a few ready-made examples that will help you figure out how to add SlidesJS to your project:

  • Adaptive design;
  • CSS3 transitions;
  • Support for touch devices;
  • Easy to set up.

Demo | Download

BX Jquery Slider

This is a free responsive jQuery slider:

  • Fully responsive - adapts to any device;
  • Horizontal, vertical slide change;
  • Slides can contain images, videos or HTML content;
  • Expanded support for touch devices;
  • Using CSS transitions for slide animation (hardware acceleration);
  • Callback API and fully public methods;
  • Small file size;
  • Easy to implement.

Demo |Download

FlexSlider 2

The best responsive slider. A new version was modified to increase speed and compactness.

Demo | Download

Galleria - JavaScript-based responsive photo gallery

Galleria is used on millions of sites to create image galleries in high quality. The number of positive reviews about her work is simply off the charts:

  • Completely free;
  • Full screen viewing mode;
  • 100% adaptive;
  • No programming experience required;
  • Support for iPhone, iPad and other touch devices;
  • Flickr, Vimeo, YouTube and more;
  • Several topics.

Demo | Download

Blueberry - a simple responsive jQuery image slider

I present to you a jQuery image slider written specifically for responsive web design. Blueberry is an experimental open source image slider plugin that was written specifically to work with responsive templates.

The slider has become very popular relatively recently. About half of all templates contain a slider.

A slider is an area of ​​the site (usually the central part, right after the header). Its goal is to make the site more informative, “alive”, an attempt to describe the advantages of a company or product in several pictures.

There are many options for creating a slider. We'll look at a few of the most popular ones. Sources will be provided for each method.

Option #1. Slider in JQuery (JavaScript)

This is a photo of what you get with this option (the source with this example is below)

For the slider to work you need to do the following:

  • Include javascript (java files) in header tags
  • The style file is again in the header tags
  • In the place where you need to display the slider, fill in the tag (as in the example above)
Option #2. CSS based slider

In order not to load the site with unnecessary scripts, there are great way make a slider based only on CSS (i.e. purely on styles). Let's look at an example.

Example No. 1

Example No. 2

Example No. 3

This is what should happen.