I am trying to build a slide show from scratch. I want to use only javascript, no jquery.

As of now, when I click on the 'prev' button, it only moves 50px to left just once. How do I make it move 50px every time on click of 'prev' button.

Javascript Code :-

function prev() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left - 50;
}

function nxt() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left + 50;
}

HTML :-

<div class="slideshow-wrapper">
    <h1>Slide Show</h1>
    <div class="slideshow-outside-container">
        <div class="slideshow-inner-container" id="slide">
            <ul>
                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>

                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>
            </ul>
        </div>
    </div>

    <div class="slideshow-controls-wrapper">
        <button onclick="prev()" class="prev">Prev</button>
        <button onclick="nxt()" class="nxt">Next</button>
    </div>
</div>

CSS:-

body{
font-family: 'tahoma', sans-serif;
font-size: 14px;
color: #999999;
background-color: #cccccc;
}

ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
padding: 0;
display: block;
}

.slideshow-wrapper{
position: relative;
width: 100%;
text-align: center;
}
.slideshow-outside-container h1{
margin-bottom: 30px;
}
.slideshow-outside-container{
position: relative;
display: block;
margin: 0 auto;
padding: 10px;
width: 80%;
height: 150px;
background-color: #ffffff;
overflow: hidden;
}
.slideshow-inner-container{
position: absolute;
top: 12px;
left: 0;
width: 1920px;
height: 140px;
border: 1px solid #000000;
}
.slide{
float: left;
width: 150px;
height: 140px;
margin-right: 20px;
background-color: #eeeeee;
}

.slide1{
background-color: green;
}

.slide2{
background-color: yellow;
}

.slide3{
background-color: red;
}

.slide4{
background-color: blue;
}

.slide5{
background-color: orange;
}

.slideshow-controls-wrapper button{
display: inline-block;
cursor: pointer;
padding: 20px;
}

I am trying to build a slide show from scratch. I want to use only javascript, no jquery.

As of now, when I click on the 'prev' button, it only moves 50px to left just once. How do I make it move 50px every time on click of 'prev' button.

Javascript Code :-

function prev() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left - 50;
}

function nxt() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left + 50;
}

HTML :-

<div class="slideshow-wrapper">
    <h1>Slide Show</h1>
    <div class="slideshow-outside-container">
        <div class="slideshow-inner-container" id="slide">
            <ul>
                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>

                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>
            </ul>
        </div>
    </div>

    <div class="slideshow-controls-wrapper">
        <button onclick="prev()" class="prev">Prev</button>
        <button onclick="nxt()" class="nxt">Next</button>
    </div>
</div>

CSS:-

body{
font-family: 'tahoma', sans-serif;
font-size: 14px;
color: #999999;
background-color: #cccccc;
}

ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
padding: 0;
display: block;
}

.slideshow-wrapper{
position: relative;
width: 100%;
text-align: center;
}
.slideshow-outside-container h1{
margin-bottom: 30px;
}
.slideshow-outside-container{
position: relative;
display: block;
margin: 0 auto;
padding: 10px;
width: 80%;
height: 150px;
background-color: #ffffff;
overflow: hidden;
}
.slideshow-inner-container{
position: absolute;
top: 12px;
left: 0;
width: 1920px;
height: 140px;
border: 1px solid #000000;
}
.slide{
float: left;
width: 150px;
height: 140px;
margin-right: 20px;
background-color: #eeeeee;
}

.slide1{
background-color: green;
}

.slide2{
background-color: yellow;
}

.slide3{
background-color: red;
}

.slide4{
background-color: blue;
}

.slide5{
background-color: orange;
}

.slideshow-controls-wrapper button{
display: inline-block;
cursor: pointer;
padding: 20px;
}

• javascript
• html
• onclick
• move
• slide

• What I don't understand is: you're moving the plete container #slide and also you have pairs of .slide1 .slide1 what kind of gallery is that? – Roko C. Buljan Commented Oct 24, 2014 at 7:57
• :-) well at the moment I not worried abt the perfect gallery - just want to learn javascript and how things are done step by step. Sorry for the incorrect logic – Stacy J Commented Oct 24, 2014 at 8:01
• 3 can you provide your css as well? – Matt Commented Oct 24, 2014 at 8:01

2 Answers 2

Your first problem is that the slide element does not have a current value for left, so even parsing it will return NaN and not work. You can parseInt the current value (50px parses to 50), but default it to 0 using ||, then +/- 50.

When you set the value you also need to say which units it is in, in your case 'px'.

You could cache the value in a variable as some people have suggested, but I don't really see the need. Parsing it each time is quick enough, ensures the function does what it is meant to each time and you don't run the risk of the stored value getting out of sync.

function prev() {
    var val = (parseInt(document.getElementById('slide').style.left, 10) || 0) - 50;
    document.getElementById('slide').style.left = val + 'px';
}

function nxt() {
    var val = (parseInt(document.getElementById('slide').style.left, 10) || 0) + 50;
    document.getElementById('slide').style.left = val + 'px';
}

Fiddle here

try this

function prev(){
var val=parseint(document.getElementById('slide').style.left) - 50;
document.getElementById('slide').style.left =  val+"px";
}

EDIT

This answer have some limitation..