xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
</head>
<body>
<div id="carousel" class="carousel">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<script src="carousel.js"></script>
</body>
</html>
xxxxxxxxxx
<!-- Slideshow container -->
<div class="slideshow-container fade">
<!-- Full images with numbers and message Info -->
<div class="Containers">
<div class="MessageInfo">1 / 3</div>
<img src="image1.jpg" style="width:100%">
<div class="Info">First caption</div>
</div>
<div class="Containers">
<div class="MessageInfo">2 / 3</div>
<img src="image2.jpg" style="width:100%">
<div class="Info">Second Caption</div>
</div>
<div class="Containers">
<div class="MessageInfo">3 / 3</div>
<img src="image3.jpg" style="width:100%">
<div class="Info">Third Caption</div>
</div>
<!-- Back and forward buttons -->
<a class="Back" onclick="plusSlides(-1)">❮</a>
<a class="forward" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The circles/dots -->
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
</div>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
.carousel {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
width: 100%;
height: 100%;
}
.slide {
flex: 0 0 100%;
transition: transform 0.3s ease-in-out;
}
</style>
</head>
<body>
<div class="carousel">
<div class="slides">
<div class="slide"><img src="image1.jpg" alt="Image 1"></div>
<div class="slide"><img src="image2.jpg" alt="Image 2"></div>
<div class="slide"><img src="image3.jpg" alt="Image 3"></div>
</div>
</div>
<script>
const carousel = document.querySelector('.carousel');
const slides = carousel.querySelector('.slides');
const slideList = carousel.querySelectorAll('.slide');
let currentIndex = 0;
let interval;
function goToSlide(index) {
slides.style.transform = `translateX(-${index * 100}%)`;
currentIndex = index;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slideList.length;
goToSlide(currentIndex);
}
function startSlider() {
interval = setInterval(nextSlide, 3000);
}
function stopSlider() {
clearInterval(interval);
}
carousel.addEventListener('mouseenter', stopSlider);
carousel.addEventListener('mouseleave', startSlider);
// Start the slider
startSlider();
</script>
</body>
</html>
xxxxxxxxxx
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
$('.play').on('click',function(){
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})