bartmc Posted April 15, 2021 Share Posted April 15, 2021 Hello! I'm working on a slider with an overlapping slide transition. It's based on Craig’s response in this post: I've made a demo of my work so far, in the attached pen. I can make the slider auto-play forward and loop, with no buttons, but I’d like to have buttons too. This is what I’m trying to figure out: I'd like the slider to loop forward automatically, but if the Next or Previous buttons are pressed, it should move forward (or backward) 1 slide and continue looping forward from there. I'd like the Previous button to decrement from the first slide to the last slide and continue decrementing from there. It’s glitchy decrementing from 1-3 back to 0, always going to slide 4 if you’re on the second loop through the array. but won’t loop backwards past 0 at all. Any help or advice would be much appreciated - including "hire yourself a programmer!" Thank you! See the Pen wvgXqeB by bartmc (@bartmc) on CodePen 1 Link to comment Share on other sites More sharing options...
PointC Posted April 16, 2021 Share Posted April 16, 2021 Hey @bartmc Thanks for being a Club member. Your thread seems to have been missed yesterday. Sorry about that. Here's an auto-play slider with prev/next buttons originally made by @OSUblake and updated to GSAP3 by @GreenSock. I think it should have most of what you need. See the Pen GRJwLNP by GreenSock (@GreenSock) on CodePen Happy tweening. 5 Link to comment Share on other sites More sharing options...
RDMIQ Posted July 15, 2021 Share Posted July 15, 2021 Hello @PointC, thanks for sharing!! i have been playing around with this carousel and its great, but there seems to be a problem. This part of the code doesn't respect the 'repeat' property for some reason. var animation = gsap.to(slides, { xPercent: "+=" + (numSlides * 100), duration: 1, ease: "none", paused: true, repeat: -1, modifiers: { xPercent: wrap } }); if i change the 'repeat' to say '1' it keeps looping and doesn't stop. just wondered if there was something i was missing Thanks RD Link to comment Share on other sites More sharing options...
GreenSock Posted July 15, 2021 Share Posted July 15, 2021 @RDMIQ the "repeat" on that particular animation actually has nothing to do with it. The auto-advancing code is running on a delayedCall() that keeps getting restarted (by design). The animation you're referencing is paused anyway - it's just there to have its progress() set in another function. What exactly are you trying to do? Is the goal to STOP the auto-play functionality after a certain amount of iterations? Are you trying to prevent the looping/wrapping so that the whole thing cannot move past the 1 in the negative direction or 10 in the positive direction? Link to comment Share on other sites More sharing options...
RDMIQ Posted July 15, 2021 Share Posted July 15, 2021 1 hour ago, GreenSock said: @RDMIQ the "repeat" on that particular animation actually has nothing to do with it. The auto-advancing code is running on a delayedCall() that keeps getting restarted (by design). The animation you're referencing is paused anyway - it's just there to have its progress() set in another function. What exactly are you trying to do? Is the goal to STOP the auto-play functionality after a certain amount of iterations? Are you trying to prevent the looping/wrapping so that the whole thing cannot move past the 1 in the negative direction or 10 in the positive direction? Hello!! thanks for getting back to me about this, yes the goal to STOP the auto-play functionality after a certain amount of iterations. Can this be done? Thanks RD Link to comment Share on other sites More sharing options...
GreenSock Posted July 15, 2021 Share Posted July 15, 2021 Sure, you just create a counter variable, iterate it each time autoPlay occurs, and then add conditional logic: See the Pen wvdJEXV?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
RDMIQ Posted July 15, 2021 Share Posted July 15, 2021 Wow! thank you, works amazingly. And thanks the schooling there's always some much to still to learn!! RD 2 Link to comment Share on other sites More sharing options...
tailbreezy Posted December 15, 2021 Share Posted December 15, 2021 On 4/16/2021 at 11:14 PM, PointC said: Here's an auto-play slider with prev/next buttons originally made by @OSUblake and updated to GSAP3 by @GreenSock. I think it should have most of what you need. Hey PointC, I am curious how to achieve this showing n slides at a time instead of just the 1. Have tried a few options, but all failed or are too complex for their own sake. Cheers Link to comment Share on other sites More sharing options...
PointC Posted December 15, 2021 Share Posted December 15, 2021 There's a handy helper function for that. https://greensock.com/docs/v3/HelperFunctions/#loop Happy tweening. 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted December 15, 2021 Share Posted December 15, 2021 This is indeed a handy helper. What I meant tho was not to do multiple xPercent increases, but to actually show two, three,...n at a time and then move them regularly with saw xPercent: 100. E.g grouping them in a div as an unit, but I cant seem to work out how from the example since flexbox doesnt seem to allow this. Link to comment Share on other sites More sharing options...
PointC Posted December 15, 2021 Share Posted December 15, 2021 hmmm... maybe I'm not understanding, but I think the helper function would work for that. I've forked that example and switched it to go forward/backwards 5 at a time. See the Pen 2cb33399a603622390d57072bd1d6844 by PointC (@PointC) on CodePen You'd adjust lines 77 and 78. tl.next = vars => toIndex(curIndex+5, vars); tl.previous = vars => toIndex(curIndex-5, vars); You can then adjust how many slides are visible with your CSS. Is that what you meant or am I misunderstanding things? 4 2 Link to comment Share on other sites More sharing options...
tailbreezy Posted December 15, 2021 Share Posted December 15, 2021 Couldn't have hoped for a better reply. Thank you again @PointC. You are absolutely right, it does what I was looking for. 1 Link to comment Share on other sites More sharing options...
Web Dizajner Posted December 26, 2021 Share Posted December 26, 2021 (edited) . Edited December 26, 2021 by Web Dizajner I found answer https://greensock.com/forums/topic/21124-how-to-create-basic-slideshow/ 1 Link to comment Share on other sites More sharing options...
inteltone Posted August 13, 2023 Share Posted August 13, 2023 @PointC, This function that you pointed out to is very helpful indeed! But what about adding gaps between slides? How to do that? And slides have to remain responsive as before. It's a common thing these days these gaps between slides! Link to comment Share on other sites More sharing options...
inteltone Posted August 13, 2023 Share Posted August 13, 2023 On 12/15/2021 at 7:04 PM, PointC said: hmmm... maybe I'm not understanding, but I think the helper function would work for that. I've forked that example and switched it to go forward/backwards 5 at a time. This function that you pointed out to is very helpful indeed! But what about adding gaps between slides? How to do that? And slides have to remain responsive as before. It's a common thing these days these gaps between slides! Link to comment Share on other sites More sharing options...
GreenSock Posted August 13, 2023 Share Posted August 13, 2023 Here's a version that has 4px between the boxes: See the Pen jOQgNag?editors=1010 by GreenSock (@GreenSock) on CodePen Just make sure you add the paddingRight to the hozirontalLoop() config. Does that help? Link to comment Share on other sites More sharing options...
inteltone Posted August 13, 2023 Share Posted August 13, 2023 Thanks for your quick response! But is it possible to make all the slides that are visible to be visible in their full width? The last visible slide in your example is shown only partly. Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 13, 2023 Share Posted August 13, 2023 Hi @valeriyruss what have you tried your self? Personally I find the only way to learn is to get you heads dirty and dive in to the code. I myself use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. In this case I would just change the CSS to be 100% or what ever with you like and update the items to take up the space you want. Link to comment Share on other sites More sharing options...
inteltone Posted August 13, 2023 Share Posted August 13, 2023 @mvaneijgen Thank you for your response. You are absolutely right - it is much more productive and useful to write the code yourself, look at what comes out of it, and so on. But I'm not too advanced in JS programming. I am just learning. This slider example is almost exactly what I need at the moment. I tried to understand its code, but so far it is too complicated for me, so I turned to this forum for help. The only thing that I lack in it is that the slides are shown in full when there are gaps and the last one among visible is not cut off. I think that if such an adjustment was added to horizontalLoop function, then it would only benefit from this. But that's my personal opinion. GSAP is just great! I started working with it and am very satisfied. Many thanks to the creators! Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 13, 2023 Share Posted August 13, 2023 Well that is the thing, this has everything to do with CSS. That is also the thing with GSAP, CSS is a really important part when working with GSAP, maybe even the most important part. So that was what I was trying to get you to figure out. The only thing I've changed below is giving the wrapper a width over 100%. This is not exact, because the boxes are 20% and there is a margin of 4px, but those are the things you have to change to get it the way you want. Hope it helps and happy tweening! See the Pen JjegdEE?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
inteltone Posted August 13, 2023 Share Posted August 13, 2023 @mvaneijgen Please note that the last slide in the row is only partially visible. This is the only problem for me that I can't solve. And I don't think it can be solved with CSS. Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 13, 2023 Share Posted August 13, 2023 Again, what have you tried already? I've removed the margin which was 4px to the right, if you want that back, you'll have to calculate how much space you want in that gap and subtract that from the width and note that the half of the gap also gets added to the last element which will show up at the left of the first element. You could also try using another property eg gap: or border-right, so much possibilities. Get out pen and paper and good luck with the maths! Again this is all CSS, so no GSAP needed. See the Pen qBQedgV?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
inteltone Posted August 13, 2023 Share Posted August 13, 2023 I think I solved my problem with the slider. Now the slider works the way I wanted, but the solution in CSS-code itself is not as beautiful as I would like. Just look at the class "box" in the CSS panel. The solution of the problem is based in general on CSS. Still, it seems to me that accounting for gaps between slides should largely be implemented through a function horizontalLoop in JS. See the Pen jOQgbJw?editors=0100 by Valeriy-Medvedev (@Valeriy-Medvedev) on CodePen Thanks to everyone who helped me! Link to comment Share on other sites More sharing options...
GreenSock Posted August 14, 2023 Share Posted August 14, 2023 13 hours ago, valeriyruss said: it seems to me that accounting for gaps between slides should largely be implemented through a function horizontalLoop in JS. I'm a bit confused by that - all the helper function needs to concern itself with is the overall bounds of the entire chunk containing all the boxes - it lets you position things however you want with CSS which is the thing that should control formatting/spacing anyway. Why do you think it belongs in the helper function? What if there's non-uniform spacing? The helper function shouldn't have anything to do with layout; it's purely about movement. Maybe I'm missing something? 1 Link to comment Share on other sites More sharing options...
inteltone Posted August 14, 2023 Share Posted August 14, 2023 @GreenSock You are right. I am a beginner so sometimes I can consider things in the wrong way(( Thanks for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now