7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.5 Add Carousel

In the AMP version of the site we’re recreating, we used AMP’s amp-carousel element to take our embedded Tweets and turn them into a carousel. In this lesson, we’ll be implementing a script of our choice to create an optimized carousel instead.

Related Links

3.5 Add Carousel

Welcome back to Optimize Your Website Without AMP. In our last lesson, we embedded three tweets down at the bottom of our page, and in this lesson, we're going to turn those three tweets into a carousel. In the AMP version of our site, that was done with the AMP carousel, custom elements. But we're gonna be using this cool little script called Siema. That Siema takes all the boxes that we're looking for with our scripts. It's light, It's a small file size. It's simple we can load asynchronously and it doesn't have any dependencies. We already added Siema to our index.min.js script earlier, when we set up our file and that has already been loaded in here so it's ready for us to use. All we need to do is add a little code down here to activate our script. So the way that we do that Is by creating a constant and we're gonna name it mySiema. We're gonna set that equal a new instance of Siema. And then in here, we're gonna add object with some parameters. So, we're gonna put a pair of curly brackets in here. We'll just make a space, make it a little bit easier to work with and now we need to add the property's selector and we need to nominate the selector that Siema should look for to then make a carousel out of its children. So we added this class slides in here. So if we target this with Siema, then it's gonna take each one of our tweets here, each one of these block quotes, and turn it into a slide that's in our carousel. So we want our selector to equal and we put a colon, .slides, so because our html is already set up that should be everything we need to get the basic carousel up and running. Now I found with the script you do have to hit the refresh button to get it to reload properly. So now you can only see one of the slides. The other three are all in the wings waiting to be shown through here. We want this carousel to auto play so we're just going to add a little extra code. We're gonna tell it how long we want it to wait in between each of our slides. So we're gonna say setInterval. And then we're gonna put another pair of brackets in here, and we're gonna put equals, greater than, mySiema.next 4,000. So, what that's doing is just telling Siema that we want the interval between each slide to be 4,000 milliseconds or four seconds. And then while we're at it, we'll also tell it that we want it to loop. So, add a comma and it will put in loop true, all right, so there we go. Now that is automatically going from one slide to the next, and as I mentioned, it does get a little funky if you don't refresh it properly. So it's going through one slide to the next, it's waiting four seconds in between, and now it's going to loop back to the start. All right, now there is still another thing missing, and that is some little buttons that we can use to manually go forward or back in our carousel. So to set up our buttons, the first thing that we're gonna need to do is add a little extra HTML here. What we want to do is add some buttons inside the Twitter carousel div, but outside the slides div, because we don't want Siema to treat these buttons as slides that need to be put into the carousel. Now, the way that we're going to create these buttons is with some directly embedded SVG shapes and the code for these is very efficient. I'm just going to paste this in because it's not really something you can type in manually in SVG shape. So this little bit of code here is a necessary g shape, and that's just gonna create a little triangle that points off to the left, and this is gonna create a little triangle that points off to the right. So that's great, we don't have to load in an image for that, that gives us even more fast load time, and the file size of this little bit of code to set up an SVG shape, Is incredibly small. You notice here we've got the class name prev on the first of our buttons and then next on the second one. And those are the classes that we're gonna target with Siema and tell it to treat those buttons as the forwards and backwards buttons for the carousel. So we're going to use a little Javascript to find those elements in our code. This is where you might have been used to working with j-query, but of course we're avoiding using j-query in our site so that we don't have that additional code to load in. Instead we're going to use document query selector. And then we're gonna put a set of brackets in here and then we're gonna specify the selector that we wanna look for. Which in this case is the class prev. Now we are going to add an event listener. So I'm gonna say, add event listener, I'm just gonna end that line. The event that we wanna listen for is click. So now when somebody clicks on that button on the left we are gonna trigger an action so we're gonna put a set of empty brackets and then we're gonna put equals, greater than, my siema, prev. So then that sets up the behavior for the button on the left side. And we're gonna do the same thing with the button on the right side only this time we're gonna replace prev with next. All right, so let's check out what we've got. Once again, we'll give this a full refresh and there we go. There's our previous and next buttons and so if we click them, we can proceed through the carousel however we please. And there's only one little bit of extra code that we need to add in. And that is because right now, if we turn off JavaScript, we have our nice little block quotes as our fallbacks, but we have these useless buttons here now. So in our no script style sheet, we just wanna target the carousel button class that we have here, so I'm gonna grab that and just set that to display none. We'll refresh and there we go, that gets rid of the buttons. So now our full set of JavaScript fallbacks are all in place, we've got our font face fall backs. We've got our lazy loading image fallbacks in place. Our just informative messages about the things that just absolutely can not work without JavaScript. Our gallery works just fine and we've got our little set of embedded tweets. And if we turn JavaScript back on we've got our whole optimized site with everything that was in our AMP site it's all there. We have the same functionality even a little bit extra sometimes because we have the ability to create a gallery with this ability to page through. And now if we check out our load speed, And there's our time, 1.71 seconds and we'll compare it to the AMP version of our page. Which is 2.05 seconds and you'll get a lot of fluctuation when you do these speed tests. So what you wanna do is a heap of them. Sometimes you'll find your speed test is coming in at three seconds, sometimes it'll be one second. So you really need to do quite a lot of them to average out your results and make sure that you really are getting the speed results that you think you are. The main thing that you want to establish when your doing this type of optimization is that you are getting load times that are comparable to the benchmark that's sorta set by AMP. If you are, then you know that your optimization's doing just fine. All right, so that wraps up the coding phase of our course. We just have one more quick video where I wanna cover some optimization techniques that you ought to be employing that have nothing to do with how your site is coded and everything to do with how you get it out there on the web. And these are things that Amp does as part of its whole setup. So if you really wanna get results as good as working with Amp, then these are things that you need to consider using as well. So we're gonna go through those in the next and last lesson. I'll see you there.

Back to the top