A method of making carousel images with CSS3

Slideshows are often seen on web pages. They have beautiful pictures. Here is a pure CSS3 slideshow.

Here is the style part:

You can understand these lines, right?

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

The design width should not exceed the total width of the carousel images plus the width of the first image (the width of the first image is added to make the carousel effect visible). Mine is 1500 width and 200 height, and then set overflow to hide (eliminate the display area that is still displayed when moved out of the display area)

 #box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}

1000% is a lazy way of writing. It is used to set the width of ul wider. It looks exaggerated because it needs to be at least twice the width of the total image. Why should it be twice the width of less than one image? Because the image is moving to the left (the direction is set by yourself). If it is moved out, there will be no carousel effect without additional images.

1000% is long enough, so there is no need to calculate the total width of the picture. Of course, if there are enough pictures, you don’t have to set it this way. Just set half of the total width plus the width of less than one picture. The name of the animation to be rotated, and how often it is rotated

 #box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}

Set the float to display all images in one line and the width of the images

 #box ul li{float:left;width:133px;height:200px;}

Set mouse over pause

#box:hover ul{animation-play-state:paused;}

Set the animation name and the direction of the carousel (animation effect)

    @keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>

Below is the body part

The slideshow is usually clickable, so it is placed in the a tag.

<body>
<div id="box">
<ul>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</body>

There is more than one way to implement a carousel. I will share it with you next time!

<<: MySQL query optimization using custom variables

>>: How to restore docker container data