Full screen slider with video and images

[ThePixelPixie]

I only have jpg mockups of the general idea that I'm wanting to go for here (kind of shown in the image underneath the main div of the the Codepen). Not really sure where to start. I went through a YouTube demo (which went way too fast, and I'm sure I have some issues with syntax causing it to not work properly - original video is referenced in that Codepen HTML), but it's not really what I'm after.

 

So, in desktop size, I want to start with a full-screen video. When the user clicks a "next" button, two portrait-oriented images will slide in on either side (so now the video takes up the center third - cropped left/right), each taking up a third of the width of the screen. Next click, the video will fade out and be replaced with another image in it's place. Another click, that center image opens up full width (the two side images would go away). Click, and it would transform into a 6-box grid, and one of the boxes would have another video in it. Final click, and the box with the video would expand to full screen. I haven't yet worked out how it should all go in mobile, but if I can get this figured out, that shouldn't be too difficult. If it can't be done to include video snippets, all images will be fine (it's what I have available right now anyhow).

 

If you can even point me in the direction of any examples that start to do some of this, that would help me loads.

 

 

See the Pen eYMqxja by ThePixelPixie (@ThePixelPixie) on CodePen

[Cassie]

Hi there!

 

This is super specific so there's not really any any examples that I can think of.

 

There are a lot of steps here. If I were you I would just start at the beginning. I know that sounds obvious, but you've got a good list of steps, which is what I usually recommend people write up first! So start breaking them down into manageable chunks.

Here's what I see as the first 'chunk'

 

1. Add a full-screen video

2. Add next button

3. Position two images absolutely on top of the video

4. When button is clicked animate images in

 

That's a good starting point. Why don't you attempt that and check back in here if you get stuck?


 

[ThePixelPixie]

@Cassie Thank you! That's actually pretty helpful. Sometimes, with my ADD, I just need to have those first steps outlined for me so I can actually *start*. LOL

[Cassie]

I'm the same ☺️

[ThePixelPixie]

Ok. Let's see if I'm getting anywhere. I've built all the different elements here:

See the Pen LYdwaad by ThePixelPixie (@ThePixelPixie) on CodePen

 

But I'm not sure how to control individual elements within the parts with each next/prev click. Like, on the first "next" click, I want the first "part" to stay, but the next part elements (.second & .third, respectively), to slide in from the top (.second) and the bottom (.third). Then on the third click, fade .first out and fade in .fourth behind .second & .third, etc. This probably all looks like complete gibberish. I'm so sorry.

[Cassie]

Just sounds like you need some logic! We can't really help with that. it's a bit above and beyond the help we offer here, but I'd approach the count a little like this and then call a function with a bunch of custom logic in...

 

See the Pen vYjBJzq?editors=0011 by GreenSock (@GreenSock) on CodePen

 

I think one of the main mistakes is trying to make code too clever before it works, Don't worry about trying to grab a target with a count value for now. Just write a bunch of if statements and just grab the elements with classes. 

 

if we're on the third slide and the person presses forward then... write a timeline for that

 

else if we're on the third slide and the person presses back then... write a timeline for that

 

Make it work first, then tidy it up!