Бесконечное слайд-шоу

#jquery #slideshow #infinite-loop

#jquery #слайд-шоу #бесконечный цикл

Вопрос:

Мне нужна некоторая помощь по поводу концепции бесконечного слайд-шоу. То, что мне нужно, похоже на это изображение:

Ну, у меня есть эта структура в HTML и CSS, и я использую изображения на фоне divs, но я не знаю, как добиться эффекта бесконечности с помощью jquery. У кого-нибудь хватит терпения объяснить?

Я нашел несколько кодов, но они работают не так, как я ожидал, с централизованным разделением и вырезанием предыдущего и следующего слайдов.

Я говорю спасибо всем, кто помогает мне с этого момента.

Ответ №1:

Используйте этот плагин и создайте желаемую карусель https://owlcarousel2.github.io/OwlCarousel2/demos/merge.html

Ответ №2:

Проверьте эту демонстрацию

 $('.owl-carousel').owlCarousel({
    items:5,
    loop:true,
    margin:10,
    merge:true,
    responsive:{
        678:{
            mergeFit:true
        },
        1000:{
            mergeFit:false
        }
    }
});

 .item {
	height: 10rem;
	background-color: #4DC7A0;
	padding: 1rem;
	color: #fff;
}

 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<div class="owl-carousel owl-theme">
    <div class="item" data-merge="1"><h2>1</h2></div>
    <div class="item" data-merge="2"><h2>2</h2></div>
    <div class="item" data-merge="1"><h2>3</h2></div>
    <div class="item" data-merge="3"><h2>4</h2></div>
    <div class="item" data-merge="6"><h2>6</h2></div>
    <div class="item" data-merge="2"><h2>7</h2></div>
    <div class="item" data-merge="1"><h2>8</h2></div>
    <div class="item" data-merge="3"><h2>9</h2></div>
    <div class="item"><h2>10</h2></div>
    <div class="item"><h2>11</h2></div>
    <div class="item" data-merge="2"><h2>12</h2></div>
    <div class="item"><h2>13</h2></div>
    <div class="item"><h2>14</h2></div>
    <div class="item"><h2>15</h2></div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>

1. Да, я вижу этот пример, но мне нужны все разделы одинаковой ширины, как изображение в моем вопросе. В окне просмотра первый слайд централизован, а 25% следующих и последних слайдов по бокам, вы понимаете? Этот плагин делает не все, что мне нужно.

2. удалите элементы формы атрибута слияния данных и, братан, пожалуйста, просмотрите весь документ owl carousel, вы найдете все, что хотите. Кажется, вы хотите, чтобы кто-то закодировал это в соответствии с вашими требованиями