Help to add features to slider

[AlePeace]

Hi guys, i'm trying to achieve the feature of the slider that is in the prime video website. In a few words, the slides that are at the very right of the page, when they expand, they remain in the viewport and move the previous slide back. I don't know if i make it clear. Can you help me find a solution??. Thanks a lot

See the Pen zYQRmma by Alessandro-Sparano (@Alessandro-Sparano) on CodePen

[Rodrigo]

Hi,

 

That mostly seems related to finding the element with the mouse interaction and position the slides correctly in order to expand/contract them and make the expanded one fully visible.

 

Maybe this demo by @Carl can provide some inspiration:

See the Pen YzGpXWO by snorkltv (@snorkltv) on CodePen

 

This is a not the simplest thing to achieve since there are a lot of factors that come into play in terms of HTML/CSS and JS logic as well. Unfortunately we don't have the time resources to provide general consulting or create custom demos for our users, is beyond the help we can give in these free forums. We offer paid consulting services and you can post in the Jobs & Freelance forum in order to get help there if you want.

 

Happy Tweening!

[AlePeace]

Hi Rodrigo, thanks a lot. This codepen demo seems what i’m looking for, i mean in my case i think i don’t need the if else, because i used mouse enter and leave for play and reverse the animation, but this pen seems exactly what i’m looking for, thanks for the help, sorry if maybe i asked too much , but it’s not my intention, this demo is certanly inspiring me, thanks. 🤗

[Rodrigo]

1 hour ago, AlePeace said:

but this pen seems exactly what i’m looking for, thanks for the help, sorry if maybe i asked too much , but it’s not my intention, this demo is certanly inspiring me, thanks.

No problem, we'd love to help as much as possible, but is a matter of not having enough time to provide that for all our users. We love challenges as much as the next person, but it would be impossible to have enough time to go through all the issues of all our users and come up with amazing demos and solutions for their issues and needs. That being said if you run into any issues in this or any other project, please don't hesitate to ask in the forums, we're always here to help as much as we can.

 

Happy Tweening!

[Hideakimaru]

Hi there!

 

So I’m not sure but this looks like than you try to move some parent. That could be reason why the content has issues.

I have small demo for you. This demo without gsap. But this could be helpful  maybe.

See the Pen JjqeJoY by Hideakimaru (@Hideakimaru) on CodePen

 

Ok follow this simple steps and I hope you will find the solution:

1. The main idea you should to have parent of your slider and it should have overflow.

|parent|
2. The content should have something like way parent for blocks witch will be move with for example transform: translateX(-contentWidth px)

Something like this:

|—-|way parent|—-| - in main parent.

3. Then you can add content to your way parent also you could make the content on full width with flex-shrink: 0 on children or with max-width.

This should looks like:

|—|[ 1 ]-[ 2 ]-[ 3 ]|—|
 

But because you will be use overflow hidden on the main parent this should be something like this.

|[ 1 ]| - hidden content not in viewport [ 2 ] [ 3 ].

4. In general you should to move the “Way Parent” not main and not children content. By X or Y.

5. The content as video should be as children too. With the same parameters as all children’s.

6. You could move the “Way parent” of slider with anything what you want. This could be gsap, js, css, e.t.c.

7. Also this could be not only something like this. You can add overflow : scroll on the parent for example. And move with scrollTo() to pointers by the scroll-snap.

 

Hope this could help to find the solutions.

 

Thanks, 

Hideakimaru

 

 

[AlePeace]

Hey Hideakimaru, thanks for the explenation, this seems a lot of dedication, thanks for the time you spent, i surely, try to understand which part i can integrate with mine, and let you know if i try to achieve my feature. Thanks again 😊