I created a rotating logo module in Wordpress using a bootstrap carousel found here: https://codepen.io/alephx/pen/EmZKpd. I have the carousel working as intended in terms of showing the logos and rotating but I am having trouble figuring out how to modify the script or code to make it so when it rotates it goes from showing images 1-4 to 5-8 (rather than going from 1-4 to 2-5 to 3-6 one at a time). Can anyone help me figure out what should change to make it so that clicking the arrows/letting the carousel auto rotate will move the logos/images by 4 instead of 1 at a time?
The carousel works to rotate logos/images 1 at a time when auto rotating or when clicking the advance/previous arrows. I want it to rotate 4 at a time.
I've tried to adjust the script and tried researching online but wasn't sure what determines how many images are rotated
$('.carousel[data-type="multi"] .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
}); .carousel-control {
width: 4%;
}
.carousel-control.left,
.carousel-control.right {
margin-left: 15px;
background-image: none;
}
@media (max-width: 767px) {
.carousel-inner .active.left {
left: -100%;
}
.carousel-inner .next {
left: 100%;
}
.carousel-inner .prev {
left: -100%;
}
.active>div {
display: none;
}
.active>div:first-child {
display: block;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.carousel-inner .active.left {
left: -50%;
}
.carousel-inner .next {
left: 50%;
}
.carousel-inner .prev {
left: -50%;
}
.active>div {
display: none;
}
.active>div:first-child {
display: block;
}
.active>div:first-child+div {
display: block;
}
}
@media (min-width: 992px) {
.carousel-inner .active.left {
left: -50%;
}
.carousel-inner .next {
left: 50%;
}
.carousel-inner .prev {
left: -50%;
}
}
@media (max-width:767px) {
.carousel-inner>.item.active,
.carousel-inner>.item.next.left,
.carousel-inner>.item.prev.right {
left: 8%;
}
}
.col-md-offset-3 {
margin-left: 0%;
width: 70%;
}
#right-carousel-control {
content: '';
background: url(http://sitexstaging.wpengine.com/wp-content/uploads/2023/06/right-arrow.webp);
vertical-align: middle;
background-size: 50px;
background-position: center;
background-repeat: no-repeat;
margin-right: -50px;
}
#left-carousel-control {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
background: url(http://sitexstaging.wpengine.com/wp-content/uploads/2023/06/right-arrow.webp);
vertical-align: middle;
background-size: 50px;
background-position: center;
background-repeat: no-repeat;
margin-left: -50px;
}
@media (max-width:600px) {
#left-carousel-control,
#right-carousel-control {
width: 40px
}
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="display:flex; justify-content:center;flex-wrap:wrap;">
<div class="col-md-12 text-center">
<h3 style="padding-bottom:30px;">Trusted Partners</h3>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="9000" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=1">
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=2">
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=3">
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=4">
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=5">
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=6">
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=7">
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="logo" src="http://via.placeholder.com/350x180?text=8">
</div>
</div>
<a class="left carousel-control" id="left-carousel-control" href="#myCarousel" data-slide="prev"></a>
<a class="right carousel-control" id="right-carousel-control" href="#myCarousel" data-slide="next"></a>
</div>
</div>