CODEWITHSUNDEEP
jqueryslideshowinfinite-loop
Gus
Gus

Reputation: 41

Infinite Slideshow

I need some help about infinite slideshow concept. What I need is similar to this image:

enter image description here

Well, I have this structure in HTML and CSS and I use imagens on background of divs, but I don't know how do the infinite effect with jquery. Anybody have patience to explain?

I found some codes, but they don't work like exacly I expected, with a centralized div and a cut of the prev and next slide.

I say thank you to anyone helping me from now.

Upvotes: 0

Views: 829

Answers (2)

Vikas Patel
Vikas Patel

Reputation: 261

Check this demo

$('.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>

Upvotes: 0

Vikas Patel
Vikas Patel

Reputation: 261

Use this plugin and make your desired carousel https://owlcarousel2.github.io/OwlCarousel2/demos/merge.html

Upvotes: 1

Related Questions