Amazon Style Horizontal Scroller In jQuery

A tiny jQuery script to replicate the Amazon-style product scroller that allows the user to horizontally scroll through a group of items with prev/next buttons.

How to use it:

1. Add scrollable content together with prev/next control buttons to the horizontal scroller.

<div class="preview_control_area">
  <div class="data_preview_area">
    <div class="data_preview_frame"><div class="data_preview_content">Item 1</div></div>
    <div class="data_preview_frame"><div class="data_preview_content">Item 2</div></div>
    <div class="data_preview_frame"><div class="data_preview_content">Item 3</div></div>
    <div class="data_preview_frame"><div class="data_preview_content">Item 4</div></div>
    <div class="data_preview_frame"><div class="data_preview_content">Item 5</div></div>
    <div class="data_preview_frame"><div class="data_preview_content">Item 6</div></div>
    ...
  </div>
  <div class="control_button previous_button">Prev</div>
  <div class="control_button next_button">Next</div>
</div>

2. The necessary CSS styles for the horizontal scroller.

.data_preview_area {
  margin:0.5rem 0;
  overflow-x:auto;
  white-space:nowrap;
}

.data_preview_frame {
  width:calc(100% / 5);
  display:inline-block;
}

.data_preview_content {
  height:15rem;
  margin:0 0.5rem;
  background:#34BC9D;
  color: #fff;
  text-align: center;
  line-height: 15rem;
  font-size:1.5rem;
  font-weight:bold;
}

3. Style the prev/next buttons.

.preview_control_area {
  position:relative;
  background-color: #fff;
}

.previous_button {
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
}

.next_button {
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

.control_button {
  background:white;
  border:solid 0.1rem black;
  border-radius:0.25rem;
  padding:0.5rem;
  margin:0 0.25rem;
  cursor:pointer;
  opacity:0.25;
  transition:0.2s;
}

.control_button:hover {
  background:black;
  color:white;
  opacity:0.8;
  transition:0.2s;
}

4. Customize the scrollbar styles. See 10 Best Custom Scroll Bar Plugins for more details.

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

5. Load the latest jQuery library in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

6. Enable the horizontal scroller.

window.addEventListener("load" , function (){
  $(".previous_button").on("click",function(){ scroll(this,false); });
  $(".next_button").on("click",    function(){ scroll(this,true); });
});

function scroll(elem,next){
  let target  = $(elem).siblings(".data_preview_area");
  let width   = target.outerWidth()
  if (next){
    target.animate({ scrollLeft:"+=" + String(width) } , 300);
  }
  else{
    target.animate({ scrollLeft:"-=" + String(width) } , 300);
  }
}

Changelog:

2021-04-25

• Bugfixed

---

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