Implementation of html carousel

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="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="">
    <img src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="">
    <img src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="">
</div>

2. 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%);
    }
}

3. 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);

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="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="">
    <img src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="">
    <img src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="">
</div>

2. 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;
}

3. 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');
    });
});

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!