Jquery- moving a scrollbar automatically to a specific location after particular time

Question

How can i move my scrollbar automatically to the right (after third image) with some fade effect after few specific seconds so that user can see the next set of images.

can someone tell me how it can be done using javascript and jquery.

Here is my Html

<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
</div>

Here is my css:

.gallery .row {
white-space: nowrap;
}
.gallery img {
display: inline-block;
/* other properties */
}

apaul · Accepted Answer · 2015-07-10T15:04:43.933

Here is a simplified jQuery version:

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

To add a simple fade transition between slides add:

$('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
});

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
  $('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
  });
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

and a pure CSS version:

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
  animation: scroll 8s infinite;
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  6.25% {
    transform: translatex(0px);
    opacity: 1;
  }
  12.5% {
    transform: translatex(0px);
    opacity: 1;
  }
  18.75% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  31.25% {
    transform: translatex(-331px);
    opacity: 1;
  }
  37.5% {
    transform: translatex(-331px);
    opacity: 1;
  }
  43.75% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  56.25% {
    transform: translatex(-662px);
    opacity: 1;
  }
  62.5% {
    transform: translatex(-662px);
    opacity: 1;
  }
  68.75% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  81.25% {
    transform: translatex(-993px);
    opacity: 1;
  }
  87.5% {
    transform: translatex(-993px);
    opacity: 1;
  }
  93.75% {
    transform: translatex(-1324px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.gallery:hover img {
  animation: none;
}
.gallery:hover {
  overflow-x: scroll;
}

<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

thanks a ton. the pure css version was awesome. the scrollbar was missing in the css verson. is it possible to keep the scrollbar in that pure css version? i just want to keep the scrollbar. — shubendrak, Jun 06 '13 at 17:43
just replace `overflow:hidden;` with `overflow-x: scroll;` on `.gallery` — apaul, Jun 06 '13 at 19:50
i did that. but that did not move like the jquery version. can we move the scrollbar in the pure css version — shubendrak, Jun 07 '13 at 08:27
@Aadietya I'm assuming that you want the scroll bar for manual control. See the last example in the updated answer. — apaul, Jun 07 '13 at 13:53

theunexpected1 · Answer 2 · 2015-05-14T19:56:45.097

Moving scrollbar would not give you optimum results, with regards to performance.

However, to answer your question:

var Slider = {
    incr: 3, //everytime go to 3rd image from current
    imageNumber: 0, //this keeps track of index of image to go to
    intervalDuration: 3000, //interval between each scroll
    imageMargin: 20, //margin that you set between images
    nextImage: null, //next image object, keeps updating,
    updateNextImage: function(){
            $(Slider.nextImage).removeClass('next');
            Slider.imageNumber += Slider.incr;
            $('.row:first img:nth-child(' + Slider.imageNumber + ')').addClass('next');
            Slider.nextImage = $('img.next');
    }
}

$(document).ready(function(){
    //set next item first
    Slider.updateNextImage();

    setInterval(function(){
        try{
            $('.gallery').animate(
                { scrollLeft: $(Slider.nextImage).position().left + $('.gallery').scrollLeft() + $(Slider.nextImage).outerWidth() + Slider.imageMargin }, //Scrolls to the element
                300, function(){
                    //update next item
                    Slider.updateNextImage();
            });
        } catch(e){
        //code to restart slider
            Slider.imageNumber = 0;
            $('.gallery').animate({scrollLeft: 0});
            Slider.updateNextImage();
        }

    }, Slider.intervalDuration);

});

For more control, cleaner coding and many other forms of sliders, I suggest an existing jQuery plugin to achieve this: http://www.woothemes.com/flexslider/

All the best.

i want the scrollbar to start over after it reaches the end. — shubendrak, Jun 04 '13 at 17:49
I made the edit on the original answer to accomodate for that, as well as updated the code on jsfiddle. — theunexpected1, Jun 06 '13 at 16:57

score 0 · Answer 3 · answered Jun 01 '13 at 00:56

0

I didn't really understand what you meant by:

"with some fade-in effect"

But here is a "slider" that jumps over 3 classes at a time:

var left = $('.normalimage:nth-child(3)').offset().left-$('.gallery').offset().left;
var max = $('.gallery').width();
var step = left;
setInterval( function(){
    $('.gallery').animate({
        scrollLeft:step,
    } ,300);
    if(max>= step)
        step += left;
    else
        step = 0;
}, 2000 );

Demo here

answered Jun 01 '13 at 00:56

funerr

7,212
14
81
129

i wanted to scrollbar to move right with fade effect. i saw the demo. thanks for help. but i want only fourth, fifth, sixth element of 1st row and 16th,17th.18th element of the second row to be only visible inside my div. currently it's showing other element after first scroll – shubendrak Jun 01 '13 at 01:14
@Aadietya, could you elaborate? – funerr Jun 01 '13 at 19:09
yes sure i can elaborate. leave about the fade effect. the scroll effect is ok. i want 1st, 2nd, 3rd image of 1st row and 1st, 2nd, 3rd element of 2nd row to display first inside the div. then after few seconds i want 4th,5th,6th element of 1st row and 4th,5th,6th element of 2nd row to be appear only in the div. then after few seconds i want only next set of 6 image to come in the div. currently in the demo, it shows other images also – shubendrak Jun 02 '13 at 03:37

score 0 · Answer 4 · answered Jun 03 '13 at 05:24

0

Working jsFiddle Demo

$(function () {
    // show 3 elements in each row
    var count = 3;

    function showItems(start) {
        if (start >= $('.gallery .row:eq(0) img').length) {
            start = 0;
        }

        // for debug
        console.log('Showing items ' + start + ' - ' + (start + count));

        $('.gallery .row img').css('display', 'none');
        $('.gallery .row').each(function () {
            var $row = $(this);
            for (var i = start; i < count + start; i++) {
                $row.find('img').eq(i)
                    .css('opacity', 0)
                    .css('display', 'inline-block')
                    .animate({opacity: 1});
            }
        });

        setTimeout(function () {
            showItems(count + start);
        }, 1000);
    }

    showItems(0);
});

answered Jun 03 '13 at 05:24

i checked the demo. thanks for help. but at the end i am getting only 4 element. there should be six element – shubendrak Jun 03 '13 at 05:40
I added **two** extra elements in each row, to show that if the items are not exactly three by three, what happened, and you find where you reached the last items, and then it goes to the beginning again, [here is your original markup demo](http://jsfiddle.net/uL6t9/16/). – Jun 03 '13 at 05:43
and i don't want the extra element to be hidden in the beginning. i want the scrollbar to be present all time and the next set of six images to be loaded with fade effect and scrollbar moved to the left. – shubendrak Jun 03 '13 at 05:45

Jquery- moving a scrollbar automatically to a specific location after particular time

4 Answers4

Linked