Amazon-Like Automatic Side-Scrolling Button jQuery Plugin

auto-horizontal-scroll-js

Amazon style image and title scroller with jQuery script for copying a product scroller that allows the user to scroll horizontally through a group of objects using the Previous / Next buttons.

You can make side-scrolling with TIPS: overflow-x: auto and white-space: nowrap.

How to make use of it:

1. Add scrollable content material along with the prev/next management 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 essential 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.

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

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

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

5. Load the most recent jQuery library within the doc.

<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);
  }
}

Amazon Style Horizontal Scroller, auto horizontal scroll Plugin/Github, jquery content slider, e commerce product slider using html css and javascript


See Demo And Download

Official Website(seiya0723): Click Here

This superior jQuery/javascript plugin is developed by seiya0723. For extra Advanced usage, please go to the official website.

Share