Home>Article>Web Front-end> How to write carousel effect using CSS?
I believe that many of the projects that my friends have done have a need for carousels. Some friends may make their own wheels, and some may directly use Google Carousel. Picture plug-in
But if you don’t use javascript, can you achieve the effect of carousel pictures? Maybe friends have not considered this issue, so let's use css to implement a simple carousel chart
Basic demand analysis
Because css cannot To achieve the same precise control as js, some effects cannot be achieved, such as supporting users to slide left and right while carousel, so use css to intelligently achieve basic effects. The content listed below is what we have implemented:
1. In a fixed area, the internal content slides and switches by itself to form a playback effect
2. When switching to the last piece of content, it will Reverse playback or return to the starting point to replay
3. Each content will stay for a period of time so that users can see it clearly
4. The content can be clicked/operated
dom structure construction
First of all, there must be a container as a container for the carousel. At the same time, because sliding switching is to be implemented, there needs to be an internal sub-container that loads all the content to be switched
If the content in the sub-container is switched left and right, the content needs to be arranged left and right.
The following takes the carousel image as an example, the above code
.loop-wrap
is the main container
.loop-images-container
is the sub-container that carries internal images
.loop-image
is the image content , if you need to display other content, you can customize
css to achieve static effects
The width and height of each page in the carousel should be the same and equal to the main container.loop-wrap
Width and height
.loop-images-container
must have one width and height greater than the external main container, and theoverflow
attribute should Set tohidden
. Then why not set it toauto
? I won’t tell you, you can try it yourself???
.loop-wrap { position: relative; width: 500px; height: 300px; margin: 100px auto; overflow: hidden; } .loop-images-container{ position: absolute; left: 0; top: 0; width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */ height: 100%; font-size: 0; } .loop-image{ width: 500px; height: 300px; }
Open the page in the browser below, and you can see a static page without carousel effect. Except for the first picture, other pictures All are invisible
css to achieve carousel effect
The carousel effect is ultimately an animation effect, and through the new attributes of css3animation
we You can customize an animation to achieve the carousel effect. Let’s first take a look atanimation
The
value of this attribute/* animation: name duration timing-function delay iteration-count direction name: 动画名 duration: 动画持续时间 设置为0则不执行 timing-function:动画速度曲线 delay:动画延迟开始时间 设置为0则不延迟 iteration-count:动画循环次数 设置为infinite则无限次循环 direction:是否应该轮流反向播放动画 normal 否 alternate 是 */
animation
is the animation name. The animation name can be passed@keyframes
Create custom animation rules
Analyze animation
To implement carousel, essentially make a sub-container that carries content inside.loop-images -container
Displace, so that content in different locations can be displayed in front of the user at one time
There are five pictures that need to be displayed. If the carousel takes 10s in total, then each picture should have 2s ( 20%), and the time-consuming component of each picture is the switching time and the display time. If the switching takes 500ms (5%), the display time should be 1500ms (15%)
So it was transformed like this css
.loop-images-container{ position: absolute; left: 0; top: 0; width: 500%; height: 100%; font-size: 0; transform: translate(0,0); /* 初始位置位移 */ animation: loop 10s linear infinite; } /* 创建loop动画规则 */ /* 轮播5张,总耗时10s,单张应为2s(20%) 单张切换动画耗时500ms,停留1500ms */ @keyframes loop { 0% {transform: translate(0,0);} 15% {transform: translate(0,0);} /* 停留1500ms */ 20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */ 35% {transform: translate(-20%,0);} 40% {transform: translate(-40%,0);} 55% {transform: translate(-40%,0);} 60% {transform: translate(-60%,0);} 75% {transform: translate(-60%,0);} 80% {transform: translate(-80%,0);} 95% {transform: translate(-80%,0);} 100% {transform: translate(0,0);} /* 复位到第一张图片 */ }
Dangdangdang~~~ Pure css implementation of carousel effect is completed
Friends who want to see the effect directly can click on the link below
Pure css implementation Carousel effect
This is a carousel effect in one direction. If you want to achieve a carousel effect in the round-trip direction, friends can tryalternate
ofdirection
, but the time interval of the custom animation rules also needs to be recalculated!
Recommended tutorial: "CSS Tutorial"
The above is the detailed content of How to write carousel effect using CSS?. For more information, please follow other related articles on the PHP Chinese website!