Horizontal/Vertical Image Carousel Plugin - jQuery img-scroll

img-scroll is a jQuery based image scroller where the users are able to infinitely scroll through a list of images along the x or y axis.

More features:

• Custom step size.
• Seamless scroll.
• Or automatically scrolls back to the first image when reaching the last one.
• Allows to scroll multiple images at a time.

How to use it:

1. To use the image scroller, load the JavaScript file img-scroll.js after the latest jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/img-scroll.js"></script>

2. Add image groups into HTML lists as follows:

<div class="imgScrollList">
  <ul>
    <li>
      <a href="#"><img src="https://source.unsplash.com/128x96/?yoga" width="128" height="96"/></a>
      <a href="#"><img src="https://source.unsplash.com/128x96/?fitness" width="128" height="96"/></a>
      <a href="#"><img src="https://source.unsplash.com/128x96/?workout" width="128" height="96"/></a>
      <a href="#"><img src="https://source.unsplash.com/128x96/?sports" width="128" height="96"/></a>
    </li>
    <li>
      <a href="#"><img src="https://source.unsplash.com/128x96/?running" width="128" height="96"/></a>
      <a href="#"><img src="https://source.unsplash.com/128x96/?swimming" width="128" height="96"/></a>
      <a href="#"><img src="https://source.unsplash.com/128x96/?summber" width="128" height="96"/></a>
      <a href="#"><img src="https://source.unsplash.com/128x96/?people" width="128" height="96"/></a>
    </li>
  </ul>
</div>

3. Add the image list together with next/prev buttons to the image scroller.

<div class="imgScrollWrap">
  <a class="imgScrollBtn01" href="javascript:void(0);"></a>
  <a class="imgScrollBtn02" href="javascript:void(0);"></a>
  <div class="imgScrollList">
    <ul>
      <li>
        <a href="#"><img src="https://source.unsplash.com/128x96/?yoga" width="128" height="96"/></a>
        <a href="#"><img src="https://source.unsplash.com/128x96/?fitness" width="128" height="96"/></a>
        <a href="#"><img src="https://source.unsplash.com/128x96/?workout" width="128" height="96"/></a>
        <a href="#"><img src="https://source.unsplash.com/128x96/?sports" width="128" height="96"/></a>
      </li>
      <li>
        <a href="#"><img src="https://source.unsplash.com/128x96/?running" width="128" height="96"/></a>
        <a href="#"><img src="https://source.unsplash.com/128x96/?swimming" width="128" height="96"/></a>
        <a href="#"><img src="https://source.unsplash.com/128x96/?summber" width="128" height="96"/></a>
        <a href="#"><img src="https://source.unsplash.com/128x96/?people" width="128" height="96"/></a>
      </li>
    </ul>
  </div>
</div>

4. Invoke the plugin with options.

$('.imgScrollWrap').imgScroll({

  // left arrow
  btn01: ".imgScrollBtn01", 

  // right arrow
  btn02: ".imgScrollBtn02", 

  // step size in pixels
  step: 560
  
});

5. Apply your own CSS styles to the image scroller.

.imgScrollWrap {
  position: relative;
  width: 600px;
  height: 120px;
  border: 1px #999 solid;
  overflow: hidden;
}

.imgScrollBtn01, .imgScrollBtn02 {
  position: absolute;
  display: block;
  width: 22px;
  height: 40px;
  background: url(images/mainBG.png) no-repeat 0 0;
  overflow: hidden;
  z-index: 2;
}

.imgScrollBtn01 {
  top: 40px;
  left: 0;
}

.imgScrollBtn02 {
  top: 40px;
  right: 0;
  background-position: -22px 0;
}

.imgScrollBtn01:hover {
  background-position: 0 -40px;
}

.imgScrollBtn02:hover {
  background-position: -22px -40px;
}

.imgScrollList {
  position: absolute;
  top: 0;
  left: 20px;
  width: 560px;
  height: 120px;
  overflow: hidden;
  z-index: 1;
}

.imgScrollList ul {
  position: relative;
  width: 9999px;
  height: 120px;
}

.imgScrollList li {
  float: left;
  width: 560px;
  height: 120px;
  overflow: hidden;
}

.imgScrollList li a {
  float: left;
  margin: 12px 6px;
  width: 128px;
  height: 96px;
  overflow: hidden;
}

6. Set the scroll direction. Default: 'horizontal'.

$('.imgScrollWrap').imgScroll({

  direction: "vertical"
  
});

7. Disable the seamless scroll. It means that the image scroller will automatically scroll back to the first image when you reach the last one.

$('.imgScrollWrap').imgScroll({

  isSeamless: false
  
});

8. Specify the number of images to scroll at a time.

$('.imgScrollWrap').imgScroll({

  isScreen: false
  count: 2
  
});

9. Customize the animation speed. Default: 500ms.

$('.imgScrollWrap').imgScroll({

  speed: 1000
  
});

10. All default plugin options.

$('.imgScrollWrap').imgScroll({

  wrap: null,
  listTag: "ul",
  itemTag: "li",
  btn01: null,
  btn02: null,
  direction: "horizontal",
  step: null,
  speed: 500,
  isSeamless: true,
  isScreen: true,
  count: 1
  
});

---

This awesome jQuery plugin is developed by bosscheng. For more Advanced Usages, please check the demo page or visit the official website.