CODEWITHSUNDEEP
javascripthtmlcss
Angela Amarapala
Angela Amarapala

Reputation: 1052

Unable to autoscroll JavaScript slider

I am trying to create a pure JavaScript slider which automatically scrolls as the page loads. The slider gets successfully triggered for the first time and here comes the issue. When this slider goes through setInterval() function for the second iteration, the list items gets undefined (ie: the value of 'i'). Also I want the slider to autoscroll. I need this to get done with the help of pure JavaScript. Here is my code,

JS:

    function slider() {

        var ul = document.getElementById("imageSlider");
        var liItems = ul.getElementsByTagName("li");
        var imageWidth = liItems[0].offsetWidth;
        var imageNumber = liItems.length;
        setInterval(function () {
            for (var i = 0; i <= liItems.length; i++) {

                liItems[i].style.right = liItems[i].style.right + imageWidth + 'px';
            }
        }, 2000);
    }

CSS:

    .slider-wrapper {
        height: 115px;
        width: 100%;
    }

    .slide-wrapper {
        height: 95px;
        width: 274px;
        background-image: linear-gradient(#aaaaaa,#e2e2e2);
        background-size: auto 200%;
        background-position: 0 100%;
        transition: background-position 0.5s ease-out;
        -webkit-transition: background-position 0.5s ease-out;
        -moz-transition: background-position 0.5s ease-out;
        -o-transition: background-position 0.5s ease-out;
        -ms-transition: background-position 0.5s ease-out;
        display: inline-block;
        vertical-align: middle;
        margin: 10px;
    }

    .slide-wrapper:hover {
            height: 95px;
            width: 274px;
            background-position: 0 0;
        }
    .slide {
        display: inline-block;
        position: relative;
    }

    ul {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .image {
        text-align: center;
        height: 95px;
        width: 274px;
        line-height: 92px;
    }

    .image-style {
        max-width: 150px;
        width: auto;
        max-height: 75px;
        height: auto;
        vertical-align: middle;
    }

    .left-arrow {
        width: 75px;
        height: 115px;
        float: left;
        position: relative;
        font-family: 'Dosis', sans-serif;
        font-size: 75px;
    }

    .right-arrow {
        width: 75px;
        height: 115px;
        float: right;
        position: relative;
        font-family: 'Dosis', sans-serif;
        font-size: 75px;
    }

    .image-slider-ul {
        text-align: center;
        display: block;
        white-space: nowrap;
        padding: 0;
    }

    .container-middle {
        display: inline-block;
        height: 115px;
        overflow: hidden;
        width: 1188px;
    }

HTML:

    <body onload="slider()">
        <ul id="imageSlider" class="image-slider-ul">
            <div class="slider-wrapper">
                <div class="left-arrow">&lt;</div>
                <div class="container-middle">
                    <li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/1-Number-PNG.png" class="image-style"></div></div></li>
                    <li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/2-Number-PNG.png" class="image-style"></div></div></li>
                    <li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/3-Number-PNG.png" class="image-style"></div></div></li>
                    <li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/4-Number-PNG.png" class="image-style"></div></div></li>
                    <li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/5-Number-PNG.png" class="image-style"></div></div></li>
                </div>
                <div class="right-arrow">&gt;</div>
            </div>
        </ul>
    </body>

Please help me figure this out! Thankyou..

Upvotes: 0

Views: 497

Answers (2)

Mathankumar K
Mathankumar K

Reputation: 631

we could make it automatic left sliding when periodical change of img element src with help of setInterval().

code: 

function slider() {
    // var ul = document.getElementById("imageSlider");
    // var liItems = ul.getElementsByTagName("li");
    // var imageWidth = liItems[0].offsetWidth;
    // var imageNumber = liItems.length;
    setInterval(function() {
       var souc = document.getElementsByClassName("image-style");
       var firstSrc = souc[0].src
      for (var i = 0; i < souc.length -1; i++) {
        souc[i].src = souc[i+1].src;
      }
      souc[souc.length-1].src = firstSrc;
    }, 2000);
  }
.slider-wrapper {
        height: 115px;
        width: 100%;
    }

    .slide-wrapper {
        height: 95px;
        width: 274px;
        background-image: linear-gradient(#aaaaaa,#e2e2e2);
        background-size: auto 200%;
        background-position: 0 100%;
        transition: background-position 0.5s ease-out;
        -webkit-transition: background-position 0.5s ease-out;
        -moz-transition: background-position 0.5s ease-out;
        -o-transition: background-position 0.5s ease-out;
        -ms-transition: background-position 0.5s ease-out;
        display: inline-block;
        vertical-align: middle;
        margin: 10px;
    }

    .slide-wrapper:hover {
            height: 95px;
            width: 274px;
            background-position: 0 0;
        }
    .slide {
        display: inline-block;
        position: relative;
    }

    ul {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .image {
        text-align: center;
        height: 95px;
        width: 274px;
        line-height: 92px;
    }

    .image-style {
        max-width: 150px;
        width: auto;
        max-height: 75px;
        height: auto;
        vertical-align: middle;
    }

    .left-arrow {
        width: 75px;
        height: 115px;
        float: left;
        position: relative;
        font-family: 'Dosis', sans-serif;
        font-size: 75px;
    }

    .right-arrow {
        width: 75px;
        height: 115px;
        float: right;
        position: relative;
        font-family: 'Dosis', sans-serif;
        font-size: 75px;
    }

    .image-slider-ul {
        text-align: center;
        display: block;
        white-space: nowrap;
        padding: 0;
    }

    .container-middle {
        display: inline-block;
        height: 115px;
        overflow: hidden;
        width: 1188px;
    }
<body onload="slider()">
  <div>
  <ul id="imageSlider" class="image-slider-ul">
    <div class="slider-wrapper">
      <div class="left-arrow">&lt;</div>
      <div class="container-middle">
        <li class="slide">
          <div class="slide-wrapper">
            <div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/1-Number-PNG.png" class="image-style"></div>
          </div>
        </li>
        <li class="slide">
          <div class="slide-wrapper">
            <div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/2-Number-PNG.png" class="image-style"></div>
          </div>
        </li>
        <li class="slide">
          <div class="slide-wrapper">
            <div class="image"><img  src="http://www.pngall.com/wp-content/uploads/2016/04/3-Number-PNG.png" class="image-style"></div>
          </div>
        </li>
        <li class="slide">
          <div class="slide-wrapper">
            <div class="image"><img  src="http://www.pngall.com/wp-content/uploads/2016/04/4-Number-PNG.png" class="image-style"></div>
          </div>
        </li>
        <li class="slide">
          <div class="slide-wrapper">
            <div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/5-Number-PNG.png" class="image-style"></div>
          </div>
        </li>
      </div>
      <div class="right-arrow">&gt;</div>
    </div>
  </ul>
  </div>
</body>

Note: open snippet in full page, you can understand clearly.

l hope it helps to you.

Upvotes: 2

Sagar
Sagar

Reputation: 497

I am guessing that your problem arises as the first iteration moves elements to right but then does not repeat themselves as there are no elements to the left.

You could try to create a function which will move back all elements to the original position at the elements.lenth loop iteration as you'll be showing the animation to the last element as well.

Upvotes: 1

Related Questions