Wednesday, January 13, 2021

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

Coding Snow January 13, 2021 30 comment

Description

Hello everyone! In this video, you are going to learn how to design an Image Slider(slideshow/carousel) with Both Auto-play and Manual Navigation using CSS, HTML, and Javascript. Manual navigation is with buttons and you can navigate to any slide using these buttons. Autoplay navigation is automatically changing slides due to a timer set by using javascript. Let's see how to design this awesome image slider.

First, create the index.html file and the style.css file. After you created these two files, Start the HTML part of the image slider in the index.html file as you can see in the video. After the HTML part of the image slider is complete, then link the style.css file to the index.html file between the <head></head> tags. Then complete the styling part of the image slider as you can see in the video. After you complete the styling part of the image slider then go back to the index.htm file to code the javascript part of the image slider slide transition. In the index.html file before the body tag close open the <script></script> tags and complete the javascript part of the image slider slide transition interval function in between that tags. So that's hope this video will be helpful to design an attractive image slider using CSS, HTML, and Javascript.

Recommended For You

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Slider</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<div class="slider">
      <div class="slides">
        
        <input type="radio" name="radio-btn" id="radio1">
        <input type="radio" name="radio-btn" id="radio2">
        <input type="radio" name="radio-btn" id="radio3">
        <input type="radio" name="radio-btn" id="radio4">
        
        
        <div class="slide first">
          <img src="1.jpg" alt="">
        </div>
        <div class="slide">
          <img src="2.jpg" alt="">
        </div>
        <div class="slide">
          <img src="3.jpg" alt="">
        </div>
        <div class="slide">
          <img src="4.jpg" alt="">
        </div>
        
        
        <div class="navigation-auto">
          <div class="auto-btn1"></div>
          <div class="auto-btn2"></div>
          <div class="auto-btn3"></div>
          <div class="auto-btn4"></div>
        </div>
        
      </div>
      
      <div class="navigation-manual">
        <label for="radio1" class="manual-btn"></label>
        <label for="radio2" class="manual-btn"></label>
        <label for="radio3" class="manual-btn"></label>
        <label for="radio4" class="manual-btn"></label>
      </div>
      
    </div>

</body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #23E3C9;
}

.slider{
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides{
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input{
  display: none;
}

.slide{
  width: 20%;
  transition: 2s;
}

.slide img{
  width: 800px;
  height: 500px;
}

/*css for manual slide navigation*/

.navigation-manual{
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn{
  border: 2px solid #40D3DC;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child){
  margin-right: 40px;
}

.manual-btn:hover{
  background: #40D3DC;
}

#radio1:checked ~ .first{
  margin-left: 0;
}

#radio2:checked ~ .first{
  margin-left: -20%;
}

#radio3:checked ~ .first{
  margin-left: -40%;
}

#radio4:checked ~ .first{
  margin-left: -60%;
}

/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;
}

.navigation-auto div{
  border: 2px solid #40D3DC;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child){
  margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
  background: #40D3DC;
}

#radio2:checked ~ .navigation-auto .auto-btn2{
  background: #40D3DC;
}

#radio3:checked ~ .navigation-auto .auto-btn3{
  background: #40D3DC;
}

#radio4:checked ~ .navigation-auto .auto-btn4{
  background: #40D3DC;
}

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

AnonymousJanuary 27, 2021 at 12:47 AM
amazing!!
ReplyDelete
Replies
baperplayJanuary 27, 2021 at 8:12 AM
Amazing,thank you
ReplyDelete
Replies
baperplayJanuary 27, 2021 at 8:13 AM
Amazing,thank you
ReplyDelete
Replies
Ritesh ShahFebruary 25, 2021 at 8:10 AM
My image size is 1200 by 600, what do I change to adjust for that. I tried changing the height and width variables, but its not working out properly? please help
ReplyDelete
Replies
Ritesh ShahFebruary 26, 2021 at 9:25 AM
i did that and now I get two sets of manual button. Can i post or email you the code for your review?
ReplyDelete
Replies
Ritesh ShahFebruary 28, 2021 at 7:13 PM
Email sent.
ReplyDelete
Replies
UnknownMarch 22, 2021 at 8:03 PM
Radio buttons are not completely displaying.. Can anybody help?
ReplyDelete
Replies
UnknownApril 27, 2021 at 3:23 PM
Amazing and beatiful work and website too, you are doing a very outstanding job
ReplyDelete
Replies
AnonymousMay 7, 2021 at 12:45 AM
How can I add more images? I modified evberything including classes but still won't scroll more than 4
ReplyDelete
Replies
AnonymousJune 5, 2021 at 5:55 AM
How to reduce timer for eachh slide
ReplyDelete
Replies
AkashJune 20, 2021 at 3:07 PM
hi
ReplyDelete
Replies
AnonymousOctober 9, 2021 at 12:20 AM
Amazing work!
ReplyDelete
Replies
AnonymousNovember 17, 2021 at 11:06 AM
very nice��
ReplyDelete
Replies
UnknownNovember 19, 2021 at 9:10 AM
I cant write a text under the image slider
ReplyDelete
Replies
UnknownDecember 3, 2021 at 1:08 PM
I don't know! This Html Code Where to add? Add 2 type code? Can you tell me how to do this? ( blogger )
ReplyDelete
Replies
E.T InternetMarch 8, 2022 at 8:46 PM
You are the best 💯
ReplyDelete
Replies
AnonymousMay 24, 2022 at 9:33 AM
bro fr no cap no bs ur my hero for creating this slide bro
ReplyDelete
Replies
jchintallJune 27, 2022 at 12:29 PM
How to add more than six photos and of different size?
ReplyDelete
Replies
AnonymousNovember 10, 2022 at 8:57 PM
Hi,I have a simpy question: i tried to load pictures from my laptop,why it shows nothing ?
ReplyDelete
Replies
AnonymousDecember 21, 2022 at 10:50 PM
Nice work bro
ReplyDelete
Replies
AnonymousApril 18, 2023 at 4:13 AM
It works awesome! I'm trying to do the same but animating from the bottom up. But I can't get the animation calculating the same. It moves less than with width. What could that be?

/Sebastian
ReplyDelete
Replies
AnonymousAugust 3, 2023 at 8:58 PM
So beautiful now I can make one too thanks allot.
ReplyDelete
Replies
AnonymousOctober 3, 2023 at 12:40 AM
Great ! But how can i make the images appear on the full screen? Thanks!

ReplyDelete
Replies
AnonymousNovember 12, 2023 at 2:32 PM
Thanks alots
ReplyDelete
Replies

Add comment

Wednesday, January 13, 2021

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form