In this video from the course, you’ll learn how to create a popular component—a carousel of revolving tweets—using the lightweight Siema script. The techniques you’ll learn will help you to achieve great performance without using AMP.
How to Create an Optimized Twitter Carousel
This video picks up from previous lessons in the course, in which we created a website with three tweets embedded at the bottom of the page. You can find the full source code for the project on GitHub. 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 element. But instead, we’re going to use a cool little script called Siema.
Siema ticks all the boxes that we’re looking for with our scripts:
It’s a small file size.
We can load it asynchronously.
It doesn’t have any dependencies.
We already added Siema to our index.min.js script earlier when we set up our file, and it has already been loaded in our pagecontent.html file, so it’s ready for us to use.
Create the Basic Carousel
All we need to do is add a little code in pagecontent.html to activate our script.
What we are doing here is creating a constant, and naming it mySiema. We’re setting that constant equal to a new instance of Siema, and then we’re adding an object with some parameters.
Inside the curly brackets, we add the property’s selector, and we nominate the selector that Siema should look for to make a carousel out of its children. Earlier we added the class .slides containing the tweets, so if we target this with Siema, it’s going to take each one of our tweets and turn it into a slide that’s in our carousel.
If you check the site now, you should see the first tweet displayed as a slide.
It’s not displaying the others, though, because we need to add a little extra code to make the carousel auto-play.
Make the Carousel Auto-Play
To make the carousel auto-play, we need to modify our code as follows:
What we’re doing here is telling Siema how long we want it to wait in between each of our slides. So on the last line, we set the interval with setInterval, and then the rest of that line tells Siema that we want the interval between each slide to be 4,000 milliseconds, or 4 seconds.
While we’re at it, we also need to tell Siema that we want it to loop. So we do that with the line loop: true.
Now, the carousel will automatically go from one slide to the next, waiting four seconds in between, and then it will loop back to the start.
Add Navigation Buttons
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 need to do is add a little extra HTML in the same file. Add the following snippet 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.
This code simply adds two SVG shapes: a little triangle that points off to the left, and a little triangle that points off to the right.
Because we don’t have to load in an image, that gives us an even faster load time, and the file size of this little bit of code to set up an SVG shape is incredibly small.
You can see that 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 going to target with Siema, telling it to treat those buttons as the forwards and backwards buttons for the carousel.
In this code, we’re adding a document query selector and then specifying the selector that we want to look for, which is the class prev. Then we add an event listener, and the event that we want to listen for is click.
So now when somebody clicks on that button on the left, we are going to trigger an action, and the rest of the line sets up what that behavior is for the button on the left side.
Then, in the next line, we do the same thing with the button on the right side, only this time we replace prev with next.
And now, if we check our site, we can see the previous and next buttons, and if we click them, we can proceed through the carousel however we please.
So we can fix that by going to our noscript.css style sheet and adding:
Watch the Full Course
In the full course, Optimize Your Website Without AMP, you’ll learn how to take an existing AMP-based site and convert it to use non-AMP equivalents. The course will give you useful methods to make your sites run blazing fast, but with optimization techniques that you decide on for yourself.
You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.
Plus you now get unlimited downloads from the huge Envato Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.