Jquery vertical slider with arrows and navigation. A selection of adaptive sliders
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 markupFirst, 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:
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.
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 returns to its initial 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.
In this article, we will look at how very simply you can create an adaptive slider for a website using CSS Flexbox and CSS transformations.
Slider source codes and demoA slider project called chiefSlider is located on GitHub. You can go to it using this link.
Slider with one active slide (no looping):
Slider with three active slides (no looping):
An example that shows how you can use a slider to rotate articles:
Advantages of chiefSlider Let's list the main advantages of this slider:
- firstly, it does not create clones of elements to organize looping, as is implemented, for example, in the OwlCarousel and slick plugins;
- secondly, it does not depend on the jQuery library; this not only removes additional requirements, but also makes it easier;
- thirdly, it makes virtually no changes to the DOM of the document; the only thing it does is add or change CSS transformation values for slider elements;
- fourthly, it contains only a minimal set of functions; additional functionality can be added depending on the task;
- fifthly, it is adaptive, i.e. it can be used on any website; The slider's adaptability is configured using CSS;
- sixth, the number of active elements is adjusted using CSS; this means that it can be used to create a carousel with either one active slide or any number of them.
Installing the slider takes 3 steps:
- add the chiefSlider CSS to the page or to a CSS file connected to the page;
- place the HTML code of the slider in the required place on the page;
- insert JavaScript code into the page or into a js file connected to the page.
It is advisable to minimize the CSS and JavaScript code; this action will ensure faster page loading.
How to develop a simple slider for a website (without looping)Creating the chiefSlider will consist of creating HTML code, CSS and JavaScript (without jQuery).
HTML code for the chiefSlider slider:
As you can see, the slider has a very simple HTML architecture. It starts with the main block, which has a 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 remaining two elements (.slider__control) visually represent buttons. They will be used to navigate the slide, i.e. move to previous and next elements.
CSS code for the chiefSlider slider:
/* MAIN STYLES */ .slider ( position: relative; overflow: hidden; ) .slider__wrapper ( display: flex; transition: transform 0.6s ease; /* 0.6 slide change duration in seconds */ ) .slider__item ( flex: 0 0 50%; /* defines the number of active slides (in this case 2 */ max-width: 50%; /* defines the number of active slides (in this case 2 */ ) /* 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; /* transparency */ background: #000; /* background color */ ) .slider__control_show ( display: flex; ) .slider__control:hover, . slider__control:focus ( text-decoration: none; outline: 0; opacity: .9; /* transparency */ ) .slider__control_left ( left: 0; ) .slider__control_right ( right: 0; ) .slider__control::before ( content: " "; display: inline-block; width: 20px; /* width of the icon (arrow) */ height: 20px; /* height of the icon (arrow) */ 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 "); )
As you can see, the CSS code for the slider is also not very complicated. The main definitions with which you can customize the appearance of the slider are provided with comments.
CSS code that determines the number of active elements:
/* defines the number of active slides (in this case 2) */ flex: 0 0 50%; max-width: 50%;
This code sets the number of active elements for the slider to 2.
In order for a slider, for example, to have one active element, these definitions must be changed to the following:
/* defines the number of active slides (in this case 1) */ flex: 0 0 100%; max-width: 100%;
Creation of an adaptive slider is carried out using media queries.
For example, a slider, which on devices with a tiny screen should have one active slide, and on large ones - four:
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 block element _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elements (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // controls _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // button "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // button "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // wrapper width _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), // width of one element _positionLeftItem = 0, // position of the left active element _transform = 0, // transformation value.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // step size (for transformation) _items = ; // array of elements // filling the _items array _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) >= position .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (direction === "left") ( if (_positionLeftItem position.getMax() ) ( nextItem = position.getItemMin(); _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (direction === "left") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) { nextItem = position.getItemMax(); _items.position = position.getMin() - 1; _items.transform -= _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; }
In fact, everything is simple here.
For example, in order to move to the next slide, the items array is first searched for an element with a position greater than that of the current rightmost element.slider__item.
If there is such an element in the array, then the transformation of the element.slider__wrapper is performed (i.e., actions, as in the algorithm without looping).
But if there is no such element, then in addition to transformation.slider__wrapper, a number of other actions are performed. First, the items array is searched for the element with the minimum position. After receiving this element, its position is set, the value of which will be equal to the value of the current right element + 1. And of course, its transformation is carried out, by such a number of percent, that it ends up at the end, i.e. after the last element.
To move to the previous slide, similar actions are performed, but in reverse.
In addition, for a looping slider, you do not need to toggle the visibility of the Left and Right buttons. These buttons in this version of the slider will always be displayed.
To do this you need:
- remove the slider__control_show class from the "Right" control;
- in the CSS for selector.slider__control change the display property value to flex .
You can program automatic slide changes at certain intervals using the setInterval function.
Var _cycle = function (direction) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )
The setInterval function in this example will run the _transformItem function at specified intervals equal to the value of the _config.interval variable.
In addition, it is advisable to add a stop to the automatic change of slides when you move the cursor to the slider.
You can implement this functionality as follows:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.direction); )); )
How to stop automatic slide changing if the element is not visible to the user?It is advisable to disable automatic slide changing in two cases:
- when the page (on which this slider is located) is inactive;
- when the slider is outside the page's visibility area.
The first case can be handled using the visibilitychange event.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Function for the visibilitychange event handler:
// handling the "Document visibility changes" event var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Calculating the visibility of an element can be done using the _isElementVisible function:
Function _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) ( return document.elementFromPoint(x, y); ); if (rect.right< 0 || rect.bottom < 0 || rect.left >vWidth || rect.top > vHeight) ( return false; ) 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 call, for example, at the beginning of the _transformItem function. This action will cancel the automatic slide transition if the slider is currently outside the viewport.
Var _transformItem = function (direction) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Slider that responds to browser window resizingThis version of the adaptive slider differs from the previous ones in that it allows you to change the number of active elements (slides) when resizing the browser window. Users usually don't resize their browser, but it can still happen.
This is implemented using the resize event and the _states array. The array is used for calculations. Its use will allow you to avoid re-initializing the slider when it is not required.
One of effective ways Attracting the attention of users on a website page is the creation of moving animation. Animation elements help to more clearly tell and show users about your product. Lately Pop-up panels have become very popular, as well as a number of other effects that appear when scrolling or clicking on a picture. They are also known as sliders, carousels and pop-up panels. In this article we will talk about creating an adaptive carousel slider with a smooth auto-scrolling effect.
Today, there are hundreds of reviews on the Internet with links to ready-made solutions, but most of them contain many unused functions that significantly reduce the performance of the slider, as well as slow down the loading of the site as a whole. Professional web developers have always strived to create software products that are flexible in configuration, with a low barrier to entry for additional libraries and plugins. That is why our script uses the minimum requirements for organizing such a slider. The functionality allows you to set the switching interval, speed, as well as the choice of a specific slide. Below are a number of variables that regulate the operation of the slider itself.
timeList - slide switching speed
TimeView - display time
RadioBut - buttons under the slide for quick navigation. The default value is true, if you use false the buttons will disappear.
Now let's get started! Let's create and open the file index.htm
As we can see, there is nothing complicated in the presented code; slider-wrap defines general position and aligns the slider to the middle of the screen. The active-slide parameter sets the size and height of the image according to its length. And the slider shows only the active picture.
Now let’s create and open the style.css file and add the markup we need there:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- user-select: none; -o-user-select: none; user-select: none; ) #slider( position: relative; width: calc(100% * 4); top: 0; left: 0; margin: 0 ; padding: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in -out; transition-timing-function: ease-in-out; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide img ( width: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; overflow :hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat; ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( display :block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") left center no-repeat; opacity:0.5 ; z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, # nextbutton:hover ( opacity:1; )
In the slider-wrap style property, enter width – the maximum length of your images.
In the #slider ( width: calc(100% * 4); ) and .slide ( width: calc(100%/4); ) style properties, specify the number of images in your slider. In our example there are 4 of them.
If the forward/backward arrows interfere with the visibility of your slider, they can be made invisible and they will appear when you hover over them. To do this, in the prewBut and nextBut parameters, set the opacity property to 0.
Now let's create and open our slider.js file, which will contain the slider code. Don't forget to include the jQuery library.
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("") .prependTo ("#active-slide"); $("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click(function())( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += "" + index + ""; )); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = false; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), TimeView);) ) $("#slider-wrap").hover(function())( clearTimeout(slideTime); pause = true;), function()(pause = false; rotator(); )); var clicking = false; var prevX; $(".slide").mousedown(function(e)( clicking = true; prevX = e.clientX; )); $(".slide").mouseup(function() ( clicking = false; )); $(document).mouseup(function())( clicking = false; )); $(".slide").mousemove(function(e)( if(clicking == true) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) clicking = false; ) )); $(".slide").hover().css("cursor", "pointer"); rotator(); ));
The animSlide function accepts three types of values: next, prew, numeric value. The next parameter switches the next slide, prew returns the previous one, and the numeric value is the specific slide selected via the radio button below the slide.
The presented slider used images from the web resource https://pixabay.com/.
This is a responsive touch slider written in jQuery. The engine of this plugin uses CSS3 animations, but at the same time, it provides fallbacks for older versions of browsers. Glide.js is simple and lightweight.
Usage 1. Connect jQueryThe plugin's only dependency is jQuery, which we must include first:
2. Connect Glide.js
3. Add html
Let's connect the basic styles.
Let's create the html structure of the slider.
4. Initialization
Launch the slider with default settings...
$(".slider").glide();
...or customize it for yourself
$(".slider").glide(( autoplay: 5000, arrows: "body", nav: "body" ));
SettingsList of available parameters:
| Parameter | Default value | Type | Description |
| autoplay | 4000 | int/bool | Autoscroll (false to disable) |
| hoverpause | true | bool | Pause autoscrolling when hovering mouse 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 needs to 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 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 | Right arrow class |
| arrowLeftClass | slider-arrow--left | string | Left arrow class |
| arrowRightText | next | string | Right arrow text |
| arrowLeftText | prev | string | Left arrow text |
| nav | true | bool/string | Show/hide/pin slide navigation. True to display. False to hide |
| navCenter | true | bool | Navigation by center |
| navClass | slider-nav | string | Class for the 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 when you press the left/right buttons |
| touchDistance | 60 | int/bool | Touch support. False to disable this feature. |
| beforeInit | function()() | function | A callback that will run before the plugin is initialized |
| afterInit | function()() | function | Callback that will run after the plugin is initialized |
| beforeTransition | function()() | function | A callback that will run before scrolling the slider |
| afterTransition | function()() | function | Callback that will run after scrolling the slider |
To use the API, write glide to a variable.
Var glide = $(".slider").glide().data("api_glide");
API methods are now available to you.
Glide.jump(3, console.log("Wooo!"));
- .current() - Return current side number
- .play() - Start autoscrolling
- .pause() - Stop autoscrolling
- .next(callback) - Scroll the slider forward
- .prev(callback) - Scroll the slider back
- .jump(distance, callback) - Switch to a specific slide
- .nav(target) - Attach navigation to a specific element (for example: "body", ".class", "#id")
- .arrows(target) - Attach arrows to a specific element (for example: "body", ".class", "#id")
Responsive jquery gallery (resizes when screen resolution changes), displayed in a pop-up window with thumbnails and image captions. Jquery gallery “Fresco” works correctly in most browsers including: IE6+, Firefox 3+, Chrome 5+, Opera 9+. The free version of this plugin can only be used on non-commercial projects.
2. “Adaptor” slider
Slider with various transition effects (7 different effects, including 3D). Project on Github.
3. Slider plugin with various effects “jQ-Tiles”
Plugin with various transition effects, customizable slide speed, and autoscroll function.
4. jQuery plugin “Sly”
Plugin for implementing vertical and horizontal scroller. Project on Github.
5. Animated CSS3 “Makisu” menu
Content slider/slideshow (the slide can contain not only images, but also video clips and other HTML content). For navigation you can use: thumbnails, Left/Right buttons and using the keyboard. Project on Github.com.
8. Set of jQuery plugins “Vanity”
The set includes 7 plugins: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder and jCollapse. A set of these solutions will help you implement a slider, tooltips, tabs, pop-up image descriptions, etc.
9. Hover CSS3 effect
A slider designed to work on mobile devices.
12. CSS3 loading indicator
The plugin is an easy solution for viewing products in different color options (relevant, for example, for online clothing stores to allow visitors to choose color scheme product from several options). For the plugin to work, you only need two images for each product (all colors will be applied as a mask). The plugin works in all major browsers, including IE7+ (will also work in IE6 if you fix the PNG transparency display). Project on GitHub.
15. CSS3 animated charts
When you click on an image, it darkens, going into the background, and items with captions appear. In this way you can give short description elements located in the image.
17. Page navigation as a drop-down menu
A solution for implementing convenient document navigation in the form of a drop-down menu. The content is fixed at the top of the screen and always remains in the viewer's field of view. When you select a section in the menu, the page scrolls smoothly to the selected part of the document.
18. CSS3 gallery with hover effect
When you hover your cursor over an image, the photos change quickly. The gallery is implemented in two versions: with a description of the pictures that appears after the visitor moves the cursor away from the gallery and without a description.
19. jQuery slider with Parallax effect
Click on the arrow at the bottom of the screen on the demo page to see the pop-up icons.
22. Free HTML5 image gallery “Juicebox Lite”
A very functional new image gallery for the site. The gallery can be with or without thumbnails, with or without an image description, can be expanded to full screen or displayed on a page with fixed dimensions. On the demo page, you can choose the gallery view that you like. A free version of the gallery is available for download. You will have to pay for more advanced functionality and to remove the developer logo.
23. Plugin “JQVMap”
Responsive gallery, image and thumbnail sizes change with the size of the browser window.
26. jQuery content slider plugin “Horinaja”
The plugin is easy to install, customizable, and cross-browser compatible. Any HTML content, not just images, can serve as a slide. You can scroll slides using the mouse wheel while the cursor is on the slide area.
27. jQuery slider plugin “Pikachoose”
In three variations: implementation of a simple change of images without descriptions and thumbnails; slider with image captions and thumbnails; slider with thumbnails and added opening of a larger image in a pop-up window with the FancyBox effect. The latest version can always be found on Github.
28. Several custom CSS styling for dropdown lists
Five different dropdown list styles using different CSS techniques.
29. Restaurant menu with animated 3D effect
Interesting CSS jQuery presentation of information on the page. By clicking on the link, the menu booklet opens and the visitor can read more about the dishes provided in a pop-up window. Animation does not display correctly in IE.
30. “Elastislide” plugin
Sales of rubber adaptive carousel(vertical and horizontal image carousel) and image galleries. Shrinking the browser window reduces the number of images to a certain minimum value and then scales the size of the remaining images. Project on Github.
31. Fresh CSS3 jQuery slider “Slit Slider”
An adaptive slider plugin (the width can be set as a percentage and it will automatically scale) in two styles with an interesting animated effect when changing slides (the slide is cut in half and moves in different directions, and a new one takes its place). Navigation using the keyboard is possible. The latest version is always on Github.
32. A new version 3D image slider “Slicebox”
A new version with changes made and new features added: now the 3D slider has become scalable, you can see this when you reduce the browser window; added Firefox support; You can already use HTML content in the slide description (previously the description was pulled from the link attribute without the ability to use HTML tags in it). On the demo page you can see 4 options for using the plugin. Latest version lives on Github.com.
The effect is very similar to the Flash gallery 3D CU3ER (demo, download), only this 3D slider is made not using flash technologies, but using javascript.
33. jQuery plugin “PFold”
Experimental solution. The plugin implements a 3D effect simulating the unfolding of a note. Various options executions: with three spreads, with two spreads and a spread with subsequent centering of the unfolded note.
34. jQuery plugin “Windy”
Plugin for navigating through content, such as images. When you scroll through photos, they scatter in different directions (the effect is somewhat reminiscent of dealing cards in card game poker). To navigate, you can use the left/right buttons or the slider (see different options on the demo page). Project on