You are currently viewing Automatic Multiple Image Slider in HTML CSS

Automatic Multiple Image Slider in HTML CSS

Automatic Multiple Image Slider in HTML CSS

Automatic Multiple Image Slider in HTML CSS
Automatic Multiple Image Slider in HTML CSS

 

Automatic Multiple Image Slider in HTML CSS

Hello….Welcome to Code with Random….. In today blog we are creating AUTOMATIC IMAGE SLIDER USING HTML AND CSS.
It is a image slideshow which represent multiple image.It is autoplaying image slider.
So Let start to create image slider before that you see the live server which is given here…
Automatic Multiple Image Slider in HTML CSS
Automatic Multiple Image Slider in HTML CSS

 

LIVE Preview Of Automatic Multiple Image Slider in HTML CSS

HTML CODE For Automatic Image Slider:-

In this, we want to add 4 slides but here we want to list the image and add the image source as given in this code.
Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here
<h1 style="margin-top: 150px; text-align: center">
    CSS Only Automatic Image Slider Demo
</h1>
<input
    id="sliderSwitch"
    class="slider__switch"
    type="checkbox"
    name="sliderSwitch"
    hidden
/>
<div class="slider">
    <ul class="slider__list">
        <li class="slider__slide">
            <img src="https://unsplash.it/650/420?image=924" alt="Slide 1" />
        </li>
        <li class="slider__slide">
            <img src="https://unsplash.it/650/420?image=923" alt="Slide 2" />
        </li>
        <li class="slider__slide">
            <img src="https://unsplash.it/650/420?image=922" alt="Slide 3" />
        </li>
        <li class="slider__slide">
            <img src="https://unsplash.it/650/420?image=921" alt="Slide 4" />
        </li>
    </ul>
</div>
<div class="slider__control"><label for="sliderSwitch"></label></div>

50+ HTML, CSS & JavaScript Projects With Source Code

HTML OUTPUT:-

Automatic Multiple Image Slider in HTML CSS
Automatic Multiple Image Slider in HTML Code Preview

 

Automatic Multiple Image Slider in HTML CSS
Automatic Multiple Image Slider in HTML Code Preview

CSS CODE For Automatic Image Slider:-

Here there is an autoplay button if we want a slide show then click the button autoplay is given. The position of 1 to 4 slides is given.
body {
    font-size: 100%;
    background: #f1f1f1;
} /* Fallback for hidden attribute */
hidden {
    display: none;
} /** * Keyframes for autoplay */
@-webkit-keyframes autoplay {
    /* position of the first slide */
    0% {
        left: 0;
    } /* position of the second slide */
    25% {
        left: -40.625rem;
    } /* position of the third slide */
    50% {
        left: -81.25rem;
    } /* position of the fourth slide */
    100% {
        left: -121.875rem;
    }
}
@keyframes autoplay {
    /* position of the first slide */
    0% {
        left: 0;
    } /* position of the second slide */
    25% {
        left: -40.625rem;
    } /* position of the third slide */
    50% {
        left: -81.25rem;
    } /* position of the fourth slide */
    100% {
        left: -121.875rem;
    }
} /** * Slider */
.slider {
    position: relative; /* top margin is for purposes of demo */
    margin-top: 3rem;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    width: 40.625rem;
    height: 26.25rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.slider__list {
    position: absolute;
    left: 0;
    width: 162.5rem;
}
.slider__slide {
    float: left;
} /** * Slider control */
.slider__control {
    margin-right: auto;
    margin-left: auto;
    width: 4.5rem;
    font-family: sans-serif;
}
.slider__control label {
    position: relative;
    display: block;
    margin-top: 2rem;
    margin-bottom: 1rem;
    width: 4.5rem;
    height: 2rem;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: transparent;
    background: #ddd;
    border-radius: 2rem;
    cursor: pointer;
    -webkit-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}
.slider__control label:before {
    content: "autoplay";
    position: absolute;
    top: 2.5rem;
    left: 0;
    color: #333;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
}
.slider__control label:after {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 2rem;
    background: #fff;
    -webkit-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slider__switch:checked + .slider > .slider__list {
    -webkit-animation-name: autoplay;
    animation-name: autoplay; /* This will change the time it takes to move to next slide */
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.slider__switch:checked + .slider + .slider__control > label {
    background: #455a64;
}
.slider__switch:checked + .slider + .slider__control > label:after {
    left: 2.75rem;
}

CSS OUTPUT Of Automatic Image Slider:-

Here your AUTOMATIC IMAGE SLIDER USING WITH HTML AND CSS is done. It is done with only html and css there is no use of JS code.
If you like this article or have any doubts comment in the comment box……
THANK YOU……😄
Written_By:-Sayali Kharat

Leave a Reply