CODEWITHSUNDEEP
javascripthtmlcss
zahraascode
zahraascode

Reputation: 37

Slideshow, using HTML,CSS and JS is not working? Stuck on the first slide and not moving

This code is part of a school project I am doing where I make my own website. I have to put a slideshow within it. Whenever I try to create a slideshow however, it never works. This is the closest I have gotten. I found this code from a video and I swear I copied it exactly but I just don't know why its stuck on the first page. It doesn't move to the next slides or anything. Please try to help me, I would really appreciate it. Thank You

**this is the css**

  
  margin: 0;
  padding: 0;
  height: 100vh;
  justify-content: center;
  align-items:center;
}

.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 #009999;
  padding:5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}


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

.manual-btn:hover{
  background:  #009999;
}

#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 #009999;
padding:5px;
border-radius: 10px;
transition: 1s;
}

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

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

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

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

#radio4:checked~.navigation-auto. auto-btn4{ background: #009999;}
<!--image slider start-->
<div class="slider">
  <div class="slides">
    <!--radio buttons start-->
    <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">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first" >
  <img src="images/recnatble.jpeg" alt="">
  </div>
<div class="slide">
  <img src="images/road.jpg" alt="">
</div>
<div class="slide">
  <img src="images/pretty bridge.jpg" alt="">
</div>
<div class="slide">
  <img src="images/building 1 ss.jpg" alt="">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<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>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<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>

<!--image slider end-->
<script type="text/javascript">
  var counter=1;
  setInterval(function(){
    document.getElementById('radio' + counter).checked=true;
    counter++;
    if (counter > 4){
      counter=1;
    }
  },5000);
</script>

Upvotes: 2

Views: 642

Answers (2)

Real Quick
Real Quick

Reputation: 2800

Here's a solution to your problem. I added a function showSlides to show the slides.

Your checkboxes are not the ones that are being displayed. Its the auto-btns.

    var counter=1;
  setInterval(function(){
    counter++;
    if (counter > 4){
      counter=1;
    }
    showSlides(counter);
  },5000);

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName('auto-btn');

  for (i = 0; i < dots.length; i++) {
      dots[i].style.background = "transparent";
  }

  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  dots[n-1].style.background = "#009999";
  slides[n-1].style.display = "block";
}
    margin: 0;
padding: 0;
height: 100vh;
justify-content: center;
align-items:center;
}

.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 #009999;
padding:5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}


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

.manual-btn:hover{
background:  #009999;
}

#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 #009999;
padding:5px;
border-radius: 10px;
transition: 1s;
}

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

.auto-btn1 {
    background: #009999;
}

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

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

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

#radio4:checked~.navigation-auto. auto-btn4{ background: #009999;}
<div class="slider">
<div class="slides">
<!--radio buttons start-->
<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">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first" >
<img src="https://placekitten.com/200/300" alt="">
</div>
<div class="slide">
<img src="https://placekitten.com/g/200/300" alt="">
</div>
<div class="slide">
<img src="https://placekitten.com/200/300" alt="">
</div>
<div class="slide">
<img src="https://placekitten.com/g/200/300" alt="">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn auto-btn1"></div>
<div class="auto-btn auto-btn2"></div>
<div class="auto-btn auto-btn3"></div>
<div class="auto-btn auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<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>

Upvotes: 1

Nithin - Techidiots
Nithin - Techidiots

Reputation: 103

Your code does not contain any thing to slide or to perform it, just take below as reference and check out how script works on . Check out

var counter = 0;

var image = ['https://wowslider.com/sliders/demo-18/data1/images/hongkong1081704.jpg','http://wowslider.com/sliders/demo-18/data1/images/shanghai.jpg','https://jssors8.azureedge.net/demos/image-slider/img/px-beach-daylight-fun-1430675-image.jpg','https://jssors8.azureedge.net/demos/image-slider/img/faded-monaco-scenery-evening-dark-picjumbo-com-image.jpg'];
setInterval(function(){
  counter++;
  document.getElementById('slider_img').src = image[counter];
  if (counter == image.length){
    counter=0;
  }
},3000);
margin: 0;
padding: 0;
height: 100vh;
justify-content: center;
align-items:center;
}

.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 #009999;
padding:5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}


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

.manual-btn:hover{
background:  #009999;
}

#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 #009999;
padding:5px;
border-radius: 10px;
transition: 1s;
}

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

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

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

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

#radio4:checked~.navigation-auto. auto-btn4{ background: #009999;}
<div class="slider">
<div class="slides">
  <!--radio buttons start-->

<!--radio buttons end-->
<!--slide images start-->
<div class="slide first" >
<img src="https://wowslider.com/sliders/demo-18/data1/images/hongkong1081704.jpg" alt="" id="slider_img">
</div>
<!--slide images end-->
<!--automatic navigation start-->

<!--automatic navigation end-->
</div>
<!--manual navigation start-->


<!--image slider end-->

Upvotes: 0

Related Questions