javascript - Create a testimonial slider which continously plays slides on a loop from right to left - Stack Overflow

admin管理员组

文章数量:1277382

Hope some can help as its driving me nuts.

I want the test to scroll from right to left and once the thirds slides through the first slide follows behind it.

At the moment it slides all three back to the right in one go and just looks awful.

<-slider 1-> <-slider 2-> <-slider 3-> then <-slider 1-> again.

Any help would be handy and thanks in advance.

let currentIndex = 0;
const slides = document.querySelectorAll('.carousel-slide');
const slidesContainer = document.querySelector('.carousel-slides');
const totalSlides = slides.length;

// Function to display the current slide
function showSlide(index) {
    const newPosition = -index * (100 / totalSlides); // Move slides left based on index
    slidesContainer.style.transition = "transform 0.5s ease-in-out"; // Set transition
    slidesContainer.style.transform = `translateX(${newPosition}%)`; // Move slides left
}

// Function to handle the auto-scrolling
function autoScroll() {
    currentIndex++;

    // If currentIndex goes beyond the last slide
    if (currentIndex >= totalSlides) {
        currentIndex = 0; // Reset to first slide
        slidesContainer.style.transition = "none"; // Disable transition for an instant change
        showSlide(currentIndex); // Show the first slide instantly

        // Allow a brief pause before transitioning again
        setTimeout(() => {
            slidesContainer.style.transition = "transform 0.5s ease-in-out"; // Re-enable transition
            showSlide(currentIndex); // Show the first slide
        }, 50); // Short timeout to feel the transition
    } else {
        showSlide(currentIndex);
    }
}

// Start auto-scrolling every 3 seconds
setInterval(autoScroll, 3000);
showSlide(currentIndex); // Initial display

.text-carousel {
  position: relative;
  width: 100%; /* Full width */
  max-width: 600px; /* Maximum width */
  margin: auto; /* Center the carousel */
  overflow: hidden; /* Hides overflow content */
  background-color: transparent; /* Transparent background */
}

.carousel-slides {
  display: flex; /* Use flex for sliding effect */
  transition: transform 0.5s ease-in-out; /* Smooth transition */
  width: 300%; /* Set width to accommodate three slides */
}

.carousel-slide {
  width: 33.33%; /* Adjust to fit one slide at a time */
  box-sizing: border-box; /* Include padding in width */
  padding: 20px; /* Space inside slides */
  text-align: center; /* Center text */
  font-size: 1.2rem; /* Font size */
  font-weight: bold; /* Bold text */
  color: #20A2D3; /* Text color */
}

<div class="text-carousel">
  <div class="carousel-slides">
    <div class="carousel-slide">
      <p>“A unique recruitment, operations and finance solution that expertly supports aspiring businesses bridge their current capabilities and future potential.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Genuine people that collaborate by offering a simplistic and excellent approach.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Recruitment, Finance, and Operation experts on demand.”</p>
    </div>
  </div>
</div>
    

Hope some can help as its driving me nuts.

I want the test to scroll from right to left and once the thirds slides through the first slide follows behind it.

At the moment it slides all three back to the right in one go and just looks awful.

<-slider 1-> <-slider 2-> <-slider 3-> then <-slider 1-> again.

Any help would be handy and thanks in advance.

let currentIndex = 0;
const slides = document.querySelectorAll('.carousel-slide');
const slidesContainer = document.querySelector('.carousel-slides');
const totalSlides = slides.length;

// Function to display the current slide
function showSlide(index) {
    const newPosition = -index * (100 / totalSlides); // Move slides left based on index
    slidesContainer.style.transition = "transform 0.5s ease-in-out"; // Set transition
    slidesContainer.style.transform = `translateX(${newPosition}%)`; // Move slides left
}

// Function to handle the auto-scrolling
function autoScroll() {
    currentIndex++;

    // If currentIndex goes beyond the last slide
    if (currentIndex >= totalSlides) {
        currentIndex = 0; // Reset to first slide
        slidesContainer.style.transition = "none"; // Disable transition for an instant change
        showSlide(currentIndex); // Show the first slide instantly

        // Allow a brief pause before transitioning again
        setTimeout(() => {
            slidesContainer.style.transition = "transform 0.5s ease-in-out"; // Re-enable transition
            showSlide(currentIndex); // Show the first slide
        }, 50); // Short timeout to feel the transition
    } else {
        showSlide(currentIndex);
    }
}

// Start auto-scrolling every 3 seconds
setInterval(autoScroll, 3000);
showSlide(currentIndex); // Initial display

.text-carousel {
  position: relative;
  width: 100%; /* Full width */
  max-width: 600px; /* Maximum width */
  margin: auto; /* Center the carousel */
  overflow: hidden; /* Hides overflow content */
  background-color: transparent; /* Transparent background */
}

.carousel-slides {
  display: flex; /* Use flex for sliding effect */
  transition: transform 0.5s ease-in-out; /* Smooth transition */
  width: 300%; /* Set width to accommodate three slides */
}

.carousel-slide {
  width: 33.33%; /* Adjust to fit one slide at a time */
  box-sizing: border-box; /* Include padding in width */
  padding: 20px; /* Space inside slides */
  text-align: center; /* Center text */
  font-size: 1.2rem; /* Font size */
  font-weight: bold; /* Bold text */
  color: #20A2D3; /* Text color */
}

<div class="text-carousel">
  <div class="carousel-slides">
    <div class="carousel-slide">
      <p>“A unique recruitment, operations and finance solution that expertly supports aspiring businesses bridge their current capabilities and future potential.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Genuine people that collaborate by offering a simplistic and excellent approach.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Recruitment, Finance, and Operation experts on demand.”</p>
    </div>
  </div>
</div>
    

• javascript
• html
• css
• slider
• carousel

Share Improve this question Follow edited Feb 25 at 5:29 Brett Donald 14.3k55 gold badges3434 silver badges6161 bronze badges asked Feb 24 at 22:54 MattobiwanMattobiwan 2744 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You need an infinite looping effect where the first slide follows the third smoothly. To achieve this, you can duplicate the first slide at the end of the list and use a transition by resetting the position without animation.

let currentIndex = 0;
const slidesContainer = document.querySelector('.carousel-slides');
const totalSlides = document.querySelectorAll('.carousel-slide').length;
const slideWidth = 100 / totalSlides;

function showSlide() {
    slidesContainer.style.transition = "transform 0.5s ease-in-out"; // Smooth transition
    slidesContainer.style.transform = `translateX(-${currentIndex * slideWidth}%)`;
}

function autoScroll() {
    currentIndex++;

    if (currentIndex === totalSlides - 1) {
        // Move to duplicate slide, then reset instantly to the first slide
        showSlide();
        setTimeout(() => {
            slidesContainer.style.transition = "none"; // Disable transition for instant reset
            currentIndex = 0;
            slidesContainer.style.transform = `translateX(-${currentIndex * slideWidth}%)`;
        }, 500); // Wait for transition before resetting
    } else {
        showSlide();
    }
}

// Start auto-scrolling every 3 seconds
setInterval(autoScroll, 3000);
showSlide(); // Initial display

.text-carousel {
  position: relative;
  width: 100%; /* Full width */
  max-width: 600px; /* Maximum width */
  margin: auto; /* Center the carousel */
  overflow: hidden; /* Hides overflow content */
  background-color: transparent; /* Transparent background */
}

.carousel-slides {
  display: flex; /* Use flex for sliding effect */
  width: 400%; /* Adjusted width for smooth looping */
  transition: transform 0.5s ease-in-out; /* Smooth transition */
}

.carousel-slide {
  width: 25%; /* Adjust width for 4 slides (3 original + 1 duplicate) */
  box-sizing: border-box; /* Include padding in width */
  padding: 20px; /* Space inside slides */
  text-align: center; /* Center text */
  font-size: 1.2rem; /* Font size */
  font-weight: bold; /* Bold text */
  color: #20A2D3; /* Text color */
}

<div class="text-carousel">
  <div class="carousel-slides">
    <div class="carousel-slide">
      <p>“A unique recruitment, operations and finance solution that expertly supports aspiring businesses bridge their current capabilities and future potential.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Genuine people that collaborate by offering a simplistic and excellent approach.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Recruitment, Finance, and Operation experts on demand.”</p>
    </div>
    <!-- Duplicate the first slide for seamless transition -->
    <div class="carousel-slide">
      <p>“A unique recruitment, operations and finance solution that expertly supports aspiring businesses bridge their current capabilities and future potential.”</p>
    </div>
  </div>
</div>

本文标签：