I found this Fiddle that synchronizes two Bootstrap Carousels, it’s what I’m looking for but it’s using jQuery; I want to reduce it to Vanilla Javascript.
The error in Console is Cannot read properties of null (reading 'length') — I think I’m getting this error because there is no “next sibling element” for the last element. I’m unfamiliar with jQuery and learning Javascript, so I’m not sure how to fix the code.
Also, is there a Javascript equivalent of jQuery’s .siblings() method? And is Javascript’s .cloneNode() method equivalent to jQuery’s clone()? Thank you.
(function() {
// Initalize the "slide" title
var carouselHeader = document.querySelector('#carousel-text>h3')
carouselHeader.innerHTML = carouselHeader.getAttribute('slide-title');
var items = document.querySelectorAll('.carousel[ data-type="multi"] .item');
items.forEach(function(e, i, items) {
var next = items[i].nextElementSibling;
if (!next.length) {
console.log(next)
}
})
})();
/*** More jQuery to Reduce ***/
/* $('.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 < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function () {
activeslide = $(this).find('.active');
$('#carousel-text>h3').text(activeslide.data('slide-title'));
$('#numberCarousel').carousel(activeslide.index());
}); */#numberCarousel {
padding: 40px;
}
#numberCarousel .carousel-inner {
margin-left: 0;
}
#numberCarousel .item {
text-align: center;
cursor: pointer;
}
#numberCarousel .item .col-xs-2 {
background-color: #fff;
}
#numberCarousel .carousel-inner>.next {
left: 16.66666667%;
}
#numberCarousel .carousel-inner>.prev {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.next.left,
#numberCarousel .carousel-inner>.prev.right {
left: 0;
}
#numberCarousel .carousel-inner>.active.left {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.active.right {
left: 16.66666667%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-control {
width: 10%;
}
#numberCarousel .carousel-control .icon-prev,
#numberCarousel .carousel-control .icon-next {
transform: translate(0, -50%);
}<div class="container-fluid" id="slider">
<div class="row">
<div class="col-xs-12">
<div id="carousel-text">
<h3></h3>
</div>
<!--/#carousel-text-->
</div>
<!-- /.col-xs-12 #slider -->
<div class="col-xs-12 hidden-xs carousel slide" data-type="multi" id="numberCarousel">
<div class="carousel-inner row">
<div class="item active">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="0">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="1">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">2</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="2">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">3</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="3">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">4</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="4">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="5">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">6</i>
</span>
</a>
</div>
</div>
</div>
<!-- /.carousel-inner.row -->
<a class="left carousel-control" href="#numberCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#numberCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /#numberCarousel -->
<div class="col-xs-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="active item" data-slide-title="State 1">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 2">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 3">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 4">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 5">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 6">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
</div>
<!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev">back</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next">next</span>
</a>
</div>
<!-- /#myCarousel -->
</div>
<!-- /#carousel-bounding-box -->
</div>
<!--/.row-->
</div>
<!--/.container-fluid-->