dev.dylan2royle.github.io/carousel-1.php at main · Dylan2Royle/dev.dylan2royle.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div class="container">
    <div class="background-image"></div>
    <div class="text-container">
        <h1 class="changing-text">Welcome to My Website</h1>
    </div>
    <div class="image-container">
        <img src="image-carousel/image-carousel-1/stole.png" alt="">
        <img src="image-carousel/image-carousel-1/361565224_1314143106189835_5392605077248901451_n.jpg" alt="">
        <img src="image-carousel/image-carousel-1/FB_IMG_1670486478002.jpg" alt="">
        <img src="image-carousel/image-carousel-1/361637374_1314143116189834_4413539687167115761_n.jpg" alt="">
    </div>
</div>


<script>
    const backgroundElement = document.querySelector('.background-image');
const changingTextElement = document.querySelector('.changing-text');
const carouselImages = document.querySelectorAll('.image-container img');

const carouselData = [
    {
        image: 'image-carousel/image-carousel-1/stole.png',
        text: 'Welcome to My Website',
    },
    {
        image: 'image-carousel/image-carousel-1/361565224_1314143106189835_5392605077248901451_n.jpg',
        text: 'Explore the Beauty of Nature',
    },
    {
        image: 'image-carousel/image-carousel-1/FB_IMG_1670486478002.jpg',
        text: 'Discover the Urban Life',
    },
    {
        image: 'image-carousel/image-carousel-1/361637374_1314143116189834_4413539687167115761_n.jpg',
        text: 'Adventure Awaits in the Mountains',
    },
];

function changeCarousel(index) {
    const carouselItem = carouselData[index];
    backgroundElement.style.backgroundImage = `url('${carouselItem.image}')`;
    changingTextElement.textContent = carouselItem.text;

    carouselImages.forEach(image => {
        image.classList.remove('active');
    });

    carouselImages[index].classList.add('active');
}

let currentIndex = 0;
changeCarousel(currentIndex);

function animateCarousel() {
    currentIndex = (currentIndex + 1) % carouselData.length;
    changeCarousel(currentIndex);
}

setInterval(animateCarousel, 5000);

</script>