Example code for implementing stacked carousel effect with HTML+CSS+JS

Effect:
When the slideshow moves in one direction, the size, position, transparency and level of each image should be changed.
principle:
When the carousel moves to the left, the first child element is cut to the end. When the carousel moves to the right, the last child element is cut to the front, so as to achieve a seamless carousel effect. Because the next li will be filled in after the li is cut (for example, when the first child element is cut to the end, the second child element will be filled in as the first child element), the li subscript remains unchanged. In this way, the properties of the li at each position (size, position, transparency, level) are modified.
HTML code:

 <body>
    <div class="smallBox">
    <div class="arrowLeft">←</div>
    <div class="smallPicBox"> //Use a div to store a ul, and set the initial style for each li in the ul<ul>
                <li id="li1" style="position: absolute;top:calc(50% - 200px);left: 0px;z-index:1;background-color: aqua;transform: scale(0.5);transition: 0.3s;opacity: 0.5;background-image: url(./images/01.jpg);background-size: cover;"></li>
                <li id="li2" style="position: absolute;top:calc(50% - 200px);left: 150px; z-index:2;background-color: red;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/02.jpg);background-size: cover;"></li>
                <li id="li3" style="position: absolute;top:calc(50% - 200px);left: 300px; z-index:3;background-color: blue;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/03.jpg);background-size: cover;"></li>
                <li id="li4" style="position: absolute;top:calc(50% - 200px);left: 450px; z-index:4;background-color: green;transform: scale(1); transition: 0.3s;opacity: 1;background-image: url(./images/04.jpg);background-size: cover;"></li>
                <li id="li5" style="position: absolute;top:calc(50% - 200px);left: 600px; z-index:3;background-color: yellow;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/05.jpg);background-size: cover;"></li>
                <li id="li6" style="position: absolute;top:calc(50% - 200px);left: 750px; z-index:2;background-color: gray;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/06.jpg);background-size: cover;"></li>
                <li id="li7" style="position: absolute;top:calc(50% - 200px);left: 900px; z-index:1;background-color: deeppink;transform: scale(0.5); transition: 0.3s;opacity: 0.5;background-image: url(./images/07.jpg);background-size: cover;"></li>
            </ul>
        </div>
        <div class="arrowRight">→</div>
    </div>
</div>
</body>

CSS code:

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .albumBox{
            width: 1200px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        .smallBox{
            height: 400px;
            line-height: 400px;
            position: relative;
        }
        .smallPicBox{
            width: 1100px;
            height: 400px;
            float: left;
            position: relative;
        }
        .smallPicBox ul{
            width: 100%;
            height: 400px;
        }
        .smallPicBox li{
            width: 320px;
            height: 400px;
            float: left;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .smallBox .current::after{
            content: "\25b2";
            position: absolute;
            top: -31px;
            left: 70px;
            color: red;

        }
        .arrowLeft{
            width: 50px;
            height: 400px;
            position: absolute;
            left: 0;
            border: 1px solid #000;
            box-sizing: border-box;
            background-color: gray;
            z-index: 10;
        }
        .arrowRight{
            width: 50px;
            height: 400px;
            position: absolute;
            right: 0;
            border: 1px solid #000;
            box-sizing: border-box;
            background-color: gray;
            z-index: 10;
        }
    </style>

JS code:

<script>
        var arrowLeft = document.querySelector(".arrowLeft")
        var arrowRight = document.querySelector(".arrowRight")
        var ul = document.querySelector(".smallPicBox ul")
        var li = document.querySelectorAll(".smallPicBox li")
        var timerId = 0
        arrowLeft.onclick=function(){ //Left arrow click event li=document.getElementsByTagName('li')
                ul.appendChild(li[0]) //Cut the 0th child element of ul to the end to achieve seamless carousel posi(li) //Modify the properties of each li}
        arrowRight.onclick=function(){ //right arrow click event li=document.getElementsByTagName('li') //get li again
                ul.insertBefore(li[6],li[0]) //Cut the last child element of ul to the front to achieve seamless carousel posi(li) //Modify the properties of each li}
        
        function posi(li){ //Modify li attribute function var n1=0
                for(var x=0;x<li.length;x++){ //Modify position li[x].style.left=n1+'px'
                    n1=n1+150
                }
                for(var i=0;i<li.length/2;i++){ //Modify the level li[i].style.zIndex=i+1
                    li[li.length-1-i].style.zIndex=i+1
                }
                li[3].style.zIndex='4'
                var n2=0.3
                for(var j=0;j<li.length/2;j++){ //Scaling n2=parseFloat(n2+0.2)
                    li[j].style.transform='scale('+n2+')'
                    li[li.length-1-j].style.transform='scale('+n2+')'
                }
                li[3].style.transform = 'scale(1)'
                var n3=0.3
                for(var k=0;k<li.length/2;k++){ //Modify transparency n3=parseFloat(n3+0.2)
                    li[k].style.opacity=n3
                    li[li.length-1-k].style.opacity=n3
                }
                li[3].style.opacity='1'
        }
        //Mouse in and out temerId=setInterval(function(){
             arrowLeft.click()
        }, 1000);
        arrowLeft.onmouseover=function(){
            clearInterval(timerId)
        }
        arrowLeft.onmouseout=function(){
           timerId = setInterval(function(){
            arrowLeft.click()
         }, 1000);
        }
        arrowRight.onmouseover=function(){
            clearInterval(timerId)
        }
        arrowRight.onmouseout=function(){
           timerId = setInterval(function(){
            arrowLeft.click()
         }, 1000);
        }
    </script>

Note: In this example, js is written directly in the body. You can also write a separate js file and introduce it into the html interface

Effect picture:

insert image description here

This concludes this article about sample code for implementing stacked carousel effects with HTML+CSS+JS. For more information on implementing carousel with HTML+CSS+JS, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed operations of building RabbitMq's common cluster and mirror cluster with Docker

>>: Classes in TypeScript