Forem: Ayobami Ajayi

Vanilla JavaScript: How to Create a Draggable Slider with Auto-Play and Navigation - Part Two

Ayobami Ajayi — Tue, 17 Oct 2023 15:21:00 +0000

A draggable slider enables users to scroll through its contents by dragging with a mouse or a similar input device, enhancing user interaction and information-sharing efficiency.

Moreover, when implementing draggable sliders on mobile devices, it’s common to provide alternative navigation methods like swiping. This approach ensures a smooth user experience across various devices.

With that in mind, this article explains how to implement the following features for our slider using plain HTML, CSS, and JavaScript:

Autoplay functionality
Dragging option for non-mobile devices
Swiping option for mobile devices.

Codepen here:

This article also serves as a sequel to my previous piece on this topic, where I extensively covered the HTML and CSS aspects. Although I’ll provide the starter code (HTML and CSS) here, I recommend reviewing the prior article to ensure we’re on the same page.

Prerequisites

To get the most out of this article, you should have:

A basic understanding of HTML and CSS.
A basic understanding of JavaScript and DOM manipulation.

Setting Things Up

Paste the following HTML and CSS codes in your editor to get started.

The HTML

In the body element, we’ll create a slider section to showcase our slides. This container will include:

Four unique radio inputs, one for each slide.
A ul with the class slides-flex containing four li elements. Each li represents an individual slide and carries the class slide.
A div with the navigation class housing four label elements. Each label element is linked to one of the radio inputs described earlier and has a unique class and an id ranging from 1 to 4.

<body>
    <section class="slider">
      <!-- radio buttons start -->
      <input type="radio" name="radio-btn" id="radio1" checked />
      <input type="radio" name="radio-btn" id="radio2" />
      <input type="radio" name="radio-btn" id="radio3" />
      <input type="radio" name="radio-btn" id="radio4" />
      <!-- radio buttons end -->
      <!-- slides start -->
      <ul class="slides-flex">
        <li class="slide">
          <h2>1</h2>
        </li>
        <li class="slide">
          <h2>2</h2>
        </li>
        <li class="slide">
          <h2>3</h2>
        </li>
        <li class="slide">
          <h2>4</h2>
        </li>
      </ul>
      <!-- slides end -->
      <!-- navigation start -->
      <div class="navigation">
        <label for="radio1" class="btn1" id="1"></label>
        <label for="radio2" class="btn2" id="2"></label>
        <label for="radio3" class="btn3" id="3"></label>
        <label for="radio4" class="btn4" id="4"></label>
      </div>
      <!-- navigation end -->
    </section>
  </body>

The output:

With the HTML structure in place, let’s add in some styling.

The CSS

Here we’ll:

Center our slider using CSS grid.
Hide the radio inputs.
Style .slider as our container with responsive dimensions and relative positioning.
Use flexbox to horizontally arrange .slides-flex and add absolute positioning to enable smooth sliding within .slider.
Ensure each .slide fills the entire container’s width, displaying only one slide at a time.
Style navigation labels to mimic radio inputs.
Utilize the :checked pseudo-class to adjust .slides-flex’s position and change navigation label backgrounds based on the selected radio input.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primaryColor: #333;
}

body {
  display: grid;
  height: 100vh;
  place-items: center;
  background-color: rgb(208, 230, 249);
  font-family: "Poppins", sans-serif;
}

ul {
  list-style: none;
}

.slider {
  position: relative;
  width: 80%;
  aspect-ratio: 1;
  max-width: 50rem;
  max-height: 31.25rem;
  border-radius: 0.7rem;
  overflow: hidden;
  cursor: grab;
}

.slider input {
  display: none;
}

/* SLIDES */
.slides-flex {
  position: absolute;
  left: 0;
  width: 400%;
  height: 100%;
  display: flex;
  transition: 0.8s;
}

.slide {
  width: 25%;
  display: grid;
  place-items: center;
}

.slide:nth-child(1) {
  background-color: #fed050;
  border-radius: 0.7rem 0 0 0.7rem;
}

.slide:nth-child(2) {
  background-color: #7fdbee;
}

.slide:nth-child(3) {
  background-color: #4cf89c;
}

.slide:nth-child(4) {
  background-color: #f79191;
  border-radius: 0 0.7rem 0.7rem 0;
}

.slide h2 {
  user-select: none;
  color: var(--primaryColor);
  height: 5rem;
  width: 5rem;
  font-size: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  outline: 3px solid;
}

/* NAVIGATION */
.navigation {
  position: absolute;
  user-select: none;
  width: 100%;
  bottom: 2.5rem;
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.navigation label {
  border: 2px solid var(--primaryColor);
  padding: 0.3rem;
  border-radius: 50%;
  cursor: pointer;
  transition: 1s;
}

/* ON RADIO CHECKED */
#radio1:checked ~ .slides-flex {
  left: 0%;
}

#radio2:checked ~ .slides-flex {
  left: -100%;
}

#radio3:checked ~ .slides-flex {
  left: -200%;
}

#radio4:checked ~ .slides-flex {
  left: -300%;
}

#radio1:checked ~ .navigation .btn1 {
  background: var(--primaryColor);
}

#radio2:checked ~ .navigation .btn2 {
  background: var(--primaryColor);
}

#radio3:checked ~ .navigation .btn3 {
  background: var(--primaryColor);
}

#radio4:checked ~ .navigation .btn4 {
  background: var(--primaryColor);
}

The output:

With the setup complete, let’s proceed to the JavaScript portion.

Selecting DOM Elements

Our first task is to select the HTML elements we’ll work with and assign them to variables using the querySelector method:

const slideContainer = document.querySelector(".slider");
const slideFlex = document.querySelector(".slides-flex");
const navigation = document.querySelector(".navigation");

IIFEs

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that executes as soon as it is defined. Its typical syntax is:

(function (){
  // some code
})()

IIFEs establish a private scope, thereby preventing the issue of namespace pollution.

Namespace pollution occurs when global variables or functions lead to conflicts in your code, especially within large projects.

To address this issue and promote code reusability, we’ll create an IIFE named slider. This function will take our selected elements as arguments and encapsulate the remainder of our code:

(function slider(container, slideFlex, navigation){
  // our code
})(slideContainer, slideFlex, navigation)p

Setting Initial Values

In the slider IIFE, we’ll define initial variables that we can access and modify later in our code:

let initialX,
    finalX,
    leftPos = -100,
    isDragging = false,
    slideDistance,
    interval = null,
    slidesWidth = slideFlex.offsetWidth,
    numberOfSlides = slideFlex.childElementCount,
    counter = 0,
    threshold = 40;

These variables serve the following purposes:

initialX: Stores the user’s initial horizontal position when clicking or tapping.
finalX: Stores the user’s final horizontal position after dragging or swiping.
leftPos: Initialized at -100. We’ll use this value to adjust the left property of slideFlex in the CSS, either by addition or subtraction, to shift the slides.
isDragging: Keeps track of user intent, set to false when not dragging and true when the user intends to drag.
slideDistance: Stores the horizontal distance of swipes or drags within the slider.
interval: initialized at null to avoid interval conflicts. It will store the returned interval ID of our upcoming setInterval() function.
slidesWidth: Monitors the current width of slideFlex in pixels.
numberOfSlides: Determines the number of slides within slideFlex.
counter: Keeps track of the currently displayed slide. Starts at 0 and ends at numberOfSlides - 1.
threshold: Initializes at 40, representing the minimum swipe or drag percentage required for a slide switch.

Setting Event Listeners

Event listeners are functions that respond to user events or interactions on a specific HTML element.

In this section, I’ll outline the various event listeners that enable user interaction with our slider.

Initiate interval

document.addEventListener("DOMContentLoaded", createInterval);

In the above code, we attach an event listener to the entire webpage using the document object. This listener responds to the “DOMContentLoaded” event, which indicates the full loading and parsing of the HTML document.

As a result, this event listener ensures that all page elements are available and accessible before the associated function executes, thereby enhancing webpage performance.

The listener triggers the callback function, createInterval, which, in turn, enables the autoplay feature.

Mouse events

container.addEventListener("mousedown", dragStart);

Here, we attach a “mousedown” event listener to the container argument, which serves as our slider container.

The “mousedown” event activates when the user presses a mouse button. It signifies the user’s intent to initiate a drag action and subsequently triggers the dragStart function to handle this interaction.

Touch events

Touch and mouse events share many similarities, but significant differences affect how they interpret user interaction.

Notably, touch events always target the element initially tapped, whereas mouse events target the element currently under the cursor.

This distinction becomes especially evident during “touchmove” and “mousemove” events. “touchmove” continues to trigger even when the touch moves outside the element, whereas “mousemove” ceases as soon as the mouse pointer exits the element’s boundaries.

To ensure consistent behavior for our slider on both touch and mouse-based platforms, we must adjust our event listeners accordingly:

container.addEventListener("touchstart", dragStart);
container.addEventListener("touchmove", dragging);
container.addEventListener("touchend", dragStop);

In this code, we attach three distinct event listeners to the container element:

“touchstart”: Activates when users touch the element and triggers the dragStart callback function.
“touchmove”: Activates when users swipe along the element and triggers dragging.
“touchend”: Activates when the user stops touching the screen and triggers dragEnd .

If you’re curious about the mouse-based alternatives to our “touchmove” and “touchend” events, remember that we aim to avoid sudden interruptions when the mouse pointer exits the element’s boundaries. To achieve this, we must connect the “mousemove” and “mouseup” event listeners to the entire webpage.

However, it’s essential to declare these mouse-based listeners only after the user has initiated a drag action. Therefore, we’ll incorporate the additional listeners within dragStart .

Functions and Callbacks

In JavaScript, it’s considered best practice to modularize your code. Hence, we’ll break our code into separate functions, each responsible for distinct tasks.

In this section, I’ll outline the various functions and callback functions used in our slider.

moveSlide()

As its name suggests, this function is responsible for shifting the slides. The code for this function is as follows:

function moveSlide() {
    slidesFlex.style.left = `${leftPos * counter}%`;
    document.getElementById("radio" + (counter + 1)).checked = true;
  }

The function:

Updates the position of slidesFlex by multiplying leftPos (-100) with the current value of counter.
Checks the radio input at that position, so we know what slide we’re on.

animate()

This function automates slide shifts, and calling it repeatedly enables the autoplay feature. Here’s the code:

function animate() {
    counter++;
    if (counter > (numberOfSlides - 1)) {
      counter = 0;
      slidesFlex.style.transition = "none";
    } else {
      slidesFlex.style.transition = "0.8s";
    }
    moveSlide();
  }

The function:

Increments counter to move to the next slide, and resets it when it reaches the last slide.
Adjusts the transition time of slides between the last and first slide to provide smoother motion for a better user experience.
Calls moveSlide() to shift the slides.

createInterval()

This function establishes the interval that repeatedly calls our animate() function. Here’s the code:

function createInterval() {
    if (!interval) {
      interval = setInterval(animate, 5000);
    }
  }

The function:

Checks that another interval isn’t running before proceeding.
Utilizes the setInterval() function to call animate() every five seconds.

At this point, we’ve successfully implemented the autoplay feature, causing our slides to switch automatically every five seconds:

dragStart()

This callback function triggers when a user interacts with the container. It has a dual purpose, managing manual navigation and initiating slider dragging. Here’s the code:

function dragStart(e) {
    clearInterval(interval);
    interval = null;

    // handling manual navigation
    if (navigation.contains(e.target)) {
      counter = e.target.id ? parseInt(e.target.id) - 1 : counter;
      slidesFlex.style.transition = "0.8s";
      moveSlide();
      createInterval();
      return;
    }
//initiating drag action
    e.preventDefault(); // for touchscreen defaults

    // sliding animation
    slidesFlex.style.transition = "0.5s";
    container.style.cursor = "grabbing";
    document.body.style.cursor = "grabbing";

    clicked = true;

    if (e.type == "touchstart") {
      initialX = e.touches[0].clientX;
    } else {
      initialX = e.clientX;
      document.onmousemove = dragging;
      document.onmouseup = dragStop;
    }
  }

The function accomplishes the following:

Clearing Autoplay Interval: The function starts by clearing any existing interval and setting it to null. This action prevents conflicts between the autoplay and user-initiated dragging.
Manual Navigation Handling: When a user interacts with the navigation elements, the function:
1. Updates counter to the id of the clicked label element, if available.
2. Adjusts the transition timing of slidesFlexto 0.8 seconds for a smoother transition effect.
3. Calls the moveSlide() function to shift the slides to the selected position.
4. Calls createInterval() to resume autoplay.
Dragging Functionality Handling: In the case of dragging, the function:
1. Prevents default touch events to ensure the slider functions as intended on touchscreen devices.
2. Adjusts the transition timing to 0.5 seconds for a more responsive sliding effect.
3. Changes the cursor style of the container and the document to “grabbing” to indicate a dragging action.
4. Updates clicked to true, signifying the user’s intent to drag the slider.
5. Updates the initialX to the current horizontal position of the user (clientX). On touchscreen devices, it first accesses the touches property, an array of touch points, and uses touches[0] for the first touch point on the element.
6. Declares event listeners for “mousemove” and “mouseup” events on document, enabling the dragging action.

As shown below, clicking the navigation buttons both shifts the slides to your desired position and resets the interval timer. Conversely, clicking the slider itself readies it for dragging and temporarily pauses the interval:

dragging()

This callback function updates the position of slideFlex as the user drags it within the container. Here’s the code:

function dragging(e) {
    if (!clicked) return;

    if (e.type == "touchmove") {
      finalX = e.touches[0].clientX;
    } else {
      finalX = e.clientX;
    }

    let currentPosition = counter * leftPos;

    slideDistance = ((initialX - finalX) / (slidesWidth / numberOfSlides)) * 100;

    if (Math.abs(slideDistance) < threshold) {
      slidesFlex.style.left = `${currentPosition - slideDistance}%`;
    }
  }

The function:

Checks if there was a prior “mousedown” or “touchstart” event before allowing dragging.
Updates the value of finalX to the user’s final horizontal position.
Calculates the current position of slidesFlex.
Determines the slide distance as a percentage of the width of each slide.
Ensures the slide distance is within the specified threshold before subtracting it from the current position.

Here, we’ve successfully implemented the dragging motion based on the pointer’s direction. However, this action does not yet trigger a slide switch:

This callback function handles slide switching when the user stops dragging. Here’s the code:

function dragStop(e) {
    if (navigation.contains(e.target)) return;

    // Check threshold and counter before changing slides
    if (finalX < initialX && counter < (numberOfSlides - 1) && slideDistance >= threshold) {
      counter++;
    } else if (
      finalX > initialX &&
      counter > 0 &&
      -slideDistance >= threshold
    ) {
      counter--;
    }
    moveSlide();

    // Reset to default
    createInterval();
    document.body.style.cursor = "default";
    container.style.cursor = "grab";
    initialX = undefined;
    finalX = undefined;
    clicked = false;
    document.onmousemove = null;
    document.onmouseup = null;
  }

The function:

Ensures the user intends to drag rather than use manual navigation.
Checks the distance and direction of the user’s drag before updating counter accordingly.
Calls moveSlide() to switch slides to the current counter value.
Calls createInterval() to resume autoplay.
Resets all other variables and cursor styles in preparation for the next dragging action.
Sets document event listeners to null to prevent unnecessary resource usage.

As shown below, the callback functions (dragStart to dragEnd) combine to create a smooth dragging experience:

Finally, to prevent redundancy, let’s comment out the following sections in our CSS:

The transition timing on .slide-flex
The repositioning of .slide-flex during the checked state of the radio inputs

This removal is necessary because inline styles applied via JavaScript take precedence over external CSS.


.slides-flex{
...
/* transition: 0.8s */
}
...

/* ON RADIO CHECKED */
/* #radio1:checked ~ .slides-flex {
  left: 0%;
}

#radio2:checked ~ .slides-flex {
  left: -100%;
}

#radio3:checked ~ .slides-flex {
  left: -200%;
}

#radio4:checked ~ .slides-flex {
  left: -300%;
} */

Conclusion

In this tutorial, we’ve explored the fundamental elements needed to create a draggable slider using nothing but HTML, CSS, and JavaScript. Equipped with this knowledge, you’re ready to enhance user interactivity and improve the user experience in your projects.

If you found this article enlightening or have any thoughts to share, please give it a like and leave your comments below.

Some Helpful Links

Explore further:

Vanilla JavaScript: How To Create a Draggable Slider With Auto-Play and Navigation.

Ayobami Ajayi — Wed, 04 Oct 2023 18:24:18 +0000

Sliders, also known as carousels, are a popular tool for modern websites. They enable efficient transmission of information within a limited space.

Developers often rely on frameworks to build sliders. Although productive, this method does not contribute much to your growth as a developer.

Therefore, in this tutorial, we’ll adopt a more traditional approach to this project by using plain HTML, CSS, and JavaScript.

Codepen here:

Warming up

Before proceeding, I want to introduce two fundamental concepts that this project relies on.

Firstly, when you link a label element to an input element, like this:

<input type="radio" id="radio1"/>
<label for="radio1">label for radio1</label>

Clicking that label on the webpage passes the focus to the linked input element, as shown below:

This behavior is consistent even when you reposition either of the elements using CSS:

label{
   position: fixed;
   top: 10rem;
   right: 5rem;
}

The output:

Furthermore, you can apply this concept to other input types, such as checkboxes, numbers, and text fields. This linking expands the clickable area of the input element, and, as you will discover later, it allows for some neat tricks.

Secondly, using CSS pseudo-classes and combinators, you can dynamically change the styling of an element based on the current state of another element.

Pseudo-classes allow you to style specific states of elements. For example, :hover targets an element’s state when you hover over it with your mouse.

p{
  color: black;
}

p:hover{
  color: red;
}

Note that all pseudo-classes begin with a single colon (:).

Several pseudo-classes in CSS allow you to target various states of elements, but I’ll draw your attention to the :checked pseudo-class in this tutorial.

:checked is used to target the state when you toggle on a radio input or checkbox. For example, let’s consider our previous input element:

input:checked{
  outline: 2px solid red;
  outline-offset: 10px;
}

This output:

You can see that the browser applied the styles only after you toggled the radio on.

Alternatively, combinators establish the connection between selectors. There are four types of combinators in CSS:

General sibling combinator (~)
Adjacent sibling combinator (+)
Child combinator (>)
Descendant combinator (space)

Here, we’ll focus on the general sibling combinator. The general sibling combinator allows you to style sibling elements in your HTML.

For example, consider the following CSS rule:

.child1 ~ .child2{
  /* some declarations */
}

This selector initially identifies any element in our HTML with a class of .child1. It then applies the specified styles to any of its younger siblings with a class of .child2, as demonstrated below:

You should note the following about any two elements connected in this way:

They need to be sibling elements, which means they must share a common parent element, as shown above.
They do not need to be immediate siblings. This combinator disregards any other siblings placed between them.
Finally, you cannot apply combinator styles upwards in the HTML tree, only downwards. Thus, .child2 must come after .child1, making .child2 a younger sibling.

Putting it all together, and still on our input and label elements from before, we have:

input:checked ~ label {
  outline: 2px solid red;
  outline-offset: 10px;
}

The output:

As you can see, we dynamically changed the styling of a sibling element(label) based on the :checked state of the input element.

With all that out of the way, we can continue with our program.

The HTML

Our first task is to create a section of class slider within the body element.

<body>
  <section class="slider"></section>
</body>

Within this section, we’ll add:

Four radio inputs, one for each slide. Each radio input should have a unique id.
An unordered list (ul) with class slides-flex. It should contain four list elements (li), each assigned a class slide. These li will serve as our individual slides, containing whatever we wish to to display.
A div with class navigation. This should contain four label elements, each linked to one of the four radio inputs previously mentioned. Each label element should also have a unique class and an id between 1 and 4, corresponding to its position in the parent element.

<body>
    <section class="slider">
      <!-- radio buttons start -->
      <input type="radio" name="radio-btn" id="radio1" />
      <input type="radio" name="radio-btn" id="radio2" />
      <input type="radio" name="radio-btn" id="radio3" />
      <input type="radio" name="radio-btn" id="radio4" />
      <!-- radio buttons end -->
      <!-- slides start -->
      <ul class="slides-flex">
        <li class="slide">
          <h2>1</h2>
        </li>
        <li class="slide">
          <h2>2</h2>
        </li>
        <li class="slide">
          <h2>3</h2>
        </li>
        <li class="slide">
          <h2>4</h2>
        </li>
      </ul>
      <!-- slides end -->
      <!-- navigation start -->
      <div class="navigation">
        <label for="radio1" class="btn1" id="1"></label>
        <label for="radio2" class="btn2" id="2"></label>
        <label for="radio3" class="btn3" id="3"></label>
        <label for="radio4" class="btn4" id="4"></label>
      </div>
      <!-- navigation end -->
    </section>
  </body>

Our HTML section is now complete. You can copy this into your editor.

As you can see, our webpage is starting to take shape:

The CSS

You can adapt most of the styling of this project to your specific use case. However, in this section, I’ll explain the fundamental style decisions that make this project work.

Global Styling

Firstly, let’s remove the default margins, paddings, and box-sizing present on each element using the global selector (*). This improves control over element styling and reduces variation across browsers.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Next, the :root selector allows you to create custom variables that can reused throughout your style sheet. We’ll use color: #333; numerous times in our style sheet, and creating a custom variable is essential to avoid repetition.

:root{
 --primaryColor: #333;
 }

Note that we can later access this custom variable using color: var(--primaryColor);.

Now, for our body element:

body {
  display: grid;
  color: var(--primaryColor);
  height: 100vh;
  place-items: center;
  background-color: rgb(208, 230, 249);
  font-family: sans-serif;
}

ul {
  list-style: none;
}

Here, we set the following properties:

background-color: To provide a consistent visual backdrop for our webpage.
color and font-family: We apply these styles globally to all child elements.
display: grid; and place-items: center;: When used together, they center all child elements. It’s important to note that the parent element requires a specified height property for this method to work. Our height in this case, spans the entire viewport (100vh).
list-style: none;: To remove the bullets from all list elements on our webpage.

Our webpage should look like this:

Class `.slider`

This will serve as a container to showcase our slides.

.slider {
  position: relative;
  width: 80%;
  aspect-ratio: 1;
  max-width: 50rem;
  max-height: 31.25rem;
  border-radius: 0.7rem;
  /*overflow: hidden;*/
  cursor: grab;
  border: 2px solid green;
}

.slider input {
  display: none;
}

position: relative;: This accommodates the later placement of absolutely positioned elements.
aspect-ratio: 1;: Ensures the element remains square with equal sides, eliminating the need to set the height property for improved responsiveness.
max-height and max-width: Set limits on how large the element can become on larger screen sizes.
overflow: hidden;: We will discuss more on this later.
cursor: grab;: Indicates that the element is draggable.
display: none;: Hides the element from the viewport. Note that we can still access the radio inputs programmatically even though they are invisible.

The output:

Note that the borders are only present for visualization purposes, and we’ll remove them later.

Class `.slides-flex`

In this section, we’ll arrange the slides horizontally using Flexbox.

Moreover, this section serves as the dynamic part of our project. To achieve this, it needs to have absolute positioning so we can adjust it relative to its relatively positioned parent(.slider).

.slides-flex {
  display: flex;
  width: 400%;
  height: 100%;
  position: absolute;
  left: 0;
  transition: 0.8s;
}

width: 400%;: This sets the width to four times that of its parent.
height: 100%;: Stretches the element to fill the entire height of its parent.
position: absolute;: Enables us to use the left: 0; declaration relative to its parent, placing it at the left edge of .slider.
transition: 0.8s;: Used to create a smooth motion and introduce a sliding effect.

Class `.slide`

In this section, we’ll style each of our slides. We’ll start with the general layout by styling all elements with a class of .slide. We’ll then target each slide using the :nth-child pseudo-class.

.slide {
  width: 25%;
  display: grid;
  place-items: center;
}

.slide:nth-child(1) {
  background-color: #fed050;
  border-radius: 0.7rem 0 0 0.7rem;
}

.slide:nth-child(2) {
  background-color: #7fdbee;
}

.slide:nth-child(3) {
  background-color: #4cf89c;
}

.slide:nth-child(4) {
  background-color: #f79191;
  border-radius: 0 0.7rem 0.7rem 0;
}

.slide h2 {
  user-select: none;
  height: 5rem;
  width: 5rem;
  font-size: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  outline: 3px solid;
}

border-radius: This property can accept one to four values. When using four values, they are applied clockwise starting from the top-left corner. In our first slide (0.7rem 0 0 0.7rem), we aim to round the top-left and bottom-left corners. Conversely, for our fourth slide (0 0.7rem 0.7rem 0), we intend to round the top-right and bottom-right corners. You’ll see the importance of this in the JavaScript part.
user-select: none;: Prevents unnecessary text highlighting while dragging each slide with the mouse.

The output:

Class `.navigation`

For our navigation, let’s style each label to look like radio inputs.

navigation {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 2.5rem;
  gap: 2rem;
  justify-content: center;
}

.navigation label {
  border: 2px solid var(--primaryColor);
  padding: 0.3rem;
  border-radius: 50%;
  cursor: pointer;
  transition: 1s;
}

position: absolute;: Enables the use of bottom: 2.5rem;, positioning it 2.5rem from the bottom of .slider.
cursor: pointer;: Indicates to the user that the element is clickable.
border-radius: 50%;: Transforms each label into a circle.

Here’s what the navigation should look like:

On `:checked`

As mentioned earlier, the :checked pseudo-class allows access to the checked state of radio inputs. And when used with the general sibling combinator (~), grants access to their younger siblings:

Class .slides-flex , and
Class .navigation.

Starting with .slides-flex:

#radio1:checked ~ .slides-flex {
  left: 0;
}

#radio2:checked ~ .slides-flex{
  left: -100%;
}

#radio3:checked ~ .slides-flex {
  left: -200%;
}

#radio4:checked ~ .slides-flex {
  left: -300%;
}

In CSS, when you use a percentage value to position an element, that value is relative to the width of its parent element. So, when you set left: -100%;, it shifts the element to the left, outside its parent element, at a distance equal to 100% of its parent’s width, as demonstrated below:

As a reminder, we previously defined the width of .slides-flex to be four times(400%) that of .slider. Therefore, setting left: -100%; simply shifts .slides-flex by one-quarter of its width to the left, bringing a new slide to focus.

Looking at the image below, clicking each button after the first subtracts an additional 100% from the position of.slides-flex, bringing the slide at that position into focus.

Now for .navigation, so we can know what slide we’re in:

#radio1:checked ~ .navigation .btn1 {
  background-color: var(--primaryColor);
}

#radio2:checked ~ .navigation .btn2 {
  background-color: var(--primaryColor);
}

#radio3:checked ~ .navigation .btn3 {
  background-color: var(--primaryColor);
}

#radio4:checked ~ .navigation .btn4 {
  background-color: var(--primaryColor);
}

Notice how, first, we selected the parent element of the buttons, which is a sibling to the radio inputs. Then, we accessed each button using the descendant combinator (space).

Now, when we click any button, it changes its background color then brings a corresponding slide into focus, as shown below:

Rounding up, to ensure that only the selected slide is visible, let’s uncomment the line overflow: hidden; in our .slider styling. This change hides content outside the boundaries of the parent element, which, in this case, includes all other slides.

We can also comment out the border styling while at it:

.slider{
  ...
  overflow: hidden;
  ...
  /* border: 2px solid green; */
}

The output:

Finally, if you look at the image above, you’ll see that upon reload, no label is checked, and users won’t know what slide they are currently on. To avoid this, let’s add the checked attribute to our #radio1. This checks the first radio input on every reload, indicating that we are currently on the first slide.

<input type="radio" name="radio-btn" id="radio1" checked />

The output:

That concludes the CSS part. So far, we’ve implemented the sliding animations and manual navigation. Regrettably, for the sake of brevity, we must pause here. I’ll release a sequel to this article covering the JavaScript part, allowing us to achieve the:

Autoplay, and
Dragging (mouse) or swiping (touchscreen) options. Stay tuned!

Conclusion

In this tutorial, we’ve learned that not all webpage functionality needs to rely solely on JavaScript. By utilizing CSS pseudo-classes and combinators, we dynamically modified our webpage elements—a task that might otherwise have cost us several lines of JavaScript code.

Finally, if you’ve learned anything new, consider dropping a like and sharing so others can benefit as well. Until next time.

Some Helpful Links

Find out more on:

CSS pseudo-classes here
CSS combinators here

Forem: Ayobami Ajayi

Vanilla JavaScript: How to Create a Draggable Slider with Auto-Play and Navigation - Part Two

Prerequisites

Setting Things Up

The HTML

The CSS

Selecting DOM Elements

IIFEs

Setting Initial Values

Setting Event Listeners

Initiate interval

Mouse events

Touch events

Functions and Callbacks

moveSlide()

animate()

createInterval()

dragStart()

dragging()

Conclusion

Some Helpful Links

Vanilla JavaScript: How To Create a Draggable Slider With Auto-Play and Navigation.

Warming up

The HTML

The CSS

Global Styling

Class .slider

Class .slides-flex

Class .slide

Class .navigation

On :checked

Conclusion

Some Helpful Links

Class `.slider`

Class `.slides-flex`

Class `.slide`

Class `.navigation`

On `:checked`