Карусель застревает на определённом этапе, как пофиксить?

Question

Описать достаточно просто, скролер до конца не пролистывается, он скролится на больше чем размер страницы, но "застревает" на определенном этапе.

Попробовал разное, пока не получилось победить

Ещё буду признателен, если скинете пример как реализовать бесконечный скрол, что бы при конце списка появлялось начало

var swiper = new Swiper(".mySwiperVinyl", {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: ".swiper-paginationVinyl",
    clickable: true,
  },
});

.swiper__flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper_vinyl {
  margin-top: 40px;
  margin-bottom: 20px;
  width: 1500px;
  height: 200px;
}

.swiper-slideVinyl {
  display: flex;
  margin: 60px;
  height: 80px;
  width: 80px;
  background: #fff;
  justify-content: center;
  align-items: center;
}

.textVinyl {
  font-size: 35px;
}

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet" />

<div class="swiper__flex">
  <div class="swiper_vinyl">
    <div class="swiper mySwiperVinyl">
      <div class="textVinyl">Хит продаж</div>
      <div class="swiper-wrapper">
        <div class="swiper-slideVinyl"><img src="1_1.jpg" /></div>
        <div class="swiper-slideVinyl"><img src="1_2.jpg" /></div>
        <div class="swiper-slideVinyl"><img src="1_3.jpg" /></div>
        <div class="swiper-slideVinyl"><img src="1_4.jpg" /></div>
        <div class="swiper-slideVinyl"><img src="1_5.jpg" /></div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>
  </div>
</div>

Answer 1

в первом примере предлагаю вариант с реализацией бесконечного скролла, где при достижении конца страницы подгружается новый контент (например, три новых блока), и скроллинг продолжается без остановок...

Когда пользователь достигает конца страницы, срабатывает обработчик скролла, который запускает подгрузку нового контента, функция loadMoreContent() как раз создает элементы, добавляет их в контейнер, а индикатор загрзки отображется на время подгрузки нового контента "имитируя" аасинхронный процесс

let content = document.getElementById('content');
let loader = document.getElementById('loader');
let loading = false;

function loadMoreContent() {
  loader.style.display = 'block';

  setTimeout(() => {
    for (let i = 0; i < 3; i++) {
      let newItem = document.createElement('div');
      newItem.classList.add('item');

      let newImage = document.createElement('img');
      newImage.src = "https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg";
      newImage.alt = "New Image " + (content.children.length + 1);

      //добавим новую картинку
      newItem.appendChild(newImage);
      content.appendChild(newItem);
    }

    loader.style.display = 'none';
    loading = false;
  }, 1000);
}

//обработчик скроллинга
window.addEventListener('scroll', function() {
  if (!loading && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    loading = true;
    loadMoreContent(); //загружаем еще
  }
});

body {
  font-family: Arial, sans-serif;
}

.content {
  padding: 20px;
  background-color: #f3f3f3;
}

.item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  margin-bottom: 10px;
  text-align: center;
}

.item img {
  max-width: 100%;
  height: auto;
}

.loader {
  text-align: center;
  padding: 10px;
  font-size: 16px;
  display: none;
}

<div class="content" id="content">
  <div class="item">
    <img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" alt="Image 1" />
  </div>
  <div class="item">
    <img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" alt="Image 2" />
  </div>
  <div class="item">
    <img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" alt="Image 3" />
  </div>
</div>

<div class="loader" id="loader">Загрузка...</div>

Swiper (то, что вы используете у себя в скрипте) — это популярная библиотека для создания слайдеров и каруселей. Она поддерживает различные возможности, такие как бесконечная прокрутка, автопрокрутка, управление через кнопки, а также адаптивность. Основное преимущество Swiper — это простота настройки и широкие возможности для кастомизации.

Если ваша цель — сделать бесконечную карусель с прокруткой, то нужно использовать параметр loop: true, он и отвечает за цикличную (бесконечную) прокрутку слайдов. Этот параметр позволит карусели не "застревать", а продолжать прокручивать слайды без остановки.

const swiper = new Swiper('.mySwiperVinyl', {
  slidesPerView: 3,
  spaceBetween: 30,
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slideVinyl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.swiper-slide img {
  max-width: 100%;
  height: auto;
}

.swiper-button-next,
.swiper-button-prev {
  color: #000;
}

.swiper-pagination-bullet {
  background-color: #000;
}

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-wrapper">
  <div class="swiper-slide swiper-slideVinyl"><img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" /></div>
  <div class="swiper-slide swiper-slideVinyl"><img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" /></div>
  <div class="swiper-slide swiper-slideVinyl"><img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" /></div>
  <div class="swiper-slide swiper-slideVinyl"><img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" /></div>
  <div class="swiper-slide swiper-slideVinyl"><img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" /></div>

  <div class="swiper-slide">Slide 6</div>
  <div class="swiper-slide">Slide 7</div>
  <div class="swiper-slide">Slide 8</div>
  <div class="swiper-slide">Slide 9</div>
</div>

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

<div class="swiper-pagination"></div>
</div>
</div>
</div>

БЛОГ НА HUSL

Карусель застревает на определённом этапе, как пофиксить?

Ответы (1 шт):