How to create a slider or Carousel using CSS and JavaScript only

A slider or carousel is a great way to showcase your content. Whether you’re using it for an image gallery, or to display a list of items in a single row, sliders can be used in many different ways. Sliders are traditionally created with the use of flash or javascript. In this tutorial, we will explore how to create a slider from scratch using CSS and javascript!

What is a slider or carousel?

A slider or carousel is a visual component of websites that allows the visitor to scroll through content by moving from one slide to another. Sliders are typically vertical, but horizontal sliders do exist as well. They can be programmed with CSS and JavaScript or created using various plugins such as jQuery UI’s Draggable interface (jQueryUI-Draggable). Slides may contain images, text, and other types of media. Some have different effects when scrolling: some slides build up in their opacity while others zoom outwards on each new page.

Why you should use a slider or carousel on your website or blog post

  • Sliders carousels are great for showing off your content and making it more accessible to users on small screens
  • They’re also good because they can be very simple or complex depending on how you want them set up, which means that almost anyone should finally have a slider.
  • Sliders or carousels are also much more interactive than plain old images
  • Slider or carousel navigation is often faster and easier for users because they can use their mouse or arrow keys to scroll through content. This means that you don’t have to click on anything if the user wants access to all of your content.
  • Sliders or carousels can be used to tell a story and showcase different aspects of your content
  • Slider or carousel is very easy to add because it’s just some javascript and CSS
  • Too many people don’t realize the power that sliders have, but they’re great for showing off things like events or products!

*

How to create a slider using css and javascript?

The slider is a design element that can come in handy for some web pages. It contains images or words that slide across the page to give content variation and attract attention. In this article, we will show you how to create a slider using CSS and javascript.

First, we need to create a container that will contain the slider. It can be any div or section you want, just make sure it has an id attribute and is not displayed at page load:

  • For example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
    .carouselContainer{width: 90%; margin: 0 auto; position: relative;overflow: hidden; max-height: 400px;}
    .carouselContainer > h2{margin: 40px 0;}
    .slider{display: flex; min-height: 400px; width: 400%; display: flex; transition: 400ms;    justify-content: center;
    align-items: center; color: #fff;}
    .slider section{display: flex;flex-basis: 100%; justify-content: center; align-items: top;}
    .ctrlBtn{position: absolute;top: 50%;}
    .btnleft{left: 10px;}
    .btnright{right: 10px;}
    .txtCenter{text-align: center;}
    .carouselCotent{text-align: center;}
    .btn{padding: 10px 40px; border-radius: 20px; margin: 40px 0; border: none;}
    .slider:nth-child(1){background: linear-gradient(
0deg
, #151f2469, #151f2485), url(images/mahi-2.jpeg) no-repeat;
    background-position: 0,left -161px;
    background-size: 100vh,100vw;}
   
    </style>
</head>
<body>
    <div class="containerFluid bgDark">
    <div class="carouselContainer">
        <h2 class="txtCenter"> Lorem  <span class="txtRed"> dolor sit amet</span></h2>
        <div class="carousel">
            <div class="slider">
                <section>
                    <div class="carouselCotent">
                        <i class="fas fa-arrow-right"></i>
                        <h3>Lorem ipsum dolor</h3>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, eveniet!1
                    </div>
                </section>
                <section>
                    <div class="carouselCotent">
                        <i class="fas fa-arrow-right"></i>
                        <h3>Lorem ipsum dolor</h3>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, eveniet!1
                    </div>
                </section>
                <section>
                    <div class="carouselCotent">
                        <i class="fas fa-arrow-right"></i>
                        <h3>Lorem ipsum dolor</h3>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, eveniet!1
                    </div>
                </section>
                <section>
                    <div class="carouselCotent">
                        <i class="fas fa-arrow-right"></i>
                        <h3>Lorem ipsum dolor</h3>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, eveniet!1
                    </div>
                </section>
            </div>
            <div class="controlls">
                <div class="ctrlBtn btnleft"><i class="fas fa-arrow-left"></i></div>
                <div class="ctrlBtn btnright"><i class="fas fa-arrow-right"></i></div>
            </div>
            
        </div>
    </div>
</div>
</div>
    <script>
        const carsCotainer = document.querySelector('.carouselContainer');
        const slider = document.querySelector('.slider')
        var btnLeft = document.querySelector('.btnleft')
        var btnRight = document.querySelector('.btnright')
        const controlls = document.querySelector('.controlls')
        var slideIndex = 0
        btnRight.addEventListener('click',function(){
        slideIndex = (slideIndex < 3) ? slideIndex + 1 : 3;
        slider.style.transform = 'translate(' + (slideIndex) * - 25 + '%)'

        })
        btnLeft.addEventListener('click',function(){
        slideIndex = (slideIndex < 0) ? slideIndex + 1 : 0;
        slider.style.transform = 'translate(' + (slideIndex) * 25 + '%)'
    
})
    </script>
</body>
</html>
image slider | slider | carousel | how to create slider or carousel using CSS and javascript only

If you don’t want to use any kind of plugin or library for your website you can try the above code. In that code, you must adjust your background-position. The code is working fine for me. This code is created by me and tested on different screens.

You can also use plugins for your site. We suggest you to check these plugin for your website.

Slider plugins for WordPress, Joomla, Drupal, etc…

  • Flex slider – used in some of the most popular WordPress themes. Flex sliders are created using HTML and CSS with a little bit of javascript for their animations. This is an easy way to create your own custom responsive slider without having to go through too many hoops (and not needing any expensive plugins)
  • Nivo Slider – uses jQuery, which makes it more complicated than creating one in pure CSS/javascript but it’s also much more flexible. If you prefer JavaScript over hand-coding html+css then this might be a good fit for you.
  • Slider Revolution – it’s a premium plugin but you get what you pay for. If you’re looking for the best slider on the market then this is your best bet, although sliders created in pure CSS/javascript are often just as good and much cheaper to buy.
  • WP Content Slider – another popular WordPress theme that makes use of flex sliders (the same ones mentioned above) which can be resized and manipulated by dragging them around. These take up less space than other types of sliders like Nivo or slider revolution because they don’t allow text content inside them so if that’s something you want then WP Content Slider might be better suited for your needs.

Conclusion

I hope you enjoyed the tutorial and learned a few new things. If this topic interests you, please share with your friends who are also interested in learning about CSS or javascript to help others find out how they can create sliders too! Happy coding!

Also read : How to create Accordion using HTML CSS and JavaScript

Leave a Comment