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

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
  </div>
  <div class="controls">
    <span class="prev">Previous</span>
    <span class="next">Next</span>
  </div>
</div>

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 in img tags, and each image is wrapped in a div element with a slide class name. The control buttons of the carousel are at the bottom of the div element and are represented by span elements with prev and next class names.

In the CSS code, we set the height and width of the carousel container to 300px and 600px, and set overflow: hidden to ensure that only one div element is displayed. All slide elements 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 each slide element 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 the next and prev functions 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 the animate() 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 the next function 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!