Add Next and Previous Button to Scroll slider

[dotun12 2 Likes (Newbie)]

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

[ZachSaucier 7,162 Likes (Superhero)]

Hey dotun and welcome to the GreenSock forums.

 

Why not use a solution that does this that's already built like the one in the thread below?

 

[dotun12 2 Likes (Newbie)]

Thank ZachSaucier,  I want to disable the drag, I only need the scroll and the next / prev button should I just remove this part of the code

var dragMe = Draggable.create(container, {})

 

[ZachSaucier 7,162 Likes (Superhero)]

7 minutes ago, dotun12 said:

I want to disable the drag, I only need the scroll and the next / prev button should I just remove this part of the code

Yes, and the other couple of lines that are referencing it  

[dotun12 2 Likes (Newbie)]

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>

 

[ZachSaucier 7,162 Likes (Superhero)]

@dotun12 Look in your browser's console and fix the errors that it shows you. In most browsers you can open up your console by pressing F12.

 

You shouldn't be removing the script tags. You should also remove lines that reference dragMe, like dragMe[0].id = "dragger";