HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

Simple Image Slider Using Only CSS – EASY

in CSS
Reading Time: 2 mins read
372 28
0
550
SHARES
2.5k
VIEWS
Share on FacebookShare on Twitter

We are going to create a simple image slider using only CSS.

First, let’s create the markup.

RelatedPosts

CSS How to Snap to the Next Section on a Single Scroll (CODE)

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

How To Align the Content of a Div to the Bottom with CSS[CODE]

Create the Slider Markup

Create div with a class of “img slider”.
Inside this div will be our slider div container.
Let’s name this “img holder”.
Then inside this container, we are going to add an image tag for our image.

Let’s see a quick preview…

We are going to add another 2 slides so let’s duplicate the slide container twice. …And change the image file name.

Adding the CSS Styles

To add our CSS styles, let’s open a style tag inside the head tag.

For our parent slider div element, let’s add a maximum width of 960 pixels, a width of 100%, and add height, and margin to center-align horizontally.

Next, for our slide container.

Add a position absolute CSS so our slides are stacked on each other.
And then we hide every slide by adding an opacity value of zero.

We are going to use a CSS animation to make every slide appear one at a time.

Let’s create a keyframe called “slide”.

This keyframe simply tells us when should the image appear at what time depending on the timeframe.

I will explain this keyframe that we created after we add our animation value.

Now, let’s add CSS for the first slide container.

Add an animation property with the value of slide (the keyframe that we created) then 9 seconds as the total time for all the 3 slides going to appear.

Then add linear for the timing to the slide transition smooth, and lastly add infinite so the keyframe animation will loop.

I’ll just quickly add CSS support for the other browsers.

Next, let’s target the second slide. For the second slide, we will add an animation-delay of 3 seconds. So it appears at the same time the first slide fades out.

We need to update the keyframe since we have 9 seconds for each loop and the first loop should fade out at 3 seconds.
So, add 30% then it will slowly disappear on 40% and onwards.

Lastly, for the third slide.
Copy and paste the same CSS and change the selector for the third slide container.
For this one, we are just changing the animation delay to 6 seconds so the slide will appear after the 2 other slides fade out.

CSS Code

.img_slider{
        max-width: 960px;
        width: 100%;
        height: 600px;
        margin: 100px auto;
    }
    .img_holder{
        position:absolute;
        opacity: 0
    }

    @keyframes slide {

        0%{
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        30%{
            opacity: 1;
        }
        40%{
            opacity: 0;
        }
    }
    @-webkit-keyframes slide {

        0%{
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        30%{
            opacity: 1;
        }
        40%{
            opacity: 0;
        }
    }
    @-moz-keyframes slide {

        0%{
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        30%{
            opacity: 1;
        }
        40%{
            opacity: 0;
        }
    }

    .img_holder:first-child{
        -webkit-animation: slide 9s linear infinite;
        -moz-animation: slide 9s linear infinite;
        animation: slide 9s linear infinite;;
    }
    .img_holder:nth-child(2){
        -webkit-animation: slide 9s linear 3s infinite;
        -moz-animation: slide 9s linear 3s infinite;
        animation: slide 9s linear 3s infinite;;
    }
    .img_holder:nth-child(3){
        -webkit-animation: slide 9s linear 6s infinite;
        -moz-animation: slide 9s linear 6s infinite;
        animation: slide 9s linear 6s infinite;;
    }

 

Tags: image sliderSlider
Share220Tweet138Share55

Related Posts

CSS How to Snap to the Next Section on a Single Scroll
CSS

CSS How to Snap to the Next Section on a Single Scroll (CODE)

by 22bulbjungle
May 2, 2021
0

This method works either on scroll up or on scroll down. Normally, this is how you scroll down a webpage. In this...

Read more
How to Create CSS Blurred and Opacity(Transparent) Background

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

April 12, 2021
How to align content of a div to the bottom

How To Align the Content of a Div to the Bottom with CSS[CODE]

April 12, 2021
Window cards expand on hover with CSS

CSS Tricks: Expand Card on Hover Effect (Game of Thrones theme | CODE INSIDE)

March 3, 2021
Look for the full CSS of an element

How To See the Complete CSS of an Element in Webpage

June 16, 2022
Simple Image Slider Using Only CSS

Simple Image Slider Using Only CSS – EASY

June 16, 2022
How to Get Paypal API Credentials (Username, Password, Signature)

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

March 27, 2022
Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

February 22, 2022
How To Set SEO Meta Title and Description in Duda Builder

How To Set SEO Meta Title and Description in Duda Builder

January 26, 2022
How To Improve Customer Experience by Preloading Internal Links in Your Shopify Store

How To Improve Customer Experience by Preloading Internal Links in Your Shopify Store

December 8, 2021

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Recent Tutorials

Look for the full CSS of an element

How To See the Complete CSS of an Element in Webpage

June 16, 2022
Simple Image Slider Using Only CSS

Simple Image Slider Using Only CSS – EASY

June 16, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • Javascript
  • PC Tips
  • Photoshop
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.