• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nieskończona karuzela kręcąca się w prawo

Aruba Cloud - Virtual Private Server VPS
+1 głos
133 wizyt
pytanie zadane 9 sierpnia 2023 w JavaScript przez AgentTecza Obywatel (1,810 p.)

Cześć,

Próbuję zrobić karuzelę z obrazami i szybką animacją podczas przejścia. Ale utknąłem z moim problemem, prawdopodobnie jest to podstawowy problem, ale jestem nowy w JS. Muszę zrobić pętlę w nieskończoność na mojej karuzeli. Chcę to zrobić tak, aby zawsze kręciło się w prawo. Musi zawsze obracać się w prawo bez powrotu do indeksu 0 i ponownego obracania się, ponieważ to właśnie udało mi się stworzyć wcześniej.

Jak mogę to osiągnąć?

Z góry dziękuję za Twoją pomoc!


JS:
 

document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.querySelector('.carouselm');
  let slides = Array.from(document.querySelectorAll('.slide'));
  const slideWidth = slides[0].offsetWidth;
  const centerOffset = (carousel.offsetWidth - slideWidth) / 2;
  let currentCenterIndex = 2;
  let intervalId;
  function goToSlide(index) {
    const slideOffset = centerOffset - slideWidth * index;
    carousel.style.transform = `translateX(${slideOffset}px)`;
    currentCenterIndex = index;
    slides.forEach((slide, i) => {
      slide.classList.toggle('color-slide', i === currentCenterIndex);
    });
  }

  goToSlide(currentCenterIndex);

  function nextSlide() {
    if (currentCenterIndex < slides.length - 3) {
      goToSlide(currentCenterIndex + 1);
    } else {
      const firstSlide = slides.shift();
      slides.push(firstSlide);
      currentCenterIndex = slides.length - 3;
      goToSlide(currentCenterIndex);
    }
   
  }

  function startCarousel() {
    intervalId = setInterval(nextSlide, 600);
  }

  function stopCarousel() {
    clearInterval(intervalId);
  }

  startCarousel();

  carousel.addEventListener('mouseenter', stopCarousel);
  carousel.addEventListener('mouseleave', startCarousel);


});

HTML:
 

<div class='carousel-container'>
    <div class='carouselm'>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
    </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
    </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt='piekarnia-cukiernia'>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>

CSS:
 

.carousel-container {
    overflow: hidden;
    position: relative;
  }

.carouselm {
    display: flex;
    transition: transform 0.5s ease-in-out; 
}

.slide img {
    width: 384px;
    height: 305px;
    filter: grayscale(1);
    transition: scale 1.4s;
    scale: .7;
}

.color-slide img {
    filter: grayscale(0);
    scale: .9;
    opacity: 1;
}

 

1 odpowiedź

0 głosów
odpowiedź 14 sierpnia 2023 przez VBService Ekspert (256,600 p.)

Proponuję, zamiast transform: translateX(...)

carousel.style.transform = `translateX(${slideOffset}px)`;

użyć transition: left

carousel.style.transition = `left ${carouselSlideLeftDuration}ms ease-in-out`;
carousel.style.left = `-${blockWidth}px`;

i w css

.carousel-block {
  float: left;
  ...
}

 

Propozycja zmian  [ on-line ]

<div class="carousel-container">
  <div class="carousel-items">
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=1' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=2' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=3' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=4' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=5' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=6' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=7' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=8' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=9' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=10' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=11' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=12' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=13' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=14' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=15' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=16' alt=''>
      </a>
    </div>
    <div class='carousel-block'>
      <a href="#">
        <img src='https://picsum.photos/260/300?random=1' alt=''>
      </a>
    </div>    
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --image-count: 18;
}
.carousel-container {
  position: absolute;
  width: 100%;
  height: 305px;
  overflow: hidden;
}
.carousel-items {
  width: calc(100% * var(--image-count));
  position: relative;
  height: 100%
}
.carousel-block {
  float: left;
  width: 260px;
  height: 100%
}
.carousel-block img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s;
  scale: .7;
}
.color-slide img {
  filter: grayscale(0);
  scale: .9;
  opacity: 1;
}
const carousel = document.querySelector('.carousel-container'),
      carouselItems = carousel.querySelector('.carousel-items'),
      blockCount = carousel.querySelectorAll('.carousel-block').length,
      blockWidth = carousel.querySelector('.carousel-block').offsetWidth;
 
const carouselSlideIntervalDuration = 1600, // 1.6s
      carouselSlideLeftDuration = 700; // 0.7s
let intervalId;
 
function carouselSlide() {
  carouselItems.style.transition = `left ${carouselSlideLeftDuration}ms ease-in-out`;
  carouselItems.style.left = `-${blockWidth}px`;
 
  setTimeout(() => {
    const firstBlock = carouselItems.querySelector('.carousel-block');
    const newBlock = firstBlock.cloneNode(true);
    carouselItems.appendChild(newBlock);
    carouselItems.removeChild(firstBlock);
 
    carouselItems.style.transition = 'none';
    carouselItems.style.left = '0px';
  }, carouselSlideLeftDuration);
}
 
document.addEventListener('DOMContentLoaded', () => {
  function startCarousel() {
    carouselSlide();
    intervalId = setInterval(() => { carouselSlide(); }, carouselSlideIntervalDuration);   
  }
  function stopCarousel() {
    clearInterval(intervalId);
  }
 
  document.body.style.setProperty('--image-count', blockCount);
  startCarousel();
 
  carousel.addEventListener('mouseenter', stopCarousel);
  carousel.addEventListener('mouseleave', startCarousel);
});

 

BTW, pozostawiłem Tobie "znalezienie" sposobu jak dodać animacje, które masz w Twoim kodzie wink

Podobne pytania

+1 głos
2 odpowiedzi 173 wizyt
pytanie zadane 17 maja 2024 w HTML i CSS przez new_user Użytkownik (640 p.)
0 głosów
0 odpowiedzi 359 wizyt
pytanie zadane 2 sierpnia 2017 w JavaScript przez ShadoWs Bywalec (2,800 p.)
0 głosów
0 odpowiedzi 385 wizyt

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,662 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...