Jump to content
Search Community

Add Next and Previous Button to Scroll slider

dotun12 test
Moderator Tag

Recommended Posts

Hi there,

 

I am trying to add a next and previous button to the scroll slider (see codepen), so that when you click on next it move to the next slider page, and also maintain the scroll on the slider.

 

I tried to add the below code but did not work


 

<div class="controls">
    <button id="prevButton">Prev</button>
    <button id="nextButton">Next</button>
  </div>


var prevButton = document.querySelector("#prevButton");
var nextButton = document.querySelector("#nextButton");


prevButton.addEventListener("click", function()


  oldSlide = activeSlide;
  activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1);
  activeSlide = activeSlide < 0 ? 0 : activeSlide;
  activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide;


});

nextButton.addEventListener("click", function() {


  oldSlide = activeSlide;
  activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1);
  activeSlide = activeSlide < 0 ? 0 : activeSlide;
  activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide;


});

 

See the Pen vYYeVeW by onseyi (@onseyi) on CodePen

Link to comment
Share on other sites

ZachSaucier, when I try to remove all line of code that as to do with the drag, the page was displaying blank, can you please point me to the part I need to remove thanks.

 

below is the code section I remove

 

 
// make the whole thing draggable
var dragMe = Draggable.create(container, {
  type: "x",
  edgeResistance: 1,
  snap: offsets,
  throwProps:true,
  bounds: "#masterWrap",
  onDrag: tweenDot,
  onThrowUpdate: tweenDot,
  onDragEnd: slideAnim,
  allowNativeTouchScrolling: false,
  zIndexBoost:false
});


<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js'></script><script  src="./script.js"></script>
 
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...