I have both the owl-carousel script and filter script in my js file. Somehow, due to some reasons, my filter buttons are not changing color to active mode as expected. When I delete the carousel script code, the buttons behave perfectly but I lose my carousel images and content. Some help would do.
//START OF CAROUSEL
$(document).ready(function () {
// top-ads owl carousel
$("#top-ads .owl-carousel").owlCarousel({
dots: true,
items: 1,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 3500,
autoplayHoverPause: true
});
// top-ads owl carousel
$(".owl-carousel").owlCarousel({
dots: true,
items: 1,
});
});
//END OF CAROUSEL
//START OF FILTER BUTTONS
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
peetRemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) peetAddClass(x[i], "show");
}
}
function peetAddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function peetRemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("selections");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
//END OF FILTER BUTTONS