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

<div class="loop-wrap">
    <div class="loop-images-container">
        <img class="loop-image lazy"  src="/static/imghwm/default1.png"  data-src="darksky.jpg"   alt="" >
        <img class="loop-image lazy"  src="/static/imghwm/default1.png"  data-src="starsky.jpg"   alt="" >
        <img class="loop-image lazy"  src="/static/imghwm/default1.png"  data-src="whiteland.jpg"   alt="" >
        <img class="loop-image lazy"  src="/static/imghwm/default1.png"  data-src="darksky.jpg"   alt="" >
        <img class="loop-image lazy"  src="/static/imghwm/default1.png"  data-src="starsky.jpg"   alt="" >
    </div>
</div>

.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-wrapWidth and height

.loop-images-container must have one width and height greater than the external main container, and the overflow attribute should Set to hidden. Then why not set it to auto? 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 at animation The

name

value of this attribute <pre class='brush:php;toolbar:false;'>/* animation: name duration timing-function delay iteration-count direction name: 动画名 duration： 动画持续时间 设置为0则不执行 timing-function：动画速度曲线 delay：动画延迟开始时间 设置为0则不延迟 iteration-count：动画循环次数 设置为infinite则无限次循环 direction：是否应该轮流反向播放动画 normal 否 alternate 是 */</pre>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 try alternate of direction , 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!