Breaking News: Grepper is joining You.com. Read the official announcement!

multi item slider html css

Splendid Sable answered on March 21, 2022 Popularity 9/10 Helpfulness 3/10

answer multi item slider html css

multi item slider html css

Comment

<div class="slides slowFade">
        <div class="slide">
            <img src="01.jpg" alt="img"/>
        </div>
        <div class="slide">
            <img src="02.jpg" alt="img"/>
        </div>
        <div class="slide">
            <img src="03.jpg" alt="img"/>
        </div>
        <div class="slide">
            <img src="04.jpg" alt="img"/>
        </div>
    </div>
    
    <style>
    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.slowFade {
    display: flex;
    align-items: flex-start;
    background: #fff;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.slowFade .slide img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    background: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    opacity: 0;
    transform: scale(1.5) rotate(15deg);
    -webkit-animation: slowFade 32s infinite;
            animation: slowFade 32s infinite;
}
.slowFade .slide:nth-child(3) img {
    -webkit-animation-delay: 8s;
            animation-delay: 8s;
}
.slowFade .slide:nth-child(2) img {
    -webkit-animation-delay: 16s;
            animation-delay: 16s;
}
.slowFade .slide:nth-child(1) img {
    -webkit-animation-delay: 24s;
            animation-delay: 24s;
}
@keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}

@-webkit-keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}
</style>

Popularity 9/10 Helpfulness 3/10 Language html

Source: blog.stackfindover.com

Tags: css html slider

Link to this answer
Share Copy Link

Contributed on Mar 21 2022

Splendid Sable

0 Answers Avg Quality 2/10

multi item slider html css

Contents

More Related Answers

multi item slider html css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.