Home > Backend Development > Golang > Implementation of html carousel

Implementation of html carousel

WBOY
Release: 2023-05-09 11:35:07
Original
4297 people have browsed it

In web design, carousel is a common visual effect used to display multiple pictures or content. HTML provides a variety of methods to implement carousel functions, and this article will introduce several of them.

1. Use CSS3 animation to implement carousel

CSS3 animation is a simple method to implement carousel. By setting animations, pictures or content can automatically loop. The specific implementation steps are as follows:

  1. Set the carousel image container in HTML, as shown below:
<div class="carousel">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
</div>
Copy after login
Copy after login
  1. Set the container style in CSS and set animation :
.carousel {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.carousel img:first-child {
    opacity: 1;
}
.carousel img.active {
    opacity: 1;
}
@keyframes carousel {
    0% {
        transform: translateX(0%);
    }
    20% {
        transform: translateX(-100%);
    }
    40% {
        transform: translateX(-200%);
    }
    60% {
        transform: translateX(-300%);
    }
    80%{
        transform:translateX(-400%);
    }
    100% {
        transform: translateX(0%);
    }
}
Copy after login
  1. Set the carousel logic in JS:
let activeImage = 0;
setInterval(function() {
    const images = document.querySelectorAll('.carousel img');
    images[activeImage].classList.remove('active');
    activeImage++;
    if (activeImage >= images.length) {
        activeImage = 0;
    }
    images[activeImage].classList.add('active');
}, 5000);
Copy after login

Through the above steps, the effect of the carousel image can be achieved.

2. Use JavaScript to implement carousels

JavaScript is also a common method to implement carousels. The specific implementation steps are as follows:

  1. Set the carousel image container in HTML, as shown below:
<div class="carousel">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
</div>
Copy after login
Copy after login
  1. Set the container style in CSS:
.carousel {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.carousel img:first-child {
    opacity: 1;
}
Copy after login
  1. Set the carousel logic in JS and add event monitoring:
let activeImage = 0;
const images = document.querySelectorAll('.carousel img');
setInterval(function() {
    images[activeImage].classList.remove('active');
    activeImage++;
    if (activeImage >= images.length) {
        activeImage = 0;
    }
    images[activeImage].classList.add('active');
}, 5000);

document.addEventListener('DOMContentLoaded', function() {
    const next = document.querySelector('.carousel .next');
    const prev = document.querySelector('.carousel .prev');
    next.addEventListener('click', function() {
        images[activeImage].classList.remove('active');
        activeImage++;
        if (activeImage >= images.length) {
            activeImage = 0;
        }
        images[activeImage].classList.add('active');
    });
    prev.addEventListener('click', function() {
        images[activeImage].classList.remove('active');
        activeImage--;
        if (activeImage < 0) {
            activeImage = images.length - 1;
        }
        images[activeImage].classList.add('active');
    });
});
Copy after login

Through the above steps, the carousel image has the effect of turning pages forward and backward. Achieved.

3. Use plug-ins to implement carousels

In addition to the above two methods, you can also use ready-made carousel plug-ins to achieve carousel effects. The following are several common carousel plug-ins:

  1. Slick Slider: A simple and easy-to-use responsive carousel plug-in that supports infinite sliding, adaptive, lazy loading, etc.
  2. Swiper: A mobile-first carousel plug-in with real hardware acceleration, multiple animation effects and other features.
  3. Owl Carousel: A feature-rich and highly customizable carousel plug-in that supports multiple layout forms, etc.

The above methods can be used to achieve the carousel effect. It is necessary to choose the appropriate method to implement based on actual needs and technical level.

The above is the detailed content of Implementation of html carousel. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template