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

Question

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

Хорошо, у меня есть эта структура в HTML и CSS, и я использую изображения на фоне div, но я не знаю, как сделать бесконечный эффект с jquery. У кого-нибудь есть терпение, чтобы объяснить?

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

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

Answer 1

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

Answer 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>

Answer 3

К сожалению, я не знаю, как заставить этот плагин работать так, как мне нужно.Кто-нибудь со знанием jquery, чтобы увидеть мой пример и попробовать помочь решить этот вопрос?

См. Мой пример на Codepen

HTML:

<div id="slide">
   <div id="wrapper">

     <div class="item item-3 cloned"> Slide 3 (cloned) </div>
     <div class="item item-1 cloned"> Slide 1 (cloned) </div>
     <div class="item item-2 cloned"> Slide 2 (cloned) </div>

     <div class="item item-3"> Slide 3 </div>
     <div class="item item-1"> Slide 1 </div>
     <div class="item item-2"> Slide 2 </div>

     <div class="item item-3 cloned"> Slide 3 (cloned) </div>
     <div class="item item-1 cloned"> Slide 1 (cloned) </div>
     <div class="item item-2 cloned"> Slide 2 (cloned) </div>

   </div>

   <div id="controls">
     <a id="control-prev"><</a>
     <a id="control-next">></a>
   </div>
</div>

CSS:

See on Codepen example

JQUERY:

See on Codepen example