Develop Reference

Sub menu accordion closes when it should open (nested accordion logic seems off)

I have a multi-nested accordion menu is currently behaving glitchy.
When I'm clicking into a submenu (i.e. "what we deliver 2", it closes the main accordion and then when I open the main accordion, that's when the sub accordion opens. See this gif for a demo of my issue:
I'm trying to simply open and close each accordion on it's li click, but unsure why it closes the entire parent accordion and then appears once the parent accordion opens (it's the same behaviour when closing the sub accordions, as shown in the gif).
Demo:
$(function() {
/*
* define vars
*/
const header = $(".header");
const hamburger_trigger = $(".hamburger__trigger");
const hamburger_popup = $(".hamburger__popup");
/*
* open hamburger on click
*/
$(hamburger_trigger).click(function(e) {
e.preventDefault();
$(header).toggleClass("hamburger--open");
$(hamburger_popup).toggleClass("active");
});
/*
* hamburger submenu
*/
$(".hamburger--has-submenu").click(function() {
console.log("click");
var child_menu = $(this).children(".hamburger__submenu");
if ($(this).hasClass("hamburger__submenu--open")) {
$(this).removeClass("hamburger__submenu--open");
child_menu.removeClass("d-block");
} else {
$(this).addClass("hamburger__submenu--open");
child_menu.addClass("d-block");
}
});
// for children submenus
$(".hamburger-trigger-submenu").click(function() {
console.log("click");
var child_menu = $(this).children(".hamburger__submenu");
if ($(this).hasClass("hamburger__submenu--open")) {
child_menu.removeClass("hamburger__submenu--open");
} else {
child_menu.addClass("hamburger__submenu--open");
}
});
});
/* HEADER */
.header {
padding: 30px 0;
}
/* HAMBURGER */
.hamburger__trigger {
cursor: pointer;
}
.hamburger__trigger:hover {
color: green;
}
.hamburger__popup {
background: black;
visibility: hidden;
display: none;
height: 0;
padding: 40px 15px 140px 15px;
overflow-y: scroll;
}
.hamburger__popup.active {
visibility: visible;
-webkit-animation: fadeIn 0.3s;
animation: fadeIn 0.3s;
display: block;
position: absolute;
left: 0;
top: 100px;
width: 100%;
height: 100vh;
z-index: 9999;
}
.hamburger__popup-inner {
display: flex;
align-items: flex-start;
flex-direction: column;
overflow: auto;
flex-grow: 1;
}
.hamburger__li > a {
margin: 10px 0;
display: block;
text-decoration: none !important;
}
.hamburger__submenu--level-2, .hamburger__submenu--level-3, .hamburger__submenu--level-4 {
display: none;
padding-left: 10px;
}
/* GENERAL */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.background--black {
background: #000000;
}
.color--white {
color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header background--black">
<div class="container">
<div class="row justify-content-end">
<div class="col-4">
<div class="hamburger">
<span class="hamburger__trigger color--white">Click me</span>
</div>
</div>
</div>
</div>
<div class="hamburger__popup">
<div class="hamburger__popup-inner color--white">
<nav class="hamburger__menu w-100">
<ul class="hamburger__menu-ul">
<!-- MAIN GROUP -->
<li class="hamburger__li hamburger__depth-1 hamburger--has-submenu ">
<a class="hamburger__parent-item color--white" href="#">
What we deliver
</a>
<!-- SUB MENU IN MAIN GROUP -->
<ul class="hamburger__submenu hamburger__submenu--level-2">
<li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
<a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
<span>What we deliver 2</span>
</a>
<!-- SUB MENU WITHIN SUBMENU -->
<ul class="hamburger__submenu hamburger__submenu--level-3">
<li class="hamburger__li hamburger__depth-3 hamburger-trigger-submenu">
<a class="hamburger__link color--white position-relative" href="#">
What we deliver 2.1
</a>
</li>
</ul>
<!-- SUB MENU WITHIN SUBMENU END-->
</li>
<li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
<a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
<span>What we deliver 3</span>
</a>
<!-- SUB MENU WITHIN SUBMENU -->
<ul class="hamburger__submenu hamburger__submenu--level-3">
<li class="hamburger__li hamburger__depth-3 hamburger-trigger-submenu">
<a class="hamburger__link color--white position-relative" href="#">
What we deliver 3.1
</a>
</li>
</ul>
<!-- SUB MENU WITHIN SUBMENU END-->
</li>
</ul>
<!-- SUB MENU IN MAIN GROUP END -->
</li>
<!-- MAIN GROUP END -->
</ul>
</nav>
</div>
</div>
</header>

You need to add e.stopPropagation(); (docs) within the $(".hamburger-trigger-submenu").click(...) handler to prevent the event from bubbling up to $(".hamburger--has-submenu").click(...).
Full Code:
$(function() {
/*
* define vars
*/
const header = $(".header");
const hamburger_trigger = $(".hamburger__trigger");
const hamburger_popup = $(".hamburger__popup");
/*
* open hamburger on click
*/
$(hamburger_trigger).click(function(e) {
e.preventDefault();
$(header).toggleClass("hamburger--open");
$(hamburger_popup).toggleClass("active");
});
/*
* hamburger submenu
*/
$(".hamburger--has-submenu").click(function() {
console.log("click");
var child_menu = $(this).children(".hamburger__submenu");
if ($(this).hasClass("hamburger__submenu--open")) {
$(this).removeClass("hamburger__submenu--open");
child_menu.removeClass("d-block");
} else {
$(this).addClass("hamburger__submenu--open");
child_menu.addClass("d-block");
}
});
// for children submenus
$(".hamburger-trigger-submenu").click(function(e) {
console.log("click");
e.stopPropagation();
var child_menu = $(this).children(".hamburger__submenu");
if ($(this).hasClass("hamburger__submenu--open")) {
child_menu.removeClass("hamburger__submenu--open");
} else {
child_menu.addClass("hamburger__submenu--open");
}
});
});
/* HEADER */
.header {
padding: 30px 0;
}
/* HAMBURGER */
.hamburger__trigger {
cursor: pointer;
}
.hamburger__trigger:hover {
color: green;
}
.hamburger__popup {
background: black;
visibility: hidden;
display: none;
height: 0;
padding: 40px 15px 140px 15px;
overflow-y: scroll;
}
.hamburger__popup.active {
visibility: visible;
-webkit-animation: fadeIn 0.3s;
animation: fadeIn 0.3s;
display: block;
position: absolute;
left: 0;
top: 100px;
width: 100%;
height: 100vh;
z-index: 9999;
}
.hamburger__popup-inner {
display: flex;
align-items: flex-start;
flex-direction: column;
overflow: auto;
flex-grow: 1;
}
.hamburger__li > a {
margin: 10px 0;
display: block;
text-decoration: none !important;
}
.hamburger__submenu--level-2, .hamburger__submenu--level-3, .hamburger__submenu--level-4 {
display: none;
padding-left: 10px;
}
/* GENERAL */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.background--black {
background: #000000;
}
.color--white {
color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header background--black">
<div class="container">
<div class="row justify-content-end">
<div class="col-4">
<div class="hamburger">
<span class="hamburger__trigger color--white">Click me</span>
</div>
</div>
</div>
</div>
<div class="hamburger__popup">
<div class="hamburger__popup-inner color--white">
<nav class="hamburger__menu w-100">
<ul class="hamburger__menu-ul">
<!-- MAIN GROUP -->
<li class="hamburger__li hamburger__depth-1 hamburger--has-submenu ">
<a class="hamburger__parent-item color--white" href="#">
What we deliver
</a>
<!-- SUB MENU IN MAIN GROUP -->
<ul class="hamburger__submenu hamburger__submenu--level-2">
<li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
<a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
<span>What we deliver 2</span>
</a>
<!-- SUB MENU WITHIN SUBMENU -->
<ul class="hamburger__submenu hamburger__submenu--level-3">
<li class="hamburger__li hamburger__depth-3 hamburger-trigger-submenu">
<a class="hamburger__link color--white position-relative" href="#">
What we deliver 2.1
</a>
</li>
</ul>
<!-- SUB MENU WITHIN SUBMENU END-->
</li>
<li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
<a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
<span>What we deliver 3</span>
</a>
<!-- SUB MENU WITHIN SUBMENU -->
<ul class="hamburger__submenu hamburger__submenu--level-3">
<li class="hamburger__li hamburger__depth-3 hamburger-trigger-submenu">
<a class="hamburger__link color--white position-relative" href="#">
What we deliver 3.1
</a>
</li>
</ul>
<!-- SUB MENU WITHIN SUBMENU END-->
</li>
</ul>
<!-- SUB MENU IN MAIN GROUP END -->
</li>
<!-- MAIN GROUP END -->
</ul>
</nav>
</div>
</div>
</header>

since the two functions basically do the same you could simplify them like that:
$(function() {
/*
* define vars
*/
const header = $(".header");
const hamburger_trigger = $(".hamburger__trigger");
const hamburger_popup = $(".hamburger__popup");
/*
* open hamburger on click
*/
$(hamburger_trigger).click(function(e) {
e.preventDefault();
$(header).toggleClass("hamburger--open");
$(hamburger_popup).toggleClass("active");
});
/*
* open menus on click
*/
$('.hamburger--has-submenu, .hamburger-trigger-submenu').on('click', function (e){
e.stopPropagation();
let child_menu = $(this).children('.hamburger__submenu');
$(this).toggleClass('hamburger__submenu--open');
child_menu.toggleClass('d-block');
})
});

you can solve it with simple pseudo class in css named :focus-within;
:focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused.
ul:focus-within {
display: block;
}
(no need complex js )

Hide scrollbar and add arrows instead

I have a "div" with some images and there is a scrollbar at the bottom.
What I would like to do is adding arrows to scroll and make the scrollbar invisible
So far I have tried some of my methods but it did not work.
.scoll-pane {
width: 100%;
height: auto;
overflow: auto;
outline: none;
overflow-y: hidden;
padding-bottom: 15px;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
<div class="container">
<div class="row">
<div class="col-12">
<div class="scoll-pane mt-4">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

You can hide the scroll bar with webkit-scrollbar and scrollbar-width CSS. Additionally, you can use some simple javascript selectors to "slide" a div when buttons are pressed, as demonstrated in the example below:
var button = document.getElementById('slide');
button.onclick = function () {
var container = document.getElementById('container');
sideScroll(container,'right',25,100,10);
};
var back = document.getElementById('slideBack');
back.onclick = function () {
var container = document.getElementById('container');
sideScroll(container,'left',25,100,10);
};
function sideScroll(element,direction,speed,distance,step){
scrollAmount = 0;
var slideTimer = setInterval(function(){
if(direction == 'left'){
element.scrollLeft -= step;
} else {
element.scrollLeft += step;
}
scrollAmount += step;
if(scrollAmount >= distance){
window.clearInterval(slideTimer);
}
}, speed);
}
.scoll-pane {
width: 100%;
height: auto;
overflow: auto;
outline: none;
overflow-y: hidden;
padding-bottom: 15px;
-ms-overflow-style: scroll; // IE 10+
scrollbar-width: none; // Firefox
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
.scoll-pane::-webkit-scrollbar {
display: none; // Safari and Chrome
}
<div class="container">
<div class="row">
<div class="col-12">
<div class="scoll-pane mt-4" id="container">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
</div>
</div>
</div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Maybe what you are looking for is a Carousel?
<style>
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://robohash.org/test" alt="...">
<img src="https://robohash.org/test" alt="...">
</div>
<div class="carousel-item">
<img src="https://robohash.org/test" alt="...">
</div>
<div class="carousel-item">
<img src="https://robohash.org/test" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I am using something like this, it is very simple code.
/* SIDE SCROLL PARTIAL*/
var frameWidth = $('.products__wrapper').width(), // width of div showed on display
scrollElmtWidth = $('.products__wrapper')[0].scrollWidth, // width of div also with hidden part
scrollAmount = 0,
distance = 0,
maxDistance = scrollElmtWidth - frameWidth; // width of hidden part - width which must be uncovered bz scrolling
scrollStep = maxDistance/4; // divide all resolution to 4 steps
$('.right-arrow-partial').click(function () {
event.preventDefault();
distance = $('.products__wrapper').scrollLeft();
if (distance < maxDistance) {
//if scrolled distance is less then max distance + 1/4 px each time -> after max distance have not to count + 1/4 px
scrollAmount += scrollStep;
$('.products__wrapper').animate({scrollLeft: scrollAmount}, 500);
}
})
$('.left-arrow-partial').click(function () {
event.preventDefault();
distance = $('.products__wrapper').scrollLeft();
//if (scrollAmount > maxDistance) {scrollAmount = maxDistance}
if (scrollAmount > 0) {
// if it is start of scroll area -> cannot discount - 1/4 px
scrollAmount -= scrollStep;
$('.products__wrapper').animate({scrollLeft: scrollAmount}, 500);
}
})

How to hide arrows that following the cursor on mouseover a button or link

I have a slider with slider controls left and right that are arrows and following the cursor. Those are replacing the standard nav of the revolution slider. That all looks great until I hover over a content button and then the hover function does not wor properly anymore. So I want to hide the arrows when hovering over those buttons.
I tried with CSS display:none or background:none but that didn't work:
.tp-leftarrow a:hover, .tp-rightarrow a:hover {
background: none !important;
display:none;
}
I'm sure it needs to be done with JS but my JS skills are really not up to speed currently.
CSS:
.rev_slider.interactive-arrows {cursor: none}
.rev_slider.interactive-arrows .rs-layer[data-actions] {cursor: pointer}
.rev_slider.interactive-arrows .tp-videolayer {cursor: auto}
.interactive-arrows .tparrows {
cursor: none;
visibility: hidden;
pointer-events: none;
transform: none !important;
transition: none !important;
}
.tp-leftarrow:before {
/*content: "\23" !important; */
color: #000;
content: "" !important;
background: url(/wp-content/themes/bridge/css/img/slider-left-normal.png);
color: #000;
width:60px;
height:39px;
}
.tp-rightarrow:before {
/* content: "\24" !important; */
content: "" !important;
background: url(/wp-content/themes/bridge/css/img/slider-right-normal.png);
color: #000;
width:60px;
height:39px;
/* filter: drop-shadow(0 0 5px #333); */
font-size: 66px !important;
}
JS:
(function() {
if('ontouchend' in document) return;
// ***************************************************
// replace the number "26" below with your slider's ID
var api = revapi1.addClass('interactive-arrows');
// ***************************************************
var left,
right,
prevX,
prevY,
center,
offset,
arrowW,
arrowH,
entered,
leftIsOn,
rightIsOn,
fromClick,
nextSlide,
navHovered;
api.on('revolution.slide.onloaded', function() {
left = api.find('.tp-leftarrow').off('click').css('visibility', 'visible').hide();
right = api.find('.tp-rightarrow').off('click').css('visibility', 'visible').hide();
arrowW = right.outerWidth(true) >> 1;
arrowH = right.outerHeight(true) >> 1;
api.on('mouseenter mouseleave mousemove click', function(e) {
switch(e.type) {
case 'mouseenter':
center = api.width() >> 1;
offset = api.offset();
entered = true;
updateArrows(e.pageX, e.pageY);
break;
case 'mouseleave':
entered = false;
leftIsOn = false;
rightIsOn = false;
right.hide();
left.hide();
break;
case 'mousemove':
if(!entered) api.trigger('mouseenter');
updateArrows(e.pageX, e.pageY);
break;
case 'click':
var $this = jQuery(this);
if(this.className.search(/tp-kbimg|tp-bgimg|rs-fullvideo-cover/) !== -1 ||
(this.tagName.toLowerCase() !== 'a' && !this.getAttribute('data-actions') && !$this.closest('.tp-videolayer').length)) {
fromClick = true;
api[nextSlide ? 'revnext' : 'revprev']();
}
break;
}
}).on('revolution.slide.onbeforeswap', function(e) {
if(fromClick) {
fromClick = false;
updateArrows(prevX, prevY);
}
}).find('.tp-bullets, .tp-tabs, .tp-thumbs, .rs-layer[data-actions], a.rs-layer, .tp-videolayer').on('mouseover mouseout click', function(e) {
switch(e.type) {
case 'mouseover':
navHovered = true;
right.hide();
left.hide();
break;
case 'mouseout':
navHovered = false;
updateArrows(e.pageX, e.pageY);
break;
case 'click':
e.stopPropagation();
break;
}
});
});
function updateArrows(pageX, pageY) {
if(navHovered) return;
var posX = pageX - offset.left,
posY = pageY - offset.top,
arrow;
if(posX > center) {
arrow = right.show();
nextSlide = true;
left.hide();
}
else {
arrow = left.show();
nextSlide = false;
right.hide();
}
arrow[0].style.left = (posX - arrowW) + 'px';
arrow[0].style.top = (posY - arrowH) + 'px';
prevX = pageX;
prevY = pageY;
}
})();
It is the revolution slider that does not work and I cannot figure it out why.
Thanks a lot for your help!

found this on codepen
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.cursor-icons {
display: none;
}
.carousel-control {
width: 50%;
}
.carousel .right:hover {
cursor: url("http://johnuberbacher.com/projects/codepen/arrow-right.png"), default !important
}
.carousel .left:hover {
cursor: url("http://johnuberbacher.com/projects/codepen/arrow-left.png"), default !important
}
.carousel-indicators li {
border-radius: 3px;
height: 13px;
width: 13px;
margin: 2px;
font-weight: 800;
border: 2px solid #fff;
}
.carousel-indicators .active {
height: 17px;
width: 17px;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<br>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item">
<img src="http://johnuberbacher.com/projects/codepen/slideshow-1.jpg">
<div class="carousel-caption">
<h4>Slideshow 1</h4>
</div>
</div>
<div class="item active">
<img src="http://johnuberbacher.com/projects/codepen/slideshow-2.jpg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Slideshow 2</h4>
</div>
</div>
<div class="item">
<img src="http://johnuberbacher.com/projects/codepen/slideshow-3.jpg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Slideshow 3</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="cursor-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="cursor-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
</div>
<!-- End Carousel Card -->
</div>

You can use JS or CSS:
document.getElementById("nocursor").style.cursor = "default"
.nocursor {
cursor: default
}
Hover Over me
Tutorial: W3Schools

Why my carousel caption animation is not working?

I am trying to set animation to bootstrap carousel caption. But I am not getting.
Here is my code index.html
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MatajerWebSite.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/style.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<%--<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel();
});
</script>--%>
</head>
<body>
<form id="form1" runat="server">
<div class="container main-container">
<h1>Bootstrap Carousel with Animate.css</h1>
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active deepskyblue">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft">This is the caption for slide 1
</h3>
<h3 data-animation="animated bounceInRight">This is the caption for slide 1
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item skyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated bounceInDown">
<span class="glyphicon glyphicon-heart"></span>
</h3>
<h3 data-animation="animated bounceInUp">This is the caption for slide 2
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item darkerskyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated zoomInLeft">
<span class="glyphicon glyphicon-glass"></span>
</h3>
<h3 data-animation="animated flipInX">This is the caption for slide 3
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /.carousel -->
</div>
<!-- /.container -->
<p class="p">Demo by Antonietta Perna. See article.</p>
</form>
style.js
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
style.css file
.main-container {
padding: 10px 15px;
}
.skyblue {
background-color: #22c8ff;
}
.deepskyblue {
background-color: #00bfff;
}
.darkerskyblue {
background-color: #00a6dd;
}
.carousel-indicators {
bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
.carousel .item {
min-height: 350px;
height: 100%;
width:100%;
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
background-color: #09c;
}
.carousel-caption h3 {
padding: .5em;
}
.carousel .icon-container {
display: inline-block;
font-size: 25px;
line-height: 25px;
padding: 1em;
text-align: center;
border-radius: 50%;
}
.carousel-caption button {
border-color: #00bfff;
margin-top: 1em;
}
/* Animation delays */
.carousel-caption h3:first-child {
animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
animation-delay: 2s;
}
.carousel-caption button {
animation-delay: 3s;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
.p {
padding-top: 125px;
text-align: center;
}
.p a {
text-decoration: underline;
}
this is my complete code. I got error like below
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): status=2147746065 source: http://localhost:49905/fonts/glyphicons-halflings-regular.woff2

The error message gives you a fairly clear indication of the problem.
You are referencing glyphicons but the font has failed to load. Check the browser console for any other information and then correct the HTML to make sure it is loaded.

My Javascript code doesn't work properly

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer() {
audio = new Audio();
audio.src = "nineDays.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
// Add Event Handling
playbtn.addEventListener("click", playPause);
mutebtn.addEventListener("click", mute);
// Functions
function playPause() {
if (audio.paused) {
audio.play();
playbtn.style.background = "url(video_pause.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(play.png) no-repeat";
}
}
function mute() {
if (audio.muted) {
audio.muted = false;
mutebtn.style.background = "url(speaker.png) no-repeat";
} else {
audio.muted = true;
mutebtn.style.background = "url(mute.png) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
body {
background: #282828;
color: white;
font-family: sans-serif;
}
.nav {
display: flex;
justify-content: flex-end;
position: absolute;
width: 100%;
top: 0;
left: 0;
list-style-type: none;
}
li a {
color: white;
text-decoration: none;
padding: 0 10px;
}
h1 {
font-size: 13px;
margin-bottom: 80%;
margin-right: 50%;
font-family: 'Montserrat';
}
.container {
padding-top: 8%;
}
button {
border: none;
cursor: pointer;
outline: none;
}
button#playpausebtn {
background: url(video_pause.png) center center no-repeat;
background-size: cover;
margin-left: 20px;
marging-top: 35px;
width: 20px;
height: 15px;
}
button#mutebtn {
background: url(speaker.png) center center no-repeat;
background-size: cover;
margin-top: 35px;
width: 25px;
height: 20px;
}
.soundNav {
position: absolute;
width: 20%;
height: 30px;
z-index: 99999;
}
<body>
<div class="soundNav">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
</div>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation">About me
</li>
<li role="presentation" class="active">Work
</li>
<li role="presentation">Get In Touch
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!--Indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> © Ed Sheeran Concert at Blossom Center</br>
August 2015
</h1>
</div>
</div>
<div class="item">
<img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item">
<img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item ">
<img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </h1>
</div>
</div>
<!--controls or next and prev buttons-->
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to understand what the problem is- whenever someone opens the page, the music starts. I want the user to be able to pause or mute the music whenever they want to. And that works fine, except my icons won't show, it's as they are hidden. Everything is in the same folder. I was thinking to use glyphicons, but I don't know how to use them inside of the javascript.

the javascript style syntax is littlebit different. use
mutebtn.style.backgroundImage = "url('mute.png') no-repeat";
and make sure ./mute.png exists and is readable