How to make basic sliders without Elementor Pro

When we think of interactive elements in a website, sure we think of contact forms, surveys, quizzes and the like, but there are many more. One of them is the slider, an element that can also go by the names of carousel, slideshow or gallery and one that, to this day, divides the website design and development community into two; those who hate them and would like nothing more than to vanish them from existence and those who love it and cannot create a website without them.

What is a slider?

According to the website Usability Geek, a slider is:

A slider is a term that refers to a slideshow on a website. An example of a slider can be a revolving carousel that displays products or photos. Web designers can incorporate sliders into all kinds of sites, but they are most useful for businesses wanting to show relevant content or showcase professional portfolios.

We can also look at this more complete definition by Design Modo, that states that a slider is:

In essence, a website slider is just a carousel for displaying well-organized pieces of information one by one in a cycle. Its main constituents are:

• Container, a box that covers everything.
• Slide, a place where the content sits. Here you can add your piece of information: images, videos, titles, text, buttons, and much more.
• Navigation, a tool for guiding through the slides. It can be left and right arrows, plain “prev” and “next” located on the sides, or even classic music player-inspired controls that let people control autoplay and pause options.
• Pagination, aka additional navigation. It can be traditional bullets or numbers placed on the bottom of the box, or some modern solutions like a set of short lines arranged in a stack.

This type of interactive element has been seen throughout a lot of websites, mostly ecommerce stores where you have products that you want to show from different angles. WordPress’ very own ecommerce plugin, WooCommerce, implements a slider right off the bat when you add a new product with several images.

While this is one of the most common use cases for a slider in a website, it’s not the only one. There are a bunch of other websites that have used sliders to show various pieces of information, like travel websites to display their destinations, portfolio/personal websites to show the clients they’ve worked with or standard business websites to display testimonials in a nice neat way.

So, if sliders are so popular, where does the hate come from?

Do sliders suck?

If you look at this article from one of the most installed SEO plugins in the WordPress repository, Yoast SEO, you will find they have very strong opinions on the usage of sliders for website, citing that it has no value for SEO and that it probably makes your website slower by loading extra bits of Javascript.

And really if you look at the top results for sliders, you will come across a few blog posts hating on sliders because they make up for bad UX, and tend to lead to low conversion rates. And actually – speaking of conversion rates – one of the most prominent figures when it comes to conversions, Peep Laja, wrote a detailed article with tests and interviews from other conversion optimization experts that pretty much comes to the conclusion that sliders indeed, suck.

However, there are plenty of good reasons for using a slider, like mainly that not everything in your website has to be a conversion point. Sometimes, you can use parts of your website to help the user go along for the journey.

We talked about having sliders implemented on ecommerce stores, and on that subject, think of no other than Amazon. Yeah, the huge ecommerce store that we use pretty much everyday to buy things online. They have several sliders implemented throughout their products pages, don’t they? The one in the “Customers who bought this item also bought” is one that comes to mind:

The article from Design Modo that was mentioned above also lists several good reasons as to why sliders are good on a website. And there is another one from Webflow that explains the when and where to use a slider, along with the best practices.

But this isn’t really an article to debate whether or not sliders are good for your website. One thing that needs to be clear in website design is that a website is never finished, you always have to keep on testing new stuff and updating it to stay on top of newest trends and to improve its functionality.

This article is about teaching you how to create sliders without Elementor Pro or for when you do have a Pro license, but want something more custom than their slider-based widgets.

Ok, so how can I make a slider without Elementor Pro?

Maybe that rundown or explanation about sliders got a little too lengthy for your pleasure, but I can promise you the tutorial is actually way shorter, because to develop sliders on your website we only need one simple tool: A Javascript library called Swiper. This library is actually used by Elementor Pro and we’re going to take advantage of all of its features to organize our information in a pretty neat way with a killer visual slider.

The first thing we’re going to do is to open up our Elementor in whatever page, post or template that we want to insert a slider.

Then we’re going to head to the SwiperJS website and click on “Get Started”. On that page, we’re going to scroll down to the part where it says “Use Swiper from CDN”:

While still on the getting started page, we then scroll down to where it says “Add Swiper HTML Layout”:

We now have like a basic skeleton we can work with. The next step will be to copy and paste everything in your HTML widget following this structure:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

If you don’t follow that, then the slider will probably not work for your site.

After you have that in place you have to start using the features from the library in your script. They make it really easy by adding demos and all the stuff so that you just have to copy and paste. For our example in question, this is the code you would have to write after the second <script></script> tag:

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

This is pretty much it, with this information you can already start creating basic sliders without Elementor Pro. What can you do now? Well, their demos page has a bunch of sliders with different functionalities that you can take a look at and use the code they provide by clicking on the “Core” link that is above each demo.

*If you have Elementor Pro, there is another article I have on this blog about making amazing sliders with Elementor. Feel free to check that out as well.

You can also take a look at the following amazing sliders created by users on Codepen:

See the Pen
Swiper JS – Demo by ysw (@swmj)
on CodePen.

See the Pen
Responsive Slider and Carousel with Swiper.js by Syahrizal Dev (@syahrizaldev)
on CodePen.

See the Pen
Coverflow Slider with Swiper.js by digistate (@digistate)
on CodePen.