Slider to the main page in jquery. A selection of adaptive sliders
Image galleries and sliders are some of the most popular jQuery formats. Thanks to them, you can add the necessary amount of visual content to your site, while saving valuable space.
Galleries and sliders make the page less busy, but still allow you to add all the images you need to convey your message. They will be especially useful for online stores.
In today's article, we have collected the best jQuery image galleries and sliders for you.
To install them, just add the selected plugins to the head section of the HTML page along with the jQuery library and configure them according to the documentation (just a couple of lines of code).
Choose which of these elements fits perfectly into your project.
1. Bootstrap Slider
Bootstrap Slider is a free, mobile-optimized image slider with touch and swipe scrolling. It will look amazing on any screen and in any browser. You can load images, videos, text, thumbnails, and buttons into sliders.
2. Product Preview Slider
Product Preview Slider embodies the full potential of jQuery and fits perfectly into any interface. You will also be pleased with the quality and cleanliness of the code of this plugin.
3. Expandable Image Gallery
Expandable Image Gallery is an amazing plugin that turns into a full-screen gallery with one click. It can be used for the “About Us” section or to view product information.
4. Fotorama
Fotorama is a responsive jQuery gallery plugin that works for both desktop and mobile browsers. It offers a variety of navigation options: thumbnails, scrolling, forward and back buttons, automatic slideshows, and bullets.
5. Immersive Slider
Immersive Slider allows you to create a unique slide viewing experience similar to the Google TV slider. You can change the background image to be blurred to keep the main photo in focus.
6. Leastjs
Leastjs is a responsive jQuery plugin that will help you create an amazing gallery. When you hover the cursor over the image, text appears; when you click, the window expands to full screen.
7. Sliding Panels Template
This plugin is ideal for a portfolio. It will create blocks of images arranged horizontally (vertically on small screens) to which the selected content will be linked.
8. Squeezebox Portfolio Template
Squeezebox Portfolio Template offers motion effects for your portfolio. When you hover over the main image (or block), anchored elements appear.
9. Shuffle Images
Shuffle Images is an amazing responsive plugin that allows you to create a gallery with images that change on hover.
10. Free jQuery Lightbox Plugin
Free jQuery Lightbox Plugin will help you show one or more images on one page. They can also be enlarged and returned to their original size.
11. PgwSlider – Responsive slider for jQuery
PgwSlider is a minimalistic image slider. jQuery code is light, so the loading speed of this plugin will pleasantly surprise you.
12. Scattered Polaroids Gallery
Scattered Polaroids Gallery is a stunning slider with a flat design. Its elements move chaotically when switching images, which looks amazing.
13. Bouncy Content Filter
Bouncy Content Filter is an ideal solution for portfolios. This plugin allows users to quickly move from one category to another.
14. Simple jQuery Slider
Simple jQuery Slider lives up to its name. This plugin combines elements of JavaScript, HTML5 and CSS3. The default demo only allows text to be loaded, but if you make a few changes you can add visual content as well.
15. Glide JS
Glide JS is a simple, fast and responsive jQuery slider. It is easy to configure, and the plugin does not take up much space.
16. Fullscreen drag-slider with parallax
This amazing jQuery slider with the ability to load images and text is suitable for any website. It will delight users with a slight parallax effect and slow text appearance.
From the author: Despite rumors about the supposed “death” of the part of web pages visible without scrolling, the need for a good slider has not disappeared. Let's be honest for a second - sliders are fun. In addition, nothing else, unlike moving content, causes a “wow” effect in the user. All sliders are a set of several slides that replace each other, and it is extremely important that the slider code is as light as possible. It is in such cases that jQuery will help us.
Take a look at the 20 jQuery sliders from Envato Market and you'll realize that there are sliders that are more than just a block of images that flow smoothly through them.
1. RoyalSlider – Touchscreen image gallery using jQuery
Nowadays, a responsive slider that is also touchscreen-friendly means a lot more than before. RoyalSlider combines both features: responsiveness and touch screen functionality. A good choice since the gallery is written in HTML5 and CSS3.
Several interesting features:
How to create a website yourself?
SEO optimization
Highly customizable
More than 10 starter templates
There is a fallback for CSS3 transitions
In my opinion, the coolest feature is the “modular script architecture”, which allows you to exclude unnecessary things from the main JS file, thereby reducing weight. RoyalSlider, a touchscreen image gallery in JQuery, is a robust JavaScript slider that should add to any developer's toolkit.
2. Slider Revolution responsive jQuery plugin
It's not that easy to do something "revolutionary" with a slider. When it comes to sliders, there are so many features you can add to them. However, Slider Revolution is a really good try. Among jQuery sliders, this instance meets all your possible requirements.
The list of slider features is so large, so I will list only the very best:
Parallax effect and custom animation
Unlimited number of layers and slides with links
ready to use, deeply customizable styles
and much more
The ability to add an image, embedded video player, and social media links makes Slider Revolution one of the most flexible and customizable options on the web.
3. LayerSlider adaptive jQuery slider plugin
The name “LayerSlider adaptive jQuery slider plugin” cannot truly evaluate this slider.
200+ 2D and 3D transitions between slides will turn anyone's head.
A couple of notable features:
13 skins and 3 menu types
Ability to place a fixed image on top of the slider
And jQuery fallback
And much more
As with the previous slider, you can add almost any content, even HTML5 resident multimedia content. LayerSlider brings sliders to life and is very pretty.
4. jQuery Banner Rotator / Slideshow
jQuery Banner Rotator / Slideshow is a fairly simple slider that does not sacrifice the main functionality.
Possibilities:
Tooltips, text inserts, etc.
Previews and various options for viewing components
Timer with delay for one slider or all
Multiple transitions for all slides or different transitions for each individually
jQuery Banner Rotator / Slideshow, compared to other JQuery sliders, has only basic capabilities, but you should not forget about it.
5. All In One Slider – Responsive jQuery slider plugin
Any slider that appears on the web has its own unique vision and solves some problems in its field. But not this one. All In One Slider can be called “all inclusive”.
I think most web developers and designers have a proven solution, but they are always looking for something new. And this “something new” includes:
Banner rotator
Banner with preview
Banner with playlist
Content Slider
Carousel
All slider types support most, if not all, of the functionality that jQuery sliders need. Will All In One Slider be your all-inclusive?
6. UnoSlider – Adaptive touchscreen slider
If your slider is not responsive and doesn't support touch screens, then you have the wrong slider. UnoSlider is correct.
This slider has found its place in the sun between simplicity and a rich set of functions. Functions:
Theme support
12 ready-made themes
40 transitions
IE6+ support
All features with an emphasis on design and style, making UnoSlider an excellent content slider with the ability to add themes.
7. Master Slider - jQuery touchscreen slider
Looking for “one jQuery slider to rule them all”? Try Master Slider – JQuery touchscreen slider for different screen sizes...
When it comes to good design, this example is one of the best:
More than 25 templates
Hardware accelerated transitions
Touch and swipe support
And much more
Interactive transitions, animated layers and hotspots will definitely grab your attention. Master Slider is a work of art.
8. TouchCarousel - jQuery content scroller and slider
TouchCarousel offers free support and updates. However, that's not all the features of this lightweight jQuery carousel slider.
If the word “touch” is in the name, you can guess that the slider is fully adaptive and supports touches. Other features:
SEO optimization
Smart autoplay
CSS3 transitions with hardware acceleration
Customizable UI and 4 skins for Photoshop
TouchCarousel, due to its unique physical slide scrolling, takes mobile experiences to a whole new level.
9. Advanced Slider - jQuery XML slider
jQuery sliders can be used not only on websites. They can also be useful in web applications. Advanced Slider allows you to do this.
With HTML or XML markup, this advanced slider makes a lasting impression:
Animated layers and smart video
100+ transitions and 150+ custom properties
15 slider skins, 7 scrollbar skins and built-in lightbox support
Keyboard navigation, touch support and full customization
And much more
However, the best feature is Advanced Slider - jQuery XML Slider API, making it an ideal slider option for your web application.
10. jQuery Slider Zoom In/Out Effect Fully Responsive
One of those jQuery sliders that will make you watch a demo before you start reading about its features. You just want to understand what this “zoom in/out effect” means.
The zoom effect is quite weak, but it adds a sense of control and real touch to the image while the rest of the slider is static. Special features of the slider:
CSS3 layer transitions
Animation end option for layers
Fixed width, full screen and full width options
Animated text with HTML and CSS formatting
Most sliders try to incorporate as many effects as possible, but jQuery Slider Zoom In/Out Effect Fully Responsive only has the Ken Burns effect, but it is well implemented.
11. jQuery Carousel Evolution
Like the aforementioned Advanced Slider - jQuery XML Slider, jQuery Carousel Evolution has its own API that can be used to enhance the functionality or integrate the slider into another project.
How to create a website yourself?
What technologies and knowledge are needed today to create websites on your own? Find out at the intensive!
With images, HTML markup, YouTube and Vimeo videos you will also receive:
SEO optimization
9 carousel styles
Shadow and reflection effects
Image size can be adjusted, both front and back
jQuery Carousel Evolution is a simple carousel with many use cases.
12. Sexy Slider
Sexy Slider is no longer as sexy as before. However, due to its age, this slider is trustworthy.
The slider doesn't look very impressive at first glance, but if you customize it well, it will fit perfectly into your design. Possibilities:
Autoplay slides
Image Captions
Continuous slide playback
6 transition effects
Sexy Slider is waiting for you to unlock its full power and potential.
13. jQuery Image & Content Scroller w/ Lightbox
With all these mobile-friendly designs and touchscreen support, it's nice to see a jQuery slider that hasn't forgotten about desktop computers.
jQuery Image & Content Scroller w/ Lightbox supports keyboard input and mouse wheel, as well as other features:
Horizontal and vertical orientation
Text captions inside or outside the slider
Ability to set a certain number of slides visible at one time
Inline images, Flash, iframe, Ajax and inline content
The slider also has a built-in lightbox. If you wish, in jQuery Image & Content Scroller w/ Lightbox you can not launch the slider itself, but launch the lightbox separately.
14. Translucent – Adaptive banner rotator/slider
Most jQuery sliders have their own design. You can customize it for yourself, but sometimes you just want everything to be inside the slider. We present to you Translucent.
The slider has a lot of presets. You may just need to set certain settings and that's it. Possibilities:
6 different styles
4 transition effects
2 swipe transitions
Customizable buttons and captions
Like the others, this slider is touch-sensitive, responsive, and hardware accelerated. Translucent is a slider with a minimal design that puts the content itself at the forefront.
15. FSS – Full Screen Sliding Website Plugin
Do you want to make a full-screen website consisting of slides? Then you need FSS.
In fact, using this JQuery slider it is extremely easy to create a full-screen slider website. Possibilities:
AJAX support
Scrollbar
Deep linking technology support
2 different transition effects
It is also worth paying attention to the keyboard support and the 11-page guide. However, the real impression is the weight of the FSS, only 5Kb.
16. Zozo Accordion – Adaptive touchscreen slider
Another example of a jQuery slider that focuses on styling and does a good job. Zozo Accordion is a must-have for those looking for a good accordion slider with the ability to change styles.
This CSS3 animation beauty also has quite a wide range of features:
Horizontal and vertical accordion
Semantic HTML5 and SEO optimization
Touch, keyboard and WAI-ARIA support
More than 10 skins and 6 layouts
And much more
Zozo Accordion has free support and constant updates, as well as all the features you want in a jQuery accordion.
17. jQuery Responsive OneByOne Slider Plugin
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 step at a time until there is no more space left in the area before moving on to the next slide.
CSS3 animation runs under Animate.css, it is lightweight, consists of several layers and is mobile friendly. Multiple features:
There is also a drag and drop navigation option. jQuery Responsive OneByOne Slider Plugin is powered by Twitter Bootstrap Carousel.
18. Accordionza - jQuery plugin
There is no jQuery slider easier than this. To operate, you need to download only 3Kb of the slider, which makes Accordionza the most lightweight accordion slider.
If you don't like the three styling options, you can tweak the HTML and CSS yourself. Possibilities:
Keyboard navigation
Easy to customize effects and buttons
Progressive enhancement technique - works without JavaScript
Remember that Accordionza can display many variations of mixed content, making it extremely flexible.
19. mightySlider – Responsive multi-purpose slider
MightySlider is a truly powerful slider. It can be used not only as a simple image slider, but also as a full-screen unidirectional slider with menu item navigation. With its help you can make a wonderful one-page website.
Under the hood you will find many options:
Keyboard, mouse and touch support
CSS3 transitions with hardware acceleration
Clean valid markup and SEO optimization
Unlimited number of slides, layers for captions and effects for them
The API is very powerful and developer friendly, which opens up a variety of ways to use it. MightySlider is an excellent, progressive jQuery slider with clean and well-commented code.
20. Parallax Slider - Responsive jQuery plugin
Parallax Slider works like the jQuery Responsive OneByOne Slider Plugin and allows you to animate each layer separately within a single slide. You can animate all slides or even just one by adding parallax animation.
The set includes 4 sliders of different types, all with parallax effect. Like other jQuery sliders, it has:
Fully customizable
Touch support
Fully responsive, unlimited layers
Autoplay, looping, height and width adjustment, and timer
Animated layers aren't just about text or images. You can also add YouTube, Vimeo and HTML5 videos. Parallax Slider is another good example of how you can simulate Flash effects even better than Flash itself, which are also supported on all devices.
Conclusion
It's interesting to see how jQuery sliders have grown from something that simply replaced one image with another into a huge set of creative tools. Now there are 3D, parallax sliders, full-page sliders, adaptive sliders and those that can be viewed on both desktop computers and smartphones.
If you don't like any of the sliders in this list, you can always take the jQuery Code Tutorial on Envato and design something completely new and unique.
Or check out other sliders on Envato Market - there are plenty to choose from. What is your favorite jQuery slider and why?
On this day I present to you a selection creative and high quality sliders in web design.
Nowadays it has become very popular to use sliders for your projects, because if you need to draw attention to any information, article on the website slider is a great solution, and if it is also modern and beautiful, then the user will definitely not pass by.
As a rule, a slider is usually placed on the top of the main page so that the user entering the site immediately sees it and has access to the most interesting information on the site.
In general, let's look at a selection of modern sliders that are simply impossible to pass by. Enjoy :)
Are you hungry? Take a look at this site and choose any burger to snack on.
Converse
A very attractive site with tons of creatively designed sliders.
Hm Andrei
Four beautiful and attractive sites that change automatically.
Marcs Design
Looking at this slider you seem to be in front of a laptop
Boerdam
Cool site with minimal design and a very cool slider.
Tea Round App
Creative resource with an interesting slider in your phone
These Are Things
Cool site, with a huge and creative slider.
Studio XL
Vertically moving slide shows with a very catchy and attractive effect. You can click the numbers or arrows to scroll through the slide.
Themefuse
A wonderful site with a large slider with an interesting scrolling effect.
Josh Smith Design
This is a website, or rather a slider. In general, the entire site is a slider :)
Utah travel
A cool slider that looks like a stack of photos.
Visitphilly
Cool, large image slider that is very eye-catching.
TravelBuzz
Five different classic and slides of the most beautiful places in the world. Click on a thumbnail to view a larger image.
Wearesignals
Dark site with a simple but very creative slider
Currently, a slider - carousel - is a functionality that is simply necessary to have on a business website, portfolio website or any other resource. Along with full-screen image sliders, horizontal carousel sliders fit well into any web design.
Sometimes the slider should occupy one third of the site page. Here the carousel slider is used with transition effects and responsive layouts. E-commerce sites use a carousel slider to display multiple photos in individual posts or pages. The slider code can be freely used and modified according to your needs.
Using JQuery in conjunction with HTML5 and CSS3, you can make your pages more interesting, provide them with unique effects, and draw the attention of visitors to a specific area of the site.
Slick – modern carousel slider plugin
Slick is a freely available jquery plugin whose developers claim that their solution will satisfy all your slider requirements. Adaptive slider - carousel can work in “tile” mode for mobile devices, and in “drag and drop” mode for the desktop version.
Contains a “fade” transition effect, an interesting “center mode” feature, lazy loading of images with auto-scrolling. Updated functionality includes adding slides and a slide filter. All to ensure that you configure the plugin according to your requirements.
Demo mode | Download
Owl Carousel 2.0 – jQuery – plugin for use on touch devices
This plugin has a large set of functions, suitable for both beginners and experienced developers. This is an updated version of the carousel slider. His predecessor had the same name.
The slider includes some built-in plugins to improve the overall functionality. Animation, video playback, slider autoplay, lazy loading, automatic height adjustment – these are the main features of Owl Carousel 2.0.
Drag and drop support is included for more convenient use of the plugin on mobile devices.
The plugin is perfect for displaying large images even on small screens of mobile devices.
Examples | Download
jQuery plugin Silver Track
A fairly small, but functionally rich jquery plugin that allows you to place a slider on a page - a carousel, which has a small core and does not consume a lot of site resources. The plugin can be used to display vertical and horizontal sliders, with animation and create sets of images from the gallery.
Examples | Download
AnoSlide – Ultra compact responsive jQuery slider
Ultra compact jQuery slider - carousel, the functionality of which is much greater than that of a regular slider. These include single image preview, multiple image carousel display, and title-based slider display.
Examples | Download
Owl Carousel – Jquery slider – carousel
Owl carousel is a slider that supports touch screens and drag and drop technology, easily integrated into HTML code. The plugin is one of the best sliders that allow you to create beautiful carousels without any specially prepared markup.
Examples | Download
3D gallery - carousel
Uses 3D transitions based on CSS styles and a little Javascript code.
Examples | Download
3D carousel using TweenMax.js and jQuery
Magnificent 3D carousel. It looks like this is still a beta version, because I discovered a couple of problems with it just now. If you are interested in testing and creating your own sliders, this carousel will be a great help.
Examples | Download
Carousel using bootstrap
Responsive slider - carousel using bootstrap technology just for your new website.
Examples | Download
Moving Box carousel slider based on Bootstrap framework
Most popular on portfolio and business websites. This type of slider - carousel - is often found on sites of any type.
Examples | Download
Tiny Circleslider
This tiny sized slider is ready to work on devices with any screen resolution. The slider can work in both circular and carousel modes. Tiny circle is presented as an alternative to other sliders of this type. There is built-in support for IOS and Android operating systems.
In circular mode, the slider looks quite interesting. Excellent support for the drag and drop method and an automatic slide scrolling system.
Examples | Download
Thumbelina Content Slider
A powerful, adaptive, carousel slider is perfect for a modern website. Works correctly on any device. Has horizontal and vertical modes. Its size is minimized to just 1 KB. The ultra compact plugin also has excellent smooth transitions.
Examples | Download
Wow – slider – carousel
Contains more than 50 effects, which can help you create an original slider for your website.
Examples | Download
Responsive jQuery content slider bxSlider
Resize your browser window to see how the slider adapts. Bxslider comes with more than 50 customization options and showcases its features with various transition effects.
Examples | Download
jCarousel
jCarousel is a jQuery plugin that will help organize the viewing of your images. You can easily create custom image carousels from the base shown in the example. The slider is adaptive and optimized for working on mobile platforms.
Examples | Download
Scrollbox - jQuery plugin
Scrollbox is a compact plugin for creating a slider - a carousel or a text crawl. Key features include vertical and horizontal scrolling effects with pause on mouse over.
Examples | Download
dbpasCarousel
A simple carousel slider. If you need a fast plugin, this one is 100% suitable. Comes with only the basic features required for the slider to work.
Examples | Download
Flexisel: Responsive JQuery Slider Plugin - Carousel
The creators of Flexisel were inspired by the old school plugin jCarousel, making a copy of it aimed at correct operation of the slider on mobile and tablet devices.
Flexisel's responsive layout, when running on mobile devices, is different from a browser-window-sized layout. Flexisel is perfectly adapted to work on screens, both low and high resolution.
Examples | Download
Elastislide – adaptive slider – carousel
Elastislide adapts perfectly to the size of your device's screen. You can set the minimum number of images to be displayed at a specific resolution. Works well as a carousel slider with image galleries, using a fixed wrapper along with a vertical scrolling effect.
Example | Download
FlexSlider 2
Freeware slider from Woothemes. It is rightfully considered one of the best adaptive sliders. The plugin contains several templates and will be useful for both novice users and experts.
Example | Download
Amazing Carousel
Amazing Carousel – responsive image slider using jQuery. Supports many content management systems such as WordPress, Drupal and Joomla. Also supports Android and IOS and desktop operating systems without any compatibility issues. Built-in amazing carousel templates allow you to use the slider in vertical, horizontal and circular modes.
Examples | Download
This article describes a method for implementing and creating an image or text slider with automatic flipping. The slider functionality allows you to set the switching interval between slides, speed, change effect, and also select a specific slide from the list. In this example, the classic method of changing images was used - the appearance and disappearance of slides.
timeList- slide switching speed
TimeView- show time
RadioBut- buttons under the slide for quick navigation (radio buttons). Default true can take on the meaning false.
Now let's get started! Let's create and open a file index.htm
Attention! In this example, text is used to make the slide work; if you want to use an image, then place each of your pictures in a tag
As we can see, there is nothing complicated in the presented code, slider-wrap determines the overall position of the slider and aligns it to the middle of the screen. Parameter slider positions and sets the height of our slide with the property height. If you use an image slider, then specify the height of the pictures in this property; if the heights of the pictures are different, then specify the maximum.
For best slider visualization and attractiveness, use the same image resolution.
Now we need to style our slider. Forward/backward arrows for switching slides, as well as radio buttons under the slider, are used in the form of pictures and are included with the file. Let's create and open a file style.css and write the markup we need there:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( height: 100%; ) body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap ( max -width:650px; margin: 100px auto; ) #slider ( position:relative; height: 200px; overflow: hidden; border:#fafafa solid 10px; ) .slide ( width:100%; height: 100%; position: absolute ; top: 0; left: 0; text-align: center; padding-top: 40px; : inline-block; width: 16px; background: url("radioBg.png") center bottom margin: 2px; text-indent: -99999px; ctrl-select:hover ( cursor: pointer; background-position: center center; ) .Radio-But .ctrl-select.active( background-position: center top; ) #prewBut, #nextBut( display: block; width: 40px ; height: 100%; position: absolute; overflow: hidden; background: url("arrowBg.png") left center no-repeat; opacity: 0.5; z-index: 3; outline: none !important; ) #prewBut ( left: 10px; ) #nextBut ( right: 10px; background: url("arrowBg.png") right center no-repeat; ) #prewBut:hover, #nextBut:hover ( opacity: 1; )
If the forward/backward arrows interfere with the visibility of your slider, they can be made invisible, and they will appear only when you hover over them. In parameters prepareBut And nextBut, set the property opacity value 0.
Let's create and open our js file, which will contain the slider code. Don't forget to include the jQuery framework, as well as the jquery.ui library - we need this library in order to set the disappearing element and the appearance of the slide. You can replace the specified effect with the property fadeIn And fadeOut.
$(document).ready(function () ( var timeList = 300; var TimeView = 5000; var RadioBut = true; $(".slide").hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); function slideDirectionHide(slideFloatNum, directTo)( $(".slide").eq( slideFloatNum).fadeOut(timeList); ) function slideDirectionShow(slideFloatNum, directTo, pause)( $(".slide").eq(slideFloatNum).fadeIn(timeList, function() ( if(pause == true) ( rotator( ) )); ) var old_slideNum = slideNum; if(arrow == "next")( slideDirectionHide(slideNum, "left"); if(slideNum == (slideCount-1))(slideNum=0;) else( slideNum++) slideDirectionShow(slideNum, "right", true ) else if(arrow == "prew") ( slideDirectionHide(slideNum, "right"); if(slideNum == 0)(slideNum=slideCount-1;) else (slideNum-=1) slideDirectionShow(slideNum, "left", true )else( if(arrow !== old_slideNum) ( if(arrow > old_slideNum) ( slideDirectionHide(slideNum, "left"); slideNum = arrow; slideDirectionShow(slideNum, "right", true); )else if(arrow< old_slideNum) { slideDirectionHide(slideNum, "right"); slideNum = arrow; slideDirectionShow(slideNum, "left", true); } } } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum).addClass("active"); } if(RadioBut){ var linkArrow = $("<>").prependTo("#slider"); $("#nextBut").click(function())( animSlide("next"); return false; )) $("#prewBut").click(function() ( animSlide("prew"); return false; )) ) var addSpan =""; $(".slide").each(function(index) ( addSpan += " " + index + ""; }); $("
Function animSlide accepts three types of values: next, prew, and a numeric value. Parameter next switches to next slide, prew previous, and the numerical value is the specifically selected slide through the radio buttons under the slide. Functions slideDirectionHide And slideDirectionShow almost similar and identical, the first is responsible for the disappearance of the slide and the direction of movement of the outgoing slide, the second for the appearance of the slide, its direction of movement when it appears, as well as for the specified display time interval.
When you hover your mouse over the slider, the display pauses.
That's all, if anything is not clear or you have any questions, write and ask.