How to change two picture in one click

Leave a Comment / By Developer Razu / December 26, 2023

In this post, I want to tell you how to change the image of two divs at the same time by clicking on one button.
You can see in the video below.

I am providing the source codes for your convenience.

HTML

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Carousel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="main-div">
        <div id="leftContainer" class="image-container f-left">
            <img decoding="async" src="img/svg1.svg" alt="Image 1" class="image select">
            <img decoding="async" src="img/svg2.svg" alt="Image 2" class="image">
            <img decoding="async" src="img/svg3.svg" alt="Image 2" class="image">
            <img decoding="async" src="img/svg4.svg" alt="Image 2" class="image">
        </div>

        <div id="rightContainer" class="image-container f-right">
            <img decoding="async" src="img/svg5.svg" alt="Image 1" class="image select">
            <img decoding="async" src="img/svg6.svg" alt="Image 2" class="image">
            <img decoding="async" src="img/svg7.svg" alt="Image 2" class="image">
            <img decoding="async" src="img/svg8.svg" alt="Image 2" class="image">
        </div>
        <img decoding="async" class="main-svg" src="img/svg9.svg" alt="">
    </div>
    
    <button class="my-btn" onclick="changeImage()"><i class="fas fa-sync-alt"></i></button>

    <script>
        var currentImageIndex = 0;

        function changeImage() {
            var leftContainer = document.getElementById("leftContainer");
            var rightContainer = document.getElementById("rightContainer");

            var allImagesLeft = leftContainer.querySelectorAll('.image');
            var allImagesRight = rightContainer.querySelectorAll('.image');

            allImagesLeft[currentImageIndex].classList.remove('select');
            allImagesRight[currentImageIndex].classList.remove('select');

            currentImageIndex++;
            if (currentImageIndex >= allImagesLeft.length) {
                currentImageIndex = 0;
            }

            allImagesLeft[currentImageIndex].classList.add('select');
            allImagesRight[currentImageIndex].classList.add('select');
        }
    </script>
</body>
</html>

CSS

				
					*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-div {
    margin: 0 auto;
    width: 800px;
    margin-top: 20px;
    position: relative;
}

.image-container {
    width: 50%;
    overflow: hidden;
}

.image {
    display: none;
    width: 100%;
}

.select {
    display: block;
}


#leftContainer {
	width: 48%;
	display: inline-block;
}

#rightContainer {
	width: 48%;
	display: inline-block;
}

.my-btn {
	position: absolute;
	left: 25%;
	top: 45%;
	border-radius: 50%;
    margin: 10px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
}

.main-svg {
	width: 631px;
	position: absolute;
	top: 80px;
	left: 0;
}

#leftContainer img {
	position: absolute;
	top: -10px !important;
	left: -30px !important;
}
#rightContainer img {
	position: absolute;
	top: 0px !important;
	right: 106px !important;
}

Leave a Comment Cancel Reply

Keep In Touch