javascriptjquerycssjquery-pluginsjquery-scrollable

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

Here is my JsFiddle

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 */
}
Solution

  • 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>