Is there a way to have these slides repeat automatically?

Question

Is there a way to have these slides repeat automatically?

After spend some time working on this, I've hit a roadblock.

I managed to create a div slider with navigation arrows where each slide has a minimum width of 80px.

The code functions correctly, except that when I reach the last item and try to navigate further, it stops. I want the slider to loop infinitely instead of stopping at the last item.

let buttonLeft = document.getElementById('slide_left')
                let buttonRight = document.getElementById('slide_right')

                buttonLeft.addEventListener('click', function() {
                    document.getElementById('slider').scrollLeft -= 90
                })

                buttonRight.addEventListener('click', function() {
                    document.getElementById('slider').scrollLeft += 90
                })

body{
                        background-color: #555;
                        height: 100vh;
                        display: grid;
                        align-items: center;
                        justify-items: center;
                        font-family: 'Helvetica';
                    }

                    div#slide_wrapper{
                        width: 440px;
                        display: flex;
                        justify-content: space-between;
                        height: fit-content;
                    }

                    div#slider{
                        width: 350px;
                        display: flex;
                        height: fit-content;
                        flex-wrap: nowrap;
                        overflow: hidden;
                    }
                    
                    <!-- More CSS styles -->

<div id="slide_wrapper">
                    <button id="slide_left" class="slide_arrow">&#10094;</button>
                    <div id="slider">
                        <div class="thumbnail active">1</div>
                        <div class="thumbnail">2</div>
                        <div class="thumbnail">3</div>
                        <div class="thumbnail">4</div>
                        <div class="thumbnail">5</div>
                        <div class="thumbnail">6</div>
                        <div class="thumbnail">7</div>
                        <div class="thumbnail">8</div>
                    </div>
                    <button id="slide_right" class="slide_arrow">&#10095;</button>
                </div>

javascript html css

Answer 1

Answer №1

Great job on the slider implementation! There are multiple approaches to achieve the desired functionality. In my view, the most straightforward solution involves using if conditions and a counter variable. Reset the counter to 0 once the limit of thumbnails is reached.

Update

In response to your query, "How about doing the same for the left arrow.", I made the following additions within the if condition block: if (0 == slideCount) {:

    slideCount = thumbnail.length // set the slideCounter to maximum
    document.getElementById('slider').scrollLeft = slideCount * 90 // calculate the scroll distance
    slideCount--; // decrease slidecount
    setActive();  // set the red border on the current slide

const buttonLeft = document.getElementById('slide_left')
const  buttonRight = document.getElementById('slide_right')
const thumbnail = document.querySelectorAll(".thumbnail");
let slideCount = 0;
setActive();

buttonLeft.addEventListener('click', function() {
  if (0 == slideCount) {
    slideCount = thumbnail.length
    document.getElementById('slider').scrollLeft = slideCount * 90
    slideCount--;
    setActive();    
    return;
  }
  slideCount--;
  document.getElementById('slider').scrollLeft -= 90  
  setActive();
})

buttonRight.addEventListener('click', function() {
  slideCount++;
  if ( 8  ==  slideCount) {    
    document.getElementById('slider').scrollLeft = 0
    slideCount = 0;
  } else {
    document.getElementById('slider').scrollLeft += 90  
  }    
  setActive();
})

function setActive() {  
  thumbnail.forEach(t => {
    t.classList.remove("active");
  })
  thumbnail[slideCount].classList.add("active")
}

function count() {
  console.log(slideCount);
}

body{
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: 'Helvetica';
}
 /* CSS Styles */

<div id="slide_wrapper">
  <button id="slide_left" class="slide_arrow">&#10094;</button>
  <div id="slider">
    <div class="thumbnail active">1</div>
    <div class="thumbnail">2</div>
    <div class="thumbnail">3</div>
    <div class="thumbnail">4</div>
    <div class="thumbnail">5</div>
    <div class="thumbnail">6</div>
    <div class="thumbnail">7</div>
    <div class="thumbnail">8</div>
  </div>
  <button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

Answer 2

Great job on the slider implementation! There are multiple approaches to achieve the desired functionality. In my view, the most straightforward solution involves using if conditions and a counter variable. Reset the counter to 0 once the limit of thumbnails is reached.

Update

In response to your query, "How about doing the same for the left arrow.", I made the following additions within the if condition block: if (0 == slideCount) {:

    slideCount = thumbnail.length // set the slideCounter to maximum
    document.getElementById('slider').scrollLeft = slideCount * 90 // calculate the scroll distance
    slideCount--; // decrease slidecount
    setActive();  // set the red border on the current slide

const buttonLeft = document.getElementById('slide_left')
const  buttonRight = document.getElementById('slide_right')
const thumbnail = document.querySelectorAll(".thumbnail");
let slideCount = 0;
setActive();

buttonLeft.addEventListener('click', function() {
  if (0 == slideCount) {
    slideCount = thumbnail.length
    document.getElementById('slider').scrollLeft = slideCount * 90
    slideCount--;
    setActive();    
    return;
  }
  slideCount--;
  document.getElementById('slider').scrollLeft -= 90  
  setActive();
})

buttonRight.addEventListener('click', function() {
  slideCount++;
  if ( 8  ==  slideCount) {    
    document.getElementById('slider').scrollLeft = 0
    slideCount = 0;
  } else {
    document.getElementById('slider').scrollLeft += 90  
  }    
  setActive();
})

function setActive() {  
  thumbnail.forEach(t => {
    t.classList.remove("active");
  })
  thumbnail[slideCount].classList.add("active")
}

function count() {
  console.log(slideCount);
}

body{
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: 'Helvetica';
}
 /* CSS Styles */

<div id="slide_wrapper">
  <button id="slide_left" class="slide_arrow">&#10094;</button>
  <div id="slider">
    <div class="thumbnail active">1</div>
    <div class="thumbnail">2</div>
    <div class="thumbnail">3</div>
    <div class="thumbnail">4</div>
    <div class="thumbnail">5</div>
    <div class="thumbnail">6</div>
    <div class="thumbnail">7</div>
    <div class="thumbnail">8</div>
  </div>
  <button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

Answer 3

Answer №2

To determine the width of the slider, simply compare it to the scroll left position using the following JavaScript:

 let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

buttonLeft.addEventListener('click', function() {
    document.getElementById('slider').scrollLeft -= 90
})

buttonRight.addEventListener('click', function() {

  const elem = document.getElementById('slider');
  
  const ElemWidth = elem.getClientRects()[0].width
 
 if(document.getElementById('slider').scrollLeft > ElemWidth ){
    document.getElementById('slider').scrollLeft = 0
 }else{
   document.getElementById('slider').scrollLeft += 90 
 }
  
   console.log(ElemWidth,  document.getElementById('slider').scrollLeft , document.getElementById('slider').scrollLeft > ElemWidth)
})

Answer 4

To determine the width of the slider, simply compare it to the scroll left position using the following JavaScript:

 let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

buttonLeft.addEventListener('click', function() {
    document.getElementById('slider').scrollLeft -= 90
})

buttonRight.addEventListener('click', function() {

  const elem = document.getElementById('slider');
  
  const ElemWidth = elem.getClientRects()[0].width
 
 if(document.getElementById('slider').scrollLeft > ElemWidth ){
    document.getElementById('slider').scrollLeft = 0
 }else{
   document.getElementById('slider').scrollLeft += 90 
 }
  
   console.log(ElemWidth,  document.getElementById('slider').scrollLeft , document.getElementById('slider').scrollLeft > ElemWidth)
})

Is there a way to have these slides repeat automatically?

Answer №1

Update

Answer №2

Similar questions

While iterating over the key with a variable in a loop, only one property is displayed consistently instead of four different

Customizing functions in JavaScript with constructor property

When activated, JavaScript is producing an undefined response

Developing a calendar with limited availability for selecting future dates and restricting the ability to choose past dates

Breaking AngularJS into an array

Sharing Variable Across Multiple Pages

Having trouble resolving the BooksAPI in my code, can anyone help?

How can I use vanilla JavaScript to retrieve all elements within the body tag while excluding a specific div and its descendants?

Safari's compatibility issues with Next.js Images are preventing Flexbox from working properly

Click on the social media icon to access the link

How can I programmatically trigger a change event for a dropdown in Vue.js?

Revamp nested .map calls to utilize async/await pattern

Can you explain the significance of these specific HTML attributes within the button tag?

Navigating through elements within underscore.js templates

The issue with VS Code is that it is running the wrong file instead of

Attempting to retrieve backend data through an API to be displayed on the frontend

The reason why Express is not directing to the static React build files is due to the absence of a specific URL slug

An issue occurred while attempting to execute a function in AngularJS

Calling Ajax inside each iteration loop

Using querySelector() to target specific divs by their classes while excluding any other classes