How To Make Simple Carousel Slider On Your Website

Carousel is a format that can be used to display multiple objects in one container. In practice, the carousel is used to display products, images, and testimonials on the website or application.

The carousel model itself varies with various interesting animations, for example, sideways slides that are often found on public websites. Then, how do we Make Simple Carousel Slider On Any Platform HTML only using html, css, and js?

Make a container for simple carousel slider items

Here we will try to make a simple carousel slider with a sideways movement. In theory, the movement of an element sideways is a collection of elements that are arranged sideways and can be shifted by certain actions. So, we will create a container that holds several elements.

<div class="container">
         <img id="first-image" src="assets/material1.jpg">
         <img src="assets/material2.jpg">
         <img src="assets/material3.jpg">
         <img src="assets/material4.jpg">
         <img src="assets/material5.jpg">
         <img src="assets/material6.jpg">
         <img src="assets/material7.jpg">
</div>

The code creates a container that holds multiple image assets as carousel items. After that, we need to create styling to make the carousel items form rows.

Styling container carousel to create row.

We can use the flex option in css so that the container holds items in line form like this.

<style>
      .container {
            width: 90vw;
            height: 90vh;
            margin: 5vh 5vw;
            display: flex;
     }
      .container img{
            width: 100%;
            height: 100%;
            margin-right: 5vw;
     }
</style>

This code will create a container with a size of 90% screen width and 90% screen height with a margin of 5% each. With the image items in the container having a size of 100% the size of the container, and having a gap for each item of 5% screen width.

However, the code will still display the next item that exceeds the container size. To hide these items you can add "overflow: hidden" to the container class.

For another example display flex, you can find it on w3school

Make calls to action next and prev

Here we will use basic javascript to make the action of shifting the items displayed in the container using the eventListener command. Before that, we will add a button that will be used to trigger the action inside the container.

<svg id="back" enable-background="new 0 0 492 492" version="1.1" viewBox="0 0 492 492" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m198.61 246.1 184.06-184.06c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12c-5.06-5.072-11.824-7.864-19.032-7.864s-13.964 2.792-19.028 7.864l-219.15 219.14c-5.084 5.08-7.868 11.868-7.848 19.084-0.02 7.248 2.76 14.028 7.848 19.112l218.94 218.93c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06l-183.85-183.85z"/></svg>
      <svg id="next" enable-background="new 0 0 492 492" version="1.1" viewBox="0 0 492 492" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m198.61 246.1 184.06-184.06c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12c-5.06-5.072-11.824-7.864-19.032-7.864s-13.964 2.792-19.028 7.864l-219.15 219.14c-5.084 5.08-7.868 11.868-7.848 19.084-0.02 7.248 2.76 14.028 7.848 19.112l218.94 218.93c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06l-183.85-183.85z"/></svg>

The code is an arrow icon in SVG format that will be used for the call to action button and place it in the container. After that, we will make the styling button appear in accordance with its function.

#back {
       position: absolute;
       width: 5vw;
       margin-top: 35vh;
       cursor: pointer;
}
#next {
      position: absolute;
      width: 5vw;
      right: 5vw;
      margin-top: 35vh;
      transform: rotate(180deg);
      cursor: pointer;
}

This style makes the arrows have a height and width of 5% of the screen width. Then, we will create an action with a javascript function.

<script type="text/javascript">
            var back = document.getElementById('back');
            var next = document.getElementById('next');
            var count = document.getElementsByTagName('img').length;
            var slide = 0;
            back.addEventListener("click", function(){
                slide-=1;
                if(slide < 0){
                    slide = 0;
                }
                document.getElementById('first-image').style.marginLeft = "-"+ slide*95 + "vw";
            });
            next.addEventListener("click", function(){
                slide+=1;
                if(slide == count){
                    slide = 0;
                }
                document.getElementById('first-image').style.marginLeft = "-"+ slide*95 + "vw";
            });
</script>

Simply put, every click on the button with the id next will add value to the slide variable which is used as a marker for the item that appears. then change the margin-left style for the item with the id "first-image".

The value of "slide * 95" depends on the styling of the container as well as the items in the container. because I use a container with a size of 90% of the screen width and a gap per item of 5% of the screen width, to display the next item completely it will require -95% of the screen width of the first item shift. so is the button with the id back.

For javascript DOM, you can glimpse at w3school because I only use basic syntax in this tutorial.

To add a transition effect, you can add a transition style to the item. You can see other interesting things in our stories.

pure mathematics, in its way, the poetry of logical ideas

Albert Einstein
Share This Article

You Might Want To Read

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow-right