How to implement image carousel using pure CSS-CSS Tutorial-php.cn

How to implement image carousel using pure CSS

醉折花枝作酒筹

Release： 2023-01-04 09:34:19

Original

4118 people have browsed it

In CSS, you can use animation attributes and @keyframes rules to achieve image carousel effects. Just use @keyframes to create the animation first; then use the animation attribute to set the time, speed and number of animations required.

How to implement image carousel using pure CSS

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

First prepare multiple pictures of the same size, and the pictures will be displayed horizontally Placed in an image container. Add a display container outside the image container. The size of the display container is the size of the image. Add a custom animation to the image container and set incremental offset values at different stages of the animation.

The animation effect is divided into two parts: switching and staying. The custom animation stage is related to the number of pictures, and the offset value of each stage of the animation is related to the picture size.

The example in this article is to switch from the first picture to the last picture.

HTML

<body>
        <div id="container">
            <div id="photo">
                <img  src="images/1.jpg" / alt="How to implement image carousel using pure CSS" >
                <img  src="images/2.jpg" / alt="How to implement image carousel using pure CSS" >
                <img  src="images/3.jpg" / alt="How to implement image carousel using pure CSS" >
            </div>
        </div>
    </body>

Copy after login

Analysis:
Three img elements are created here. Outside the img element is a picture container, and outside the picture container is a display container.

CSS

<style type="text/css">
            #container {
                width: 400px;
                overflow: hidden;
            }
            #photo {
                width: 1200px;
                animation: switch 5s ease-out infinite;
            }
            #photo > img {
                float: left;
                width: 400px;
            }
            @keyframes switch {
                0%, 25% {
                    margin-left: 0;
                }
                35%, 60% {
                    margin-left: -400px;
                }
                70%, 100% {
                    margin-left: -800px;
                }
            }
        </style>

Copy after login

Rendering:

How to implement image carousel using pure CSS

Analysis:

The size of the display container is the same as the size of the image;
Add a float effect to the image, without having to consider the troublesome margin problem;
Since the example only has three pictures, three animation stages are added. Each stage achieves the switching effect by setting an increasing margin-left value;
set animation The stage (for example: 35%~60%) is the animation stay part, and the free time of the previous stage (for example: 25%~35%) is the animation switching part. The length of each part needs to be controlled by yourself.

Recommended study: "css video tutorial"

The above is the detailed content of How to implement image carousel using pure CSS. For more information, please follow other related articles on the PHP Chinese website!