Simple Infinite Image Slider : HTML CSS @rayen-code

Rayen

Simple Infinite Image Slider : HTML CSS



HTML Code

Copy<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="f_icon.png" type="image/x-icon">
    <title>Simple Infinite Image Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="slider">
        <div class="track">

            <div class="box">
                <img src="https://source.unsplash.com/300x300/?war" alt="image1">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?wall" alt="image2">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?animal" alt="image3">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?ant" alt="image4">
            </div>
            <div class="box">
                <img src="image(5).jpg" alt="image5">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?tree" alt="image6">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?hat" alt="image7">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?poor" alt="image8">
            </div>

            <div class="box">
                <img src="https://source.unsplash.com/300x300/?cat" alt="image1">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?ball" alt="image2">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?sky" alt="image3">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?cow" alt="image4">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?food" alt="image5">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?drink" alt="image6">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?fan" alt="image7">
            </div>
            <div class="box">
                <img src="https://source.unsplash.com/300x300/?rood" alt="image8">
            </div>


        </div>
    </div>
    
</body>
</html>

CSS Code

Copy/*-------------------- CSS --------------------*/
/* style */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.slider{
    height: 250px;
    width: 90%;
    overflow: hidden;
}

.track{
    display: flex;
    width: calc(250px * 16); /*numer of image = 16*/
    animation: anime 32s linear infinite;

}
.track:hover{
    animation-play-state: paused;
}
@keyframes anime {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 8)); /*images (16)/2 = 8*/
    }
    
}

.box{
    width: 250px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    overflow: hidden;
    transition: scale .5s;
}

.box:hover{
    scale: 1.1;
}

img{
    height: 100%;
}

0 Comments