How to implement image carousel using pure css

Implementation ideas:

(Recommended learning: css quick start)

• Prepare the same size Multiple pictures

• Arrange the pictures to be displayed horizontally in a picture container

• Add a display container outside the picture container, and display the container The size is the size of the image

• Add custom animation to the image container and set incremental offset values ​​at different stages of the animation

Notes:

• The animation effect is divided into two parts: switching and staying.

• The custom animation stage is related to the number of pictures

• The offset value of each stage of the animation is related to the picture size

• There is no switching effect from the last picture to the first picture in the example in this article. One idea is to switch one by one from the last picture. Go to the first picture

HTML code:

<div id="container">
    <div id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="How to implement image carousel using pure css" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="How to implement image carousel using pure css" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="How to implement image carousel using pure css" >
    </div>
</div>

Code analysis:

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

css code:

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
 
#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}
 
#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}
 
@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

Code analysis:

• The display container size is consistent with the image size

• Add a float effect to the image without having to consider the troublesome margin issue

• Since the example only has three images, three animation stages are added, and each stage is set by setting an increasing margin-left The value reaches the switching effect

• The set animation stage (for example: 35%~60%) is the animation stay part, and the idle time of the previous stage (for example: 25%~35%) is When switching parts for animation, you need to control the length of each part yourself

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!