The actual JS Doens't work for me..Some conflicts.
So add a new class (nav-carousel)
<!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified nav-carousel">
The The JS Code
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav-carousel li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('#myCarousel').find('.nav-carousel li').length-1;
var current = $('.nav-carousel li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav-carousel li').first().addClass('active');
}
}
clickEvent = false;
});
});
And Make sure this are included in the header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
tycyssg () - 6 years ago - Reply 0
