Is there a way to hide the previous button on the first item and hide the right button when the carousel reaches the last item? I've tried different solutions but couldn't get it to work. Any help in understanding how to implement this for a Bootstrap carousel would be greatly appreciated. Thank you in advance for your assistance.
Here is the tabbed slider I'm working with: http://codepen.io/hafsadanguir/pen/ZONxvV
(function($) {
$(document).ready( function() {
$('#myCarousel').carousel({
pause: true,
interval: false
});
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav li').length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to')) +1;
if(count+1 == id) {
$('.nav li').first().addClass('active');
}
}
});
});
})(jQuery);