How to do carousel with jquery

With the popularity of mobile devices, carousels have become one of the common features in many websites and applications. jQuery is a widely used JavaScript library that provides many convenient and practical methods, making it very simple and easy to develop carousels.

The following steps will show how to use jQuery to create a simple carousel chart. First, we need to prepare some basic HTML and CSS code.

HTML code

 
 
 
 
 
 
 Previous Next 
 

CSS code

.slider { position: relative; height: 300px; width: 600px; overflow: hidden; } .slides { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; flex-wrap: nowrap; transition: transform 0.6s ease; } .slide { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; } .slide img { max-height: 100%; max-width: 100%; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; } .controls span { margin: 0 10px; cursor: pointer; }

In the above HTML code, we have a carousel containing three images. Images are stored inimgtags, and each image is wrapped in adivelement with aslideclass name. The control buttons of the carousel are at the bottom of thedivelement and are represented byspanelements withprevandnextclass names.

In the CSS code, we set the height and width of the carousel container to300pxand600px, and setoverflow: hiddento ensure that only onedivelement is displayed. Allslideelements have the same height and are laid out horizontally within the parent element using Flex layout. The control buttons are centered and aligned horizontally using Flex layout.

Now we can create the carousel code step by step.

In the first step, we need to use jQuery to select relevant elements in the carousel and store their references for use in subsequent code. As shown below:

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next');

In the second step, we need to calculate the width of eachslideelement and arrange them in a row. As shown below:

var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px');

In the third step, we need to write thenextandprevfunctions so that the carousel image can move when the control button is clicked. The specific implementation here involves complex mathematical operations to calculate the offset, but it can be achieved using theanimate()function. As shown below:

$next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); });

In the fourth step, we need to set up a loop timer to automatically run thenextfunction every once in a while. As shown below:

var interval = setInterval(function() { $next.click(); }, 3000);

The last step is to prohibit the user from clicking the control button when the carousel image is moving to prevent animation overlap and carousel errors. As shown below:

$slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

Now, we have completed a simple carousel chart. The entire code snippet is as follows:

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next'); var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px'); $next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); }); var interval = setInterval(function() { $next.click(); }, 3000); $slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

After completing the above steps, you can use your own CSS styles and HTML code to customize the appearance and functionality of the carousel, and seamlessly integrate it into your in the website.

The above is the detailed content of How to do carousel with jquery. For more information, please follow other related articles on the PHP Chinese website!