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.

How to Create an Optimized Twitter Carousel Without 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

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.

const mySiema = newSiema({
selector: '.slides'
});

The screenshot below shows where to insert it:

How to Create an Optimized Twitter Carousel Without AMP

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.

How to Create an Optimized Twitter Carousel Without AMP

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:

const mySiema = newSiema({
selector: '.slides',
loop: true
});
setInterval(() => mySiema.next(), 4000)

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.

How to Create an Optimized Twitter Carousel Without AMP

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:

How to Create an Optimized Twitter Carousel Without AMP

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.

How to Create an Optimized Twitter Carousel Without AMP

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.

How to Create an Optimized Twitter Carousel Without AMP

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

.carousel-button {
    display: none;
}

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

How to Create an Optimized Twitter Carousel Without AMP

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 ThemeKeeper 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 ThemeKeeper Tuts+.

Plus you now get unlimited downloads from the huge ThemeKeeper Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.