Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dotun12

Add Next and Previous Button to Scroll slider

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

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?

 

Link to comment
Share on other sites

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, {})

 

Link to comment
Share on other sites

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 :) 

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

@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";

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.
×