www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

How to Create an Optimized Twitter Carousel Without AMP

In my course, Optimize Your Website Without AMP, I showed you in detail how to optimize your website for lightning-fast performance without using Google’s AMP.

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

//fast.wistia.com/assets/external/E-v1.js

 

Introducing Siema

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 light. 
  • It’s a small file size. 
  • It’s simple.
  • 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. 

The screenshot below shows where to insert it:

Siema script for carousel

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. 

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.

Code to add navigation buttons

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. 

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 jQuery, but of course we’re avoiding using jQuery in our site so that we don’t have that additional code to load in. Instead, we’re going to modify our code by adding two new lines so that it looks like this:

New code to make the navigation buttons work

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.

Carousel with previous and next buttons

Create a JavaScript Fallback Version

Now there’s only one little bit of extra code that we need to add in. In the course, we’ve been creating a version of the site for people who have JavaScript turned off in their browsers. But right now, if we turn off JavaScript, we have our nice little block quotes as our fallbacks, but we have these useless navigation buttons here now. 

JS fallback with nav buttons

So we can fix that by going to our noscript.css style sheet and adding:

Now, when we refresh our site with JavaScript switched off, we can see that we’ve got rid of those buttons.

JS fallback version with no nav buttons

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.