How to use CSS to achieve image carousel effect? (code example)

This article will introduce to you how to achieve the image carousel effect with CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Recommended tutorial: CSS video tutorial]

Theoretical basis

CSS3 Animation properties and @keyframes rules

Main idea

• Prepare multiple images of the same size

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

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

• 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 related

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

HTML

<div id="container">
    <div id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="How to use CSS to achieve image carousel effect? (code example)" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="How to use CSS to achieve image carousel effect? (code example)" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="How to use CSS to achieve image carousel effect? (code example)" >
    </div>
</div>

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

#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;
	}
}

Analysis:

• The size of the display container is consistent with the size of the image
• Add float effect to the image, no need Consider the troublesome margin issue
• Since the example only has three images, three animation stages are added, and each stage achieves the switching effect by setting an increasing margin-left value
• Settings The animation 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

Running Effect

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to use CSS to achieve image carousel effect? (code example). For more information, please follow other related articles on the PHP Chinese website!