Mohammad Istanboli Mohammad Istanboli - 7 months ago 17
HTML Question

My JavaScript image slider work for just one round?

I read the W3Schools JavaScript Chapter and am trying to make an image slide. I did everything first and it works properly for the first round. For example lets say I click the next button it will keep sliding the slides till the end of the slideshow and then if I click once more it will reset every thing but never works after that. Also when I include the DocType deceleration it won't even work from the beginning.

Here is the HTML with CSS and JavaScript Code:

<html lang="en">
<head>
<title>
Project Name
</title>

<style>
*
{
margin: 0px;
padding: 0px;
}

body
{
margin: 25px;
}

#slideshow
{
width : 300px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;

}

#slides
{
position: relative;
width: 900px;
height: 300px;
transition: 1s;

}

.slide
{
width : 300px;
height: 300px;
float: left;
}
</style>
</head>

<body>
<div id="slideshow">
<div id="slides">
<img class ="slide" src="images/slide1.jpg">
<img class="slide" src="images/slide2.jpg">
<img class="slide" src="images/slide3.jpg">
</div>
</div>

<button onclick="prev()">prev</button>
<button onclick="next()">next</button>





<script type="text/javascript">
var value = 300;
function next()
{
var slider = document.getElementById("slides");

if(value == 900)
{
slider.style.left = "0";
value = 300;
}
else
{
slider.style.right = value;
value += 300;
}
}
</script>
</body>



Answer

Hardcoding JS values is bad practice.
One day you'll change the slider width in CSS and wonder what's going on with the JS part...

  1. make it responsive
  2. calculate dynamically the number of slides with JS
  3. create a counter variable c=0
  4. prev/next manipulate your counter value (loop using %)
  5. tranistion-animate to -100*c in percentage %

var slider = document.getElementById("slides"),
    slide  = slider.querySelectorAll(".slide"),
    tot = slide.length, c = 0;

function anim() {
  c = c<0 ? tot-1 : c%tot;
  slider.style.left= -100*c +"%";
}anim();

function next() { ++c; anim(); }
function prev() { --c; anim(); }
#slideshow {
  height: 150px;
  border: 1px solid #000;
  overflow:hidden;
}

#slides {
  position: relative;
  height: 100%;
  width: 100%;
  white-space:nowrap;
  font-size:0; /* removes 4px inline-block gap */
  transition: 1s; -webkit-transition: 1s;
}

.slide {
  font-size: 1rem; /* restore font size */
  display:inline-block;
  vertical-align:top;
  width : 100%;
  height: 100%;
  background: none 50%;
  background-size: cover;
}
<div id="slideshow">
  <div id="slides">
    <div class="slide"
         style="background-image:url(http://placehold.it/800x600/0fb);"></div>
    <div class="slide"
         style="background-image:url(http://placehold.it/800x600/bf0);"></div>
    <div class="slide"
         style="background-image:url(http://placehold.it/800x600/f0b);"></div>
  </div>
</div>

<button onclick="prev()">prev</button>
<button onclick="next()">next</button>

Now that your slider is responsive, put into any container and it's width will accommodate.