CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mohammad Istanboli
Mohammad Istanboli

Reputation: 785

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>

Upvotes: 1

Views: 355

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206689

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.

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

You must set back the right property to 0 once you finish one round. In your code you are setting left as 0 but your right still remains 900 . This is the problem, So change your code to set right to 0 

        if(value == 900)
        {
             slider.style.right = "0";
             value = 300;        
        }

Upvotes: 1

Related Questions