Why cloning carousel-item not working perfectly? - javascript

I was trying to make a carousel that has multiple image in 1 slide. The thing is, when the image reached at 4, all 3 other image going to hide forcely. Special credit to this owner Bootstrap Codply, I found this open source here Stackoverflow.
This is the code I mixed up so far:
let items = document.querySelectorAll('.multiple-carousel .items')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
#media (max-width: 767px) {
.multiple-carousel .carousel-inner .carousel-item > div {
display: none;
}
.multiple-carousel .carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.multiple-carousel .carousel-inner .carousel-item.active,
.multiple-carousel .carousel-inner .carousel-item-next,
.multiple-carousel .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.multiple-carousel .carousel-inner .carousel-item-end.active,
.multiple-carousel .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.multiple-carousel .carousel-inner .carousel-item-start.active,
.multiple-carousel .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.multiple-carousel .carousel-inner .carousel-item-end,
.multiple-carousel .carousel-inner .carousel-item-start {
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center my-3 multiple-carousel">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active items">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e44?text=1" class="img-fluid">
</div>
<div class="card-img-overlay">picture 1</div>
</div>
</div>
</div>
<div class="carousel-item items">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e55?text=2" class="img-fluid">
</div>
<div class="card-img-overlay">picture 2</div>
</div>
</div>
</div>
<div class="carousel-item items">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e77?text=3" class="img-fluid">
</div>
<div class="card-img-overlay">picture 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e66?text=4" class="img-fluid">
</div>
<div class="card-img-overlay">picture 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
When I tried to edit the transform it makes more mess, same with const minPerslide where should I edit it?


I think this code works:
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center my-3">
<h2 class="font-weight-light">Bootstrap Multi Slide Carousel</h2>
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/31f?text=1" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e66?text=2" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400?text=4" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/aba?text=5" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 5</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 6</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<h5 class="mt-2 fw-light">advances one slide at a time</h5>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
</body>
</html>
Good Luck :)

Related

Bootstrap 5: slider / carousel products

I try create slider / carousel products like this below screen using Bootstrap5:
Here I paste, This is my current code:
<style>
<!-- Temporary -->
.carousel-control-next-icon {
background: black;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Home Section End -->
<div class="container-fluid mt-3">
<div class="row g-4">
<div class="col-xl-6 col-md-4 ratio_medium d-sm-block d-none">
<div class="home-section bg-white div-content" style="height:236px;">
<!-- With Captions -->
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item active">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col-xl-6 ratio_65 d-xl-block d-none">
<div class="home-section bg-white div-content" style="height:236px;">
<!-- With Captions -->
<div id="carouselExampleCaption2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item active">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption2" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption2" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Home Section End -->
But currently this look like bad:
Display only one item, but I need display like this 3 items and half. Also I try add under photo price and product title and image must be responsive. Can anyone little help me correct this code?

If you were to search for this you can find this Codepen and this Codeply.
Combining the two gives you a working example here (Codepen).
The JS clones the content of each .carousel-item, so each .carousel-item will hold the content of its (5) siblings. The CSS changes the transform so the slider moves accordingly.
It's also responsive by only showing one item before the smallest breakpoint, but this can be easily adjusted (CSS only).
Here it is in a snippet, view it in full screen using the "Full page" link:
Note: had to add a bunch of !important in the CSS which is not needed if you load your CSS after Bootstrap's, like in the Codepen.
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 5
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
.carousel-item .col {
padding: 0 5px;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item>div {
display: none !important;
}
.carousel-inner .carousel-item>div:first-child {
display: block !important;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex !important;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(20%) !important;
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-20%) !important;
}
/* half slides CSS */
.carousel-inner:before {
position: absolute;
top: 0;
bottom: 0;
right: 85%;
left: 0;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-inner:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 85%;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-control-prev {
left: 12% !important;
}
.carousel-control-next {
right: 12% !important;
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0) !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container">
<div class="row justify-content-center">
<div id="carouselExampleControls" class="carousel carousel-dark slide">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/CB997E/333333?text=1" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/DDBEA9/333333?text=2" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/FFE8D6/333333?text=3" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/B7B7A4/333333?text=4" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/A5A58D/333333?text=5" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/6B705C/eeeeee?text=6" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>

Bootstrap 5 carousel with multiple sliders

i'm trying to make bootstrap 5 carousel with multi items. but in my code i could display 3 items at a time. how can make 6 items at a time. I try to change the value in JS code but there it doesn't work. Please correct my following so it could display 6 items at a time and can be vary later. here is complete code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container-fluid text-center my-3">
<div class="row">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/1.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/2.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/3.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>

Just change your bootstrap columns from col-md-4 to col-md-2 so that they can appear 6 columns per row and on your javascript code change minPerSlide to 6
Here is the code for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container-fluid text-center my-3">
<div class="row">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/1.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/2.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/3.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 6
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>

The carousel Only displays 2 element over the code

I want to see all of my items that are cards total number is 6 but I
ended up by seeing only 2 of them in loop please help me to solve this
problem we see total 3 cads at same time on screen and later on it get
replaced by further cards in row.
i want to see all of my items that are cards total number is 6 but i ended up by seeing only 2 of them in loop please help me to solve this problem we see total 3 cads at same time on screen and later on it get replaced by further cards in row.
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.carnext {}
/* card settings */
.card-body {
text-align: center;
}
.card-title {
margin-top: 20%;
}
.top-image-card {
position: absolute;
top: -20%;
left: 38%;
}
#media screen and (max-width: 1349px) and (min-width: 978px) {
.top-image-card {
position: absolute;
top: -20%;
left: 36%;
}
}
#media screen and (max-width: 991px) and (min-width: 668px) {
.top-image-card {
position: absolute;
top: -20%;
left: 28%;
}
}
.card {
margin-top: 80px;
}
/*th
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400;500;900&display=swap" rel="stylesheet">
<!--Font Owsome-->
<script src="https://kit.fontawesome.com/4575ad6c94.js" crossorigin="anonymous"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--Internal CSS-->
<link rel="stylesheet" href="css/styles.css">
<!--JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--Font Qwsome-->
</head>
<body>
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 5 </h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 6</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark carnext" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$('#recipeCarousel').carousel({
interval: 1000
})
$('.carousel .carousel-item').each(function() {
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</body>
</html>

stop scrolling once last li is visible on screen

I have a set of images that is aligned in a single row and overflow:hidden. I have 2 buttons, Left and Right, which when clicked scrolls the div to their opposite sides. The problem I am facing here is even after the last element is visible on the screen the scroll goes on to some extent and then stops, creating aspect for blank space in the screen. How can I prevent this? Here is the Fullscreen result and Fiddle and code below:
$(document).ready(function() {
//Video Slider begins
var totalWidth = 0;
$(".gallery__item").each(function() {
totalWidth = totalWidth + $(this).outerWidth(true) + 100;
});
var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem) {
if ($targetItem.length) {
var newPosition = $targetItem.position().left;
if (newPosition <= maxScrollPosition - 100) {
$targetItem.addClass("vid-item-active");
$targetItem.siblings().removeClass("vid-item-active");
$(".gallery").animate({
left: -(newPosition)
});
} else {
$(".gallery").animate({
left: -(maxScrollPosition)
});
};
};
};
$(".des-style").width("100%");
$(".gallery").width(totalWidth);
$(".vid-item:first").addClass("vid-item-active");
// When the prev button is clicked
// ====================================================================
$(".gallery__controls-prev").on("click", function() {
var $targetItem = $(".vid-item-active").prev();
toGalleryItem($targetItem);
});
// When the next button is clicked
// ====================================================================
$(".gallery__controls-next").on("click", function() {
var $targetItem = $(".vid-item-active").next();
toGalleryItem($targetItem);
});
});
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
}
.services-wrap {
padding: 20px;
background: #fff;
border-radius: 4px;
margin: 0 0 40px;
margin-top: 15px !important;
box-shadow: 5px 5px 5px gray;
max-height: 220px !important;
min-height: 220px !important;
}
.gallery {
position: relative;
left: 0px;
top: 0px;
}
.gallery__item {
float: left;
list-style: outside none none;
margin-right: 20px;
width: 200px;
}
.stay-fixed {
position: absolute;
z-index: 20;
}
.gallery__controls-prev {
cursor: pointer;
float: left;
}
.gallery__controls-next {
cursor: pointer;
float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
width: 28px;
height: 28px;
}
.left {
transform: rotate(-180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="gallery-wrap">
<div class="gallery clearfix">
<ul>
<li class="gallery__item vid-item vid-item-active">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
<div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
<div class="gallery__controls-prev">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
</div>
<div class="gallery__controls-next">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
</div>
</div>
</div>

Please check i have added snippet.
Demo Link
$(document).ready(function() {
//Video Slider begins
var totalWidth = 0;
var mainDivWidth = $(".gallery").outerWidth();
$(".gallery__item").each(function() {
debugger;
totalWidth = totalWidth + $(this).outerWidth(true) + 12;
});
var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem) {
if ($targetItem.length) {
var newPosition = $targetItem.position().left;
debugger;
if (totalWidth < newPosition + mainDivWidth) {
return false;
}
if (newPosition <= maxScrollPosition - 100) {
$targetItem.addClass("vid-item-active");
$targetItem.siblings().removeClass("vid-item-active");
$(".gallery").animate({
left: -(newPosition)
});
} else {
$(".gallery").animate({
left: -(maxScrollPosition)
});
};
};
};
$(".des-style").width("100%");
$(".gallery").width(totalWidth);
//$(".gallery").css("left", "-40px");
// Basic HTML manipulation
// ====================================================================
// Set the gallery width to the totalWidth. This allows all items to
// be on one line.
$(".vid-item:first").addClass("vid-item-active");
// When the prev button is clicked
// ====================================================================
$(".gallery__controls-prev").on("click", function() {
var $targetItem = $(".vid-item-active").prev();
toGalleryItem($targetItem);
});
// When the next button is clicked
// ====================================================================
$(".gallery__controls-next").on("click", function() {
var $targetItem = $(".vid-item-active").next();
toGalleryItem($targetItem);
});
});
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
}
.services-wrap {
padding: 20px;
background: #fff;
border-radius: 4px;
margin: 0 0 40px;
margin-top: 15px !important;
box-shadow: 5px 5px 5px gray;
max-height: 220px !important;
min-height: 220px !important;
}
.gallery {
position: relative;
left: 0px;
top: 0px;
}
.gallery__item {
float: left;
list-style: outside none none;
margin-right: 20px;
width: 200px;
}
.stay-fixed {
position: absolute;
z-index: 20;
}
.gallery__controls-prev {
cursor: pointer;
float: left;
}
.gallery__controls-next {
cursor: pointer;
float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
width: 28px;
height: 28px;
}
.left {
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-wrap">
<div class="gallery clearfix">
<ul>
<li class="gallery__item vid-item vid-item-active">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
<div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
<div class="gallery__controls-prev">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
</div>
<div class="gallery__controls-next">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
</div>
</div>
</div>

How to make 3 images slide at a time?

The below code is sliding one thumbnail at a time. I want to slide 3 at time. Can someone please help. Thanks!
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});

The trick is to use bootstrap class "row".
jQuery
$('#myCarousel').carousel({
interval: 10000
})
html
<div class="col-md-7">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
css
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
.carousel-control.left,.carousel-control.right {background-image:none; color: black;}
Hope it helps!

Categories

Resources