Vlasny slider on jQuery. Simple adaptive touch jQuery slider Beautiful sliders on jquery

From this article, we will understand that it is very easy to create an adaptive slider for the site using additional CSS Flexbox and CSS transformation.

A slider project called chiefSlider is being promoted on GitHub. You can go to Nyogo as soon as possible.

Slider with one active slide (without looping):

Slider with three active slides (without looping):

An example that shows how you can set up a slider for rotating articles:

Let's list the main advantages of this slider:

• First of all, it does not create clones of elements (items) to organize looping, as is implemented, for example, in the OwlCarousel and Slick plugins;
• otherwise, it won’t be stored in the jQuery library; It’s not just about collecting additional benefits, but about giving away the easy ones;
• Thirdly, it is practical not to make necessary changes to the DOM of the document; The only thing you need to do is add and change the CSS values ​​of the slider elements by transforming them;
• fourthly, you can’t afford a minimum set of functions; Additional functionality can be added separately as required;
• In other words, it is adaptive, then. you can vikorist on any sites; The adaptability of the slider is adjusted using additional CSS;
• Basically, a number of active elements are configured using additional CSS; This means that you can use it to create a carousel either with one active slide or with any other number.

Installing the slider takes 3 steps:

• add the CSS slider chiefSlider to the side or a CSS file, connections to the side;
• place the HTML code of the slider at the desired location on the sidebar;
• insert the JavaScript code on the side or js file, connect to the side.

CSS and JavaScript code should be kept to a minimum in order to ensure more attractive pages.

The chiefSlider slider is created using HTML code, CSS and JavaScript (without jQuery).

HTML code for the chiefSlider slider:

Apparently, the slider has a very simple HTML architecture. Starting from the main block, which is the slider class. This block consists of 3 elements.

The first element is slider__wrapper. It acts as a wrapper for slider__item elements (slides).

The other two elements (slider__control) are visually buttons. This will help you navigate the slide, then. transition to the front and forward elements.

CSS code for the chiefSlider slider:

/* MAIN STYLES */ .slider ( position: relative; overflow: hidden; ) .slider__wrapper ( display: flex; 50%; /* indicates the number of active slides (in this category 2 */ max-width: 50%; /* means the number of active slides (there are 2 in this category */ ) /* STYLES FOR BACK AND FORWARD BUTTONS * / .slider__control ( position: absolute; display: none; top: 50%; transform: translateY(-50%) ; align-items: center; justify-content: center; text-align: center; width: 40px; /* button width */ height: 50px; /* button height */ opacity: .5; /* clarity */ background : #000; /* background color */ . slider__control:focus ( text-decoration: none; outline: 0; opacity: .9; /* clarity */ ) .slider__control_left ( left: 0; ) .slider__control_right ( right: 0 ; ) .slider__control::before ( content: " "; display: inline-block; width: 20px; /* icon (arrow) width */ height: 20px; /* icon (arrow) height */ background: transparent no- repeat center center; background-size: 100%; 100%; ) .slider__control_left::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www .w3.org/2000/svg" fill="%23fff viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5 -1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Apparently, the CSS code of the slider is not very flexible. The main meanings, which can be used to customize the new look of the slider, can be placed in comments.

CSS code that indicates the number of active elements:

/* indicates the number of active slides (this option has 2) */ flex: 0 0 50%; max-width: 50%;

This code sets the slider to a number of active elements, which is more than 2.

In order for the slider, for example, to have one active element, the value must be changed on the step:

/* indicates the number of active slides (this option has 1) */ flex: 0 0 100%; max-width: 100%;

The creation of the adaptive slider is based on additional media queries.

For example, a slider, which on devices with a crap screen is responsible for the mother of one active slide, and on the big ones - chotiri:

Slider__item ( flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item ( flex: 0 0 25%; max-width: 25%; ) )

JavaScript code for the chiefSlider slider:

"use strict"; var multiItemSlider = (function () ( return function (selector) ( var _mainElement = document.querySelector(selector), // main element of the block _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider-item_s = _mainElement.querySelectorAll(".slider__item"), // elements (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // elements _sliderControlLeft = _mainElement.querySelector(".slider__ "LEFT" button _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // "RIGHT" button _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // wrap width _itemWid. dth), // width of one element _positionLeftItem = 0, // left position active element _transform = 0, // transformation values. on top of the array _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 ))); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (direction) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1)).getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderCon trolRight .classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (direction === "left") ( if (_ ; ) return (element.contains(elemFromPoint(rect.left, rect.top )) || element.contains(elemFromPoint(rect.right, rect.top)) ||element.contains(elemFromPoint(rect.right, rect. bottom)) ||element.contains(elemFromPoint(rect.left, rect. bottom)));

You can place the _isElementVisible click, for example, on the beginning of the _transformItem function. This allows you to set the automatic change of slides if the slider is currently in the viewport position.

Var _transformItem = function (direction) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...

This version of the adaptive slider extends beyond the previous ones, allowing you to change the number of active elements (slides) when changing the size of the browser window. Make sure you do not change your browser size, otherwise this may happen.

Implemented with additional help from resize and _states array. The massif is being used for calculation. Please do not hesitate to re-initialize the slider unless necessary.

Adaptive, or if you want, sensitive web design is not just a trendy design trend, but also a standard for website development, which will ensure the versatility of websites, harmonious visual harmony on the screens of various consumer devices. Just recently, when developing an adaptive template, I had to deal with various difficulties of integrating sliders and image galleries without disturbing the original design style. Now everything is much simpler, at least one realizes the great number of ready-made solutions and it is especially important to keep most of them freely accessible, with a secret exit code.

Through the diversity of the presented tools, I took a short look at the most notable developments of adaptive jQuery sliders to display images that have appeared all the time and are displayed everywhere without any boundaries, then. absolutely cost-free.

An adaptive jQuery slider is displayed with a wonderful set of visual effects (rotations, volleys, spreads, spirals, blinds, etc.) and a variety of ready-made templates. With the help of the sidebar insertion master built into WOW Slider, you can easily and effortlessly create miraculous slideshows for the treatment of illness. On the retailer's website there is all the necessary documentation from the setup and use of the Russian plugin, the miraculous live application of the plugin. The same Wordpress plugin and module for Joomla are also available for download. Congratulations on the fact that this wonderful slider has a lot to offer, both for beginners and web masters who have come up with the idea.

HiSlider - HTML5, Jquery slider and image gallery, an absolutely cost-free plugin for special editing on sites managed by popular systems - WordPress, Joomla, Drupal. With the help of this simple, yet functional tool, you can create amazing slide shows, effective presentations and announcements of new news on the pages of your sites without much effort. A number of ready-made templates and skins for the slider, attractive transition effects, display of various multimedia content: videos from YouTube and Vimeo, customization tools for the user, etc.

Nivo Slider is a good old one, well known to everyone who is in the know, one of the most beautiful and simplest image sliders in history. The JQuery Nivo Slider plugin is cost-free for use and further development, which is extended under the MIT license. It’s also a great plugin for WordPress, but unfortunately it’s also paid and costs $29 for one license. The best thing to do is just spend a little time with the WP files and attach the free jQuery version of the Nivo Slider plugin to your blog, so you can get enough information.
As far as functionality goes, everything is in order. For the work, we use the jQuery v1.7+ library, great transition effects, simple and easy adjustments, adaptive layout, automatic image cropping, and much more.

The idea of ​​the slider was inspired by retailers who are familiar with the familiar style of presenting Apple products, where a number of small objects change when you click on the selected category with a simple animation effect. Codrops presents you with a report on how to create a slider, a new layout of HTML markup, a set of CSS rules and a plugin that converts jQuery, as well as a wonderful live example of a custom slider.

The full-screen slider is displayed using JQuery and CSS3 + reporting tool with plugin integration on the site side. The idea is to cut the open flow slide with the previous content before moving to the next or previous place. With the help of JQuery and CSS animations, you can create unique transitions between slides. The adaptive slider layout ensures that it still looks good on the screens of different types of device devices.

There is a slider that automatically adjusts the width and height according to the dimensions of the container in which it is expanded. Add a simple and customized slider that runs on JQuery, with navigation in the lower part, when you change the screen size, the navigation is displayed in the form of icons. The documentation is very informative (lesson in creation) and live application of the vikoristan.

An experimental version of the slider demonstrates images with transitions from a 3D plane. The images are divided into two horizontal columns; using the navigation arrows, you can change and move the skin image from one view to another. There’s nothing special about it, but the very idea and technique of Vikonannya to get the juice.

Very simply, 100% responsive and full-screen jQuery image slider. The slider's work is based on CSS transitions (transition power) in connection with the magic of jQuery. The max-width value is set to 100%, so the size of the pictures changes according to changes in the screen size. There are no special animation effects in the design, everything is simple and designed for uninterrupted operation.

The name is self-explanatory, it’s probably one of the lightest and most minimalistic jQuery image sliders available (1kb plugin). ResponsiveSlides.js is a cool JQuery plugin that creates slideshows, pop-up elements in the middle of the container. Works with a wide range of browsers, including all versions of IE - the famous gala of progress in IE6 and beyond. The robot uses CSS3 transitions in conjunction with JavaScript, just to be sure. Easily sort through an unordered list, adjust transitions and time intervals, automatically and manually switch slides, and support multiple slide shows at once. The axle is a shvidky “malyuk” axle.

Camera is a no-cost JQuery plugin for organizing slideshows on website pages, a lightweight slider with zero transition effects, a 100% adaptive layout, and very simple setup. It will fit wonderfully on the screens of any computer devices (PC monitors, tablets, smartphones and mobile phones). Possibility of demonstrating the downloaded video. Automatic change of slides and manual operation of additional buttons and image thumbnail block. There is also a full gallery of pictures from the compact viconn.

Another simple adaptive slider on jQuery. Slides can contain any content, video, images, text and other elements. Expanded support for touch screens. Vikoristannaya CSS transition animations. There are a lot of different variations in the presentation of slide shows and compact image galleries. Automatic and manual control. Mixing slides using additional buttons and selecting thumbnails. Small size of the output file, even simpler for setup and implementation.

FlexSlider 2 — Updated version of the single-name slider, with increased speed of response, modification of the script and reduction of re-arranging/rewriting to a minimum. The plugin includes a basic slider, slide control control for additional thumbnails, left-right arrows and a bottom navigation bar in the appearance of buttons. Possibility of displaying video in slides (vimeo), flexible customization of parameters (transitions, design, hour interval), completely adaptive layout.

Welcome to the popular, adaptive jQuery plugin for creating high-quality galleries and image sliders. The slider interface, in its entirety, is visually reminiscent of the original video player, and the plugin includes a number of different design themes. Support for the downloaded video and images from popular services: Flickr, Vimeo, YouTube and others. Detailed documentation from adjustment and wiki.

A simple, no-frills, no-cost JQuery image slider, written specifically for responsive web design. Blueberry is an experimental JQuery plugin with closed source code. Minimalistic design, no effects, just smoothly merging pictures that can be changed one after another within a short period of time. Everything is very simple: install, connect and go.

A very compact jQuery slider displayed with Lightbox elements. Generals with their vile rosema, it’s just to be aged to the Be-Yaki container, alone, Vygimyi Miniatur, with a curser of Mishka, the Lightbox ZI Zy Zbilish, with elements of the Olye. It is easy to place such a slider on other panels for presenting products and announcing new products. A great solution for sites with a great deal of information.

Cost-free adaptive slider with advanced CSS3 transitions. Minimalist style, 3 design themes, The skin frame runs horizontally, appearing in the center, the picture goes to the left, the caption to the right, the miniatures are duplicated in the lower right corner. A display of products on the side for viewing in the skin. The controls also include back and forward buttons. Support for current browsers.

A very simple image slider with functionality and settings, adjusting the presence of changes in the speed of changing slides, connecting to manual mode (control buttons are activated), uninterrupted slide show. This slider may have the right to be and less of a benefit, having received nothing particularly useful in this study, maybe it’s a bad joke)))

Such a wonderful, adaptive image slider from Volodymyr Kudinov and his colleagues. A good, well-worked instrument, supplied with initial butts and detailed instructions for creation, installation and installation. Adaptive design, cute buttons and green arrows, everything works nicely and calmly, without pressure.

Free jQuery slider plugin with parallax effect for images and text slides. Animation of slides increases the value of the display with full control over the skin parameters of the hour and animation. Possibility of animation for multiple elements on a slide. You can install different animation methods, create slides, or switch directly from the song. Automatic display and manual navigation of additional navigation arrows that merge when hovering over the image. 10 types of animation effects, slides and much more.

A look around the world is very rich, but not very informative due to the large number of products that are looked at. All details and detailed descriptions of the functional capabilities of each plugin can be found directly on the retailer’s pages. I have no idea that anyone is looking for that much-needed tool to create colorful image sliders on the pages of their websites.

If we were thinking about this, would it be bad for us to work with Russified templates? Just think for a moment. I spent an hour working with English-language templates. We hasten to please you with what you can now find on the TemplateMonster marketplace. The text for each of them was written by hand. And, of course, all the ready-made solutions are incredibly simple for the vikoristan.

With respect Andriy

Author's note: despite being sensitive to the “death” of parts of web pages that are visible without scrolling, there is no need for a good slider. Let's be honest, if you want to, the slider is fun. In addition, there is nothing else to do with content that collapses without giving the user a “wow” effect. All sliders are a set of several slides, so it is important to change one at a time so that the slider code is as light as possible. In such situations, jQuery will help us.

Take a look at the 20 jQuery sliders on Envato Market and you'll see that there are sliders that are more than just a block of images that change smoothly.

A highly adaptive slider, also friendly to touch screens, means a lot more than before. RoyalSlider includes some exciting features: adaptability and operation with touch screens. Good choice, because the gallery is written in HTML5 and CSS3.

List of functions:

JavaScript. Quick start

SEO optimization

High level of adjustment

Over 10 cob templates

Є fallback for CSS3 transitions

In my opinion, the coolest feature is the “modular script architecture”, which allows you to include unnecessary speech from the main JS file, thereby changing the input. RoyalSlider, touchscreen image gallery on JQuery – a reliable JavaScript slider that can enhance the set of tools for any developer.

It’s not so easy to make a “revolutionary” job with a slider. If you want to talk about sliders, you can add many more functions. However, Slider Revolution is a really good test. Among the JQuery sliders, this instance provides all your possible benefits.

The list of possibilities for the desktop slider is long, so I’ll list just a few:

Parallax effect and koristuvach animation

The number of balls and slides with messages is not limited

ready to use, styles to fine-tune in depth

and a lot more

The ability to add an image, use a video player and send from social networks makes Slider Revolution one of the most flexible and customizable options available.

Beyond the name “LayerSlider adaptive jQuery slider plugin” it is not possible to properly evaluate this slider.
200+ 2D and 3D transitions between slides to turn anyone’s head.

A couple of amazing features:

13 skins and 3 types of menus

Ability to place a frozen image on top of the slider

І JQuery fallback

And a lot more

As with the previous slider, you can add any content, such as HTML5-resident multimedia content. LayerSlider loves sliders, and it’s even worse.

jQuery Banner Rotator / Slideshow - Add a simple slider without sacrificing the main functionality.

Possibility:

Tooltypes, text inserts, etc.

forward view and different options for review of components

Timer with shutter for one slider or for all

Multiple transitions for all slides or multiple transitions for skin transitions

jQuery Banner Rotator / Slideshow, in line with other jQuery sliders, has only basic capabilities, but it is not easy to forget about it.

Any slider that appears in the middle has its own unique tank and encounters any problems with its galusa. Never mind. All In One Slider can be called "all inclusive".

I think most web developers and designers may be overthinking the decision, or else they will be looking for something new. And this “what’s new” includes:

Banner rotator

Banner with preview

Banner with playlist

Content slider

Carousel

All types of sliders provide most of the functionality, but not all that is required by jQuery sliders. Is All In One Slider your all-inclusive?

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

This slider knows its place in the sun between simplicity and a rich set of functions. Functions:

Topic support

12 ready-made themes

40 transitions

IE6+ support

All functions are cleverly designed and styled, so you can use UnoSlider as an advanced content slider with the ability to add themes.

Are you saying “one jQuery slider to edit everything”? Try Master Slider – JQuery touchscreen slider for different screen sizes.

If the right design is lacking, this copy is one of the finest:

Over 25 templates

Go to hardware speed

Support by tapping and swiping

And a lot more

Interactive transitions, animated balls and hot spots will singly attract your attention. Master Slider is a masterpiece of mysticism.

TouchCarousel adds cost-free support and updates. However, not all the functions of this lightweight JQuery slider are of the carousel type.

Since the name contains the word “touch”, you can guess that the slider is fully adaptive and supports touch. Other functions:

SEO optimization

Smarter auto-creation

CSS3 go to hardware shortcut

Customized UI and 4 skins for Photoshop

TouchCarousel, through its unique physical slide scrolling, introduces a completely new range of experiences on mobile devices.

jQuery sliders can be used on various websites. They may also be of benefit to web add-ons. Advanced Slider allows you to create everything.

With HTML or XML layout, the inserted slider copes with the inevitable goal:

Animated balls and smart video

100+ transitions and 150+ authorities that are being tuned

15 skins for the slider, 7 skins for the scrollbar and lightbox support included

Keyboard navigation, dot support and customization

And a lot more

However, the greatest feature of Advanced Slider is the jQuery XML Slider API, which makes the slider an ideal option for your web program.

One of these JQuery sliders will encourage you to take a look at the demo before you start reading about its capabilities. You just want to understand what “zoom in/out effect” means.

The effect of the zoom is weak, but it adds to the control and correct image manipulation at a time when other sliders are static. Features of the slider:

CSS3 transition between balls

Animation end parameter for balls

Fixed width options, full screen and full width

Animated text in HTML and CSS formats

Most sliders try to incorporate more effects, and jQuery Slider Zoom In/Out Effect Fully Responsive has only the Ken Burns effect, but better implementations.

Like the well-known Advanced Slider - jQuery XML Slider, jQuery Carousel Evolution has its own API, which can be customized to enhance the functionality or integrate the slider into another project.

JavaScript. Quick start

Learn the basics of JavaScript in a practical application to create a web application

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

SEO optimization

9 carousel styles

Effects of shadow and image

The image size can be adjusted for both the front and rear

jQuery Carousel Evolution – a simple carousel with unlimited choice options.

Sexy Slider is no longer as sexy as it used to be. However, through its century, the slider has earned its trust.

At first glance, the slider is not particularly impressive, but if you tweak it well, it will fit perfectly into your design. Possibility:

Auto-programming of slides

Captions before image

Uninterrupted creation of slides

6 transition effects

Sexy Slider ensures that you unlock all your potential.

With all these designs for mobile devices and touch screens, you can use the JQuery slider, without forgetting about desktop computers.

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

Horizontal and vertical orientation

Text signatures in the middle or slider calls

Possibility to set the number of slides visible at one time

Embedded images, Flash, iframe, Ajax and online content

The slider also has a lightbox. For jQuery Image & Content Scroller w/ Lightbox, you can not launch the slider itself, but also launch the lightbox.

Most jQuery sliders have their own design. You can customize it for yourself, but sometimes you just want everything to be in the middle of the slider. Yours truly, I introduce myself to Translucent.

The slider has a lot of presets. Perhaps, you just need to set the songs to tune up and that’s it. Possibility:

6 different styles

4 transition effects

2 go by swipe

Configure buttons and captions

Like others, this slider supports torcanning, adaptive and hardware acceleration. Translucent is a slider with a minimal design that puts the content itself at the forefront.

Do you want to create a full-screen website that consists of slides? Then you need FSS.

In fact, with the help of this JQuery slider, it’s very easy to create a full-screen slider website. Possibility:

AJAX support

Scrollbar

Support for deep linking technology

2 different transition effects

Also, use the 11-sided guide to support the keyboard. Prote the right enemy website is the FSS vaga, less than 5Kb.

Another example of a JQuery slider that focuses on styles and how poorly it handles its work. Zozo Accordion is easy for those who are looking for a good accordion slider with the ability to change styles.

This beauty with CSS3 animation can also provide a wide range of functions:

Horizontal and vertical accordion

Semantic HTML5 and SEO optimization

Support for dots, keyboards and WAI-ARIA

More than 10 skins and 6 layouts

And a lot more

Zozo Accordion has cost-free support and constant updates, as well as all the functions you want in a JQuery accordion.

jQuery Responsive OneByOne Slider Plugin is more like a simple animation rather than a slider. Instead of displaying one slide at a time, this instance fills the screen with slides, one slide at a time, until the area runs out of space and then moves to the next slide.

CSS3 animation is powered by Animate.css, it is easy, can be made up of a few balls and is compatible with mobile devices. Functions:

There is also a navigation option using drag and drop. jQuery Responsive OneByOne Slider Plugin is based on the Twitter Bootstrap carousel.

No jQuery slider is any easier. To work, you need to use just a 3Kb slider, so you can upgrade Accordionza with the lightest accordion-type slider.

If you are not comfortable with three style options, you can submit HTML and CSS yourself. Possibility:

Navigation from the keyboard

Easy to customize effects and buttons

Progressive reduction technique - works without JavaScript

Remember that Accordionza can display any number of mixed content options, which will make it even more challenging.

MightySlider is a really tight slider. It can be used not only as a simple image slider, but also as a full-screen single-directional slider with navigation through menu items. With this help you can create a wonderful one-sided website.

Under the hood you will find a number of options:

Keyboard support, bears and torcan

CSS3 go to hardware shortcut

Purely valid layout and SEO optimization

The number of slides, balls for signatures and effects before them is not included

The API is even tighter and kinder to the robbers, which reveals the different ways of its growth. MightySlider is a wonderful, progressive JQuery slider with clean and well-commented code.

Parallax Slider works like the jQuery Responsive OneByOne Slider Plugin and allows you to animate a skin around the middle of one slide. You can animate all slides or just one, adding parallax animation.

The set includes 4 sliders of different types, all with the parallax effect. Like other jQuery sliders, here:

New mood

Support Torkan

Fully adaptive, unlimited number of balls

Auto-programming, looping, adjusting height and width, as well as a timer

Animated balloons - not only text but images. You can also add YouTube, Vimeo and HTML5 video. Parallax Slider is another good example of how Flash effects can be created better than Flash itself, which is also supported on all devices.

It’s important to note that jQuery sliders have grown from what it is, which simply replaces one image with another, to a great set of creative tools. Infection includes 3D, parallax sliders, full-page sliders, adaptive ones that can be viewed both on desktop computers and smartphones.

If you don't like the slider in this list, you can always take the jQuery Code Tutorial on Envato to create something completely new and unique.

Well, take a look at the other sliders on Envato Market - there’s a lot to choose from. What is your favorite JQuery slider and why?

Let me start by saying that this article was written to tell you how to create a scrolling image slider for web pages. This article, in any case, is not of an initial nature, but rather serves as an example of how our objective can be realized. The code in this article, you can use as a template for such investigations, I am confident that I will be able to clearly and easily convey to the reader the whole essence of what I have written.

And now, before you know, I recently needed to put a slider on one site, but having looked on the Internet for ready-made scripts, I didn’t know anything useful, because Some did not work as required, and others did not start without permissions from the console. Vikoristovat jQuery - plugins for the slider menu turned out to be completely useless, because... I want to know this, but if I don’t have enough understanding about the working mechanism, it’s not optimal to use a plugin for one slider. Understanding the crooked scripts was also not my favorite thing, so I decided to write my own script for the slider, which I myself would see as needed.

To begin with, we need to understand the logic of the slider itself, and then proceed to implementation, at which stage it is very important to understand the underlying workings of this mechanism, because without it we cannot write code that works exactly like we want.

Our main object will be the viewport, which will be the block in which we will display and rotate our pictures, which will be our slidewrapper, which will be our block that will house all the images arranged in one line, and which will be change your position in the middle of the viewport itself.


Further, on the sides in the middle of the viewport, vertically in the middle, the back and forward buttons will be located, and when you click on them, we will also change the position of our slidewrapper in the viewport, thereby causing the effect of images to go through. And, let’s decide, the remaining object will be our navigation buttons, which are located in the lower part of the viewport.


When clicking on them, we simply look at the serial number of that button and click on the slide we need, again using the same displacement path of the slidewrapper (the displacement will be carried out through changing the css-power transform, the value of which will be steadily calculated Xia).

I think that the logic of the whole process may have become clearer after what I have put in, but if the problem here is still unclear, then everything will be clarified in the code below, it only takes a little patience.

Now let's write! First of all, let’s open our index file and write the markings we need there:

As a matter of fact, there is nothing complicated, block-for-slider serves as a block itself, in which our slider will be located, in the middle of which is the viewport itself, in which our slidewrapper is located, and also a list of attachments, here there are slides, and img - pictures in the middle of them . Please be respectful of the fact that all the pictures must be the same size or in proportion, otherwise the slider will look crooked, because Its size should be based on the proportion of the image.

Now we need to stylize everything on the right, so don’t particularly comment on the styles, but I still want to pay attention to your respect, so that there is no confusion in the future.

Let’s start with block-for-slider , which, I repeat, is our block on the side, which we put under the slider, whose height is dependent on its width and the proportion of the image, because The viewport occupies the entire width of the block-for-slider, then the slide itself has the same width, and, obviously, the image in the middle changes its height according to the width (the proportions are preserved). I moved this element on its side horizontally in the middle, indenting it 100px, giving it a handy position for the butt.

The viewport element, as already mentioned, occupies the entire width of our block-for-slider, which has the power of overflow:hidden, which allows us to grab our image line so that it extends beyond the scope of the viewport.


Now comes the power of CSS - user-select:none allows you to make the surrounding slider elements appear blue when clicking on the buttons multiple times.

Let's move on to slidewrapper , why position:relative and not absolute? It's simple, because... If we choose another option, then with the power viewport overflow: hidden we will get absolutely nothing, because The viewport itself is not adjusted to the height of the slidewrapper, so we set it to height:0. Why is the width so important and why do we always set it? On the right, our slides will have a width equal to 100% of the viewport, and to space them out along the line, we need a place where they will stand, so the width of the slidewrapper should be equal to 100% of the viewport width, multiplied by the size there are slides (have my choice is 4). There is a difference between transition and transition-timing-function , then 1s means that changing the position of the slidewrapper will take 1 second and we will be careful, and ease-in-out is the type of animation in which you will immediately move but, speed up to middle, and then comes back to sleep, here you can now set the value to the authorities.

The offensive block of authorities sets the pins, and its daughter elements have zero inputs, here are the comments of the application.

Next, we will style our slides, their width must be equal to the width of the viewport, because Because the width of the slidewrapper is the same as the width of the viewport multiplied by the number of slides, then to get the viewport width again, we need 100% of the width of the slidewrapper divided by the number of slides (in my case, again still, on 4). After that, let's transform them into small elements using the additional display:inline and set the flow around the evil, adding the power of float:left . About list-style:none, I can say that the vikory yogo in order to get the default marker li, in most cases it is the standard.

With slide-img everything is simple, the image will take up the entire width of the slide, the slide will adjust to its height, the slidewrapper will adjust to the height of the slide, and the height of the viewport will take the same height as the slidewrapper, so the height of our slider will be in proportion y images and sizes, Next, under the slider, about which I already wrote more.

I think we have decided on these styles, we can do a simple slide show without buttons, and after that, when we switch over to what we can do, we can style them.

We open our js-file, in whichever slider code there will be, do not forget to include jQuery, because We will write for this additional framework. Before I speak, at the time of writing this article, I am using the vikory version of jQuery 3.1.0. The file itself with the script must be included in the body tag, because We will work with DOM elements that need to be initialized first.

For now, we need to announce a couple of changes, one will save the number of the slide that we currently need in the viewport, I’ll call it slideNow , and the other will save a number of these slides themselves, called slideCount .

It is necessary to set the slideNow value to 1, because If you are interested in the pages that come out of our layout, we will display the first slide in the viewport.

In slideCount we can accommodate a number of child elements of the slidewrapper, everything is logical here.
Next, you need to create a function that is responsible for switching slides from right to left, like this:

We can call it in the main block of our code, so let’s get to that point, but for now let’s tell our function what it needs to do:

First of all, let's check what's on the remaining slide of our page? For this purpose, we take the number of all our slides using $("#slidewrapper").children().length and match it with the number of our slide, since they appear equal, which means that we need to start showing the page again, from 1 slide , which means we change the CSS power of transform in slidewrapper translate(0, 0) , so that we change its position so that the first slide appears in our view, let’s not forget about -webkit and -ms for adequate cross-browser rendering (div. .vidnik with css-powers). After this, do not forget to update the value of the slideNow change, informing it that slide number 1 is in view: slideNow = 1;

We have to check for those slide number, which we most likely are, among the number of our slides, if that is not the case, then we will turn again to the first slide.

Since the first mind doesn’t come to a head, then we can’t talk about those that we are currently neither on the next slide nor on any other thing, which means we need to switch to the offensive one, which is done by shifting the slidewrapper to the left to the value, p outside the width viewport , the displacement will again be provided through the known power of translate , the value of which is similar to "translate(" + translateWidth + "px, 0)", where translateWidth is the value of how our slidewrapper is displaced. Before we speak, let’s voice this change to the beginning of our code:

After moving to the next slide, let’s say to our slideNow that there is another next slide: slideNow++;

At the moment, some readers may be confused: why didn’t we replace $("#viewport").width() with something like slideWidth, so that we always know the width of our slide? The answer is quite simple, since our site is adaptive, then, obviously, the block of views under the slider is also adaptive, so you can understand that when changing the size of the width of the window without re-engaging the page (for example, turning the phone to the back), the width of the view port will change, and obviously, change and the width of one slide. In this configuration, our slidewrapper will be displaced to the same width as the original, which means the images will be displayed in parts or not displayed at all in the viewport. By writing in our function $("#viewport").width() instead of slideWidth, we can calculate the width of the viewport when the slides are switched on the skin, thereby ensuring that when the screen width suddenly changes, we will scroll to the slide we need.

Having written the function, we now need to call it after the previous interval of an hour, we can also save the interval in a memory so that we can change it if necessary, remembering just one code value:

The js hour is indicated in milliseconds.

Now let’s write the following construction:

Everything could not be simpler here; through the construction $(document).ready(function()()) we are talking about those that need to be deleted after the document has been downloaded. Then we simply call the nextSlide function with an interval equal to slideInterval , with the added setInterval function.

After all the actions that we have played so far, our slider is supposed to spin miraculously, if something went wrong for you, then the problem could be either with the version of jQuery, or with the wrong connection of any files. There is also no need to turn it off, since you might have made a mistake in the code, so I can just check everything again.


Let's go ahead and add a function to our slider, such as a scroll bar when the cursor is hovered, for which we need to write the following in the main code block (in the middle of the $(document).ready(function() ()) structure:

To begin analyzing this code, we need to know what switchinterval is. First of all, it is important to save the periodic click of the nextSlide function, simply by appearance, we can use this series of code: setInterval(nextSlide, slideInterval); , changed to Qiu: switchInterval = setInterval(nextSlide, slideInterval); . After these manipulations, our main block of code looks like this:

Here I use the hover method, which means “on hover”, this function allows me to detect the moment when I hover the cursor over any object, in this section on the viewport.

After hovering, I clear the interval that I will enter in the arms (this is our switchInterval ), then, through whom, I write that I will work if I move the cursor back, in which block I again give our switchInterval a periodic click of the nextSlide function.

Now, as we can verify, it’s important how our slider reacts to the cursor hover, the awkward shuffling of slides.

The time has come to add buttons to our slider, including the back and forth buttons.

Let us note them first:

This marking may be stupid at first, I’ll say right away that by wrapping these two buttons in one div with the class prev-next-btns just for your own convenience, you don’t have to bother anyone, the result won’t change, we’ll add it now m styles and all styles It's clear:

First, we position our buttons using position:absolute , so we can freely control their positions in the middle of our viewport, then we can size these buttons and, using the border-radius, round them so that the buttons turn into circles. Their color will be white, so #fff , and their appearance at the top edge of the viewport will be equal to half the height of the viewport minus half the height of the button itself (my appearance is 25px), this way we can expand them vertically in the center. Next, we say that when we hover over them, our cursor will change to a pointer and, by telling our buttons, they must protrude from their edges by 20px, so that we can move them the way we want.

I repeat, you can style the elements of the page the way you want, I will also introduce the example of these styles, which I choose to use as a vikory.

After styling, our slider may look something like this:


Next, let's go back to our js file, where we will describe the robot of our buttons. Well, let’s add one more function, which is shown to us on the front slide:

It's called prevSlide, it will only appear when you click on prev-btn. First of all, let’s carefully check for those that are on the 1st slide, here we also check that our slideNow is not the highest among the real range of our slides and, as our minds ask, we’ll move to the remaining slide. having found a slidewrapper in need it matters to us. The values ​​can be calculated using the following formula: (width of one slide) * (for slides – 1), we take everything with a minus sign, because We move it to the left, exit, so that the viewport now shows us the remaining slide. Finally, we also need to tell this block to the change slideNow that our view now has the remaining slide.

If we are not on the first slide, then we need to move back 1, for which we again change the transform power of the slidewrapper. The formula is: (width of one slide) * (number of the flow slide - 2), all the same, we take the minus sign. Why -2, and not -1, do we need to move back 1 slide? On the right, as we know, say, on the 2nd slide, then the power of transform:translate(x,0) of our slidewrapper is already equal to the width of one slide, so we can say that you need to select the number of the flow slide 1 , then we again remove one, since the slidewrapper has already offset the slidewrapper, which will need to be offset by 0 even the viewport widths themselves, and on slideNow - 2.

Now we no longer need to add rows to the main block of code:

Here we can simply see that when we click on our buttons, we can click on the functions we need, everything is simple and logical.

Now we have added slide navigation buttons, we turn to the layout again:

As a matter of fact, in the middle of the viewport there is a list of attachments, I have the identifier nav-btns, in the middle of it there are our navigation buttons, they have the class slide-nav-btn, then with the marking you can finish the start Here's to styles:

The nav-btns block, where our buttons are located, is given the power position:absolute so that it does not stretch the viewport in height, because The slidewrapper has position:relative power, the width is 100% set by us, so that with the help of text-align:center we center the buttons horizontally in order to viewport , then with the help of the bottom power we let our block know that the ones at the bottom edge are responsible for being on the side 2 0px.

The buttons are the same as the slides, except now we set them to display: inline-block, because with display:inline they do not respond to width and height, because be in an absolutely positioned block. The color is very white and, in addition to the already familiar border-radius, gives it the shape of a stake. When hovered over them, the appearance of our cursor can be changed for visualization.

And now let’s get down to the jQuery part:
For the first time, change the navBtnId, which will save the index of the button we pressed:

Here, when we click on our slide-nav-btn, we click on a function that first assigns a variable navBtnId to the index of the clicked button, which is a serial number, since the number starts from zero, then we We press a button on another, then the Value is written to navBtnId 1. Next, we will carry out a re-verification, adding one to the serial number of the button, in order to subtract such a number, since the results are not from 0, but from 1, we equalize this number with the number of the flow slide, if they are avoided, then we will not work on them. processes , then the required slide is already in the viewport.

If the slide we need is not in the viewport, then we need to break the slidewrapper to the left, then change the value of the CSS transform power to translate (which itself is set to pixels, 0). We have already been embarrassed more than once, so it is not our fault. Finally, the values ​​of the flow slide are saved again in the slideNow variable, and the values ​​can be calculated by adding one to the index of the clicked button.

So, anyway, everything that is not understood yet, I will remove the post on the jsfiddle, where all the code written in the material will be given.

Thank you for your respect!

Tags:

• jquery slider
• css
• css3 animation
• html

This is an adaptive touch slider, written in jQuery. The engine of this plugin uses CSS3 animations, and at the same time transfers fallbacks for older versions of browsers. Glide.js is simple and easy to use.

The only content of the plugin is jQuery, which we must include first:

Basic styles are included.

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

We launch the slider from adjustments after adjustments.

$(".slider").glide();

...or we’ll fix it for ourselves

$(".slider").glide(( autoplay: 5000, arrows: "body", nav: "body" )));

List of available parameters:

For the vikoristan API, write glide to the change.

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

API methods are now available to you.

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

• .current() - Turn the current side number
• .play() - Start autoscrolling
• .pause() - Zupinity autoscroll
• .next(callback) - Move the slider forward
• .prev(callback) - Move the slider back
• .jump(distance, callback) - Jump to the previous slide
• .nav(target) - Attach navigation to the song element (for example: "body", ".class", "#id")
• .arrows(target) - Attach arrows to a single element (for example: "body", ".class", "#id")