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);
}
})
Related
I have a Bootstrap 5 carousel with two lines of caption per slide. Each time right before the slide changes, I want the old top caption to move up and fade out, and the old bottom caption to move down and fade out. Then on the next slide, the new top caption should move down into place and fade in and the new bottom caption should move up into place and fade in.
I'm a novice coder and I'm doing this as an excercise. You can see the code I've written for this below, or in this CodePen. I've tried it two ways, the second method is commented in the JS section in CodePen.
I've also added a responsive section to the CSS so you can kind of see what I want to happen: the animation is triggered at a window width of 600px.
The same animation doesn't trigger when the slides change, though. Why not? How can I make it better?
Method 1:
import * as jquery from "https://cdn.skypack.dev/jQuery#1.7.4";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
const SlideClass = ("slide");
$('#CarouselTextAnim').on('slide.bs.carousel', function() {
TopCap.classlist.addClass(SlideClass);
BottomCap.classlist.addClass(SlideClass);
});
$('#CarouselTextAnim').on('slid.bs.carousel', function() {
TopCap.classlist.removeClass(SlideClass);
BottomCap.classlist.removeClass(SlideClass);
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</body>
Method 2 (only the Javascript is different):
import * as jquery from "https://cdn.skypack.dev/jQuery#1.7.4";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
$('#CarouselTextAnim').on('slide.bs.carousel', function() {
TopCap.setAttribute('top', '0');
TopCap.setAttribute('opacity', '0');
BottomCap.setAttribute('bottom', '0');
BottomCap.setAttribute('opacity', '0');
});
$('#CarouselTextAnim').on('slid.bs.carousel', function() {
TopCap.setAttribute('top', '40%');
TopCap.setAttribute('opacity', '1');
BottomCap.setAttribute('bottom', '4vh');
BottomCap.setAttribute('opacity', '1');
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</body>
You are mixing jQuery libraries in your pen, as well as mixing vanilla js with jQuery, just stick to one, I'd suggest vanilla.
I did not go your styles entirely to find out which class it uses to handle that bottom effect, which you will have to update, but the top element is working.
Also unlike using jQuery's $ to select elements, when using vanilla js const TopCap = document.querySelector (".carousel-caption"); and have several elements as in each slide, you would have to loop through them and select them all as follow: const TopCap = document.querySelectorAll (".carousel-caption");
const TopCap = document.querySelectorAll(".carousel-caption");
const BottomCap = document.querySelectorAll(".caption-bottom");
var myCarousel = document.querySelector('#CarouselTextAnim')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: true
})
myCarousel.addEventListener('slid.bs.carousel', function () {
TopCap.forEach(cap=>cap.classList.remove('slide'));
BottomCap.forEach(cap=>cap.classList.remove('slide'));
});
myCarousel.addEventListener('slide.bs.carousel', function () {
TopCap.forEach(cap=>cap.classList.add('slide'));
BottomCap.forEach(cap=>cap.classList.add('slide'));
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
I have many events on my page, and I have one div with some images inside (scrollbar is active), and I have one function that works with arrows (scrollbar is hidden).
What I want is: I need the slide buttons to work for every event, and to move just the event you are checking out.
I have tried some methods but I cannot get it to work
var next = document.getElementById('slide');
next.onclick = function() {
var container = document.getElementById('scrollFunction');
sideScroll(container, 'right', 25, 100, 10);
};
var back = document.getElementById('slideBack');
back.onclick = function() {
var container = document.getElementById('scrollFunction');
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;
scrollbar-width: none;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
.scoll-pane::-webkit-scrollbar {
display: none;
}
#slideBack {
cursor: pointer;
position: absolute;
top: 105px;
left: -15px;
}
#slide {
cursor: pointer;
position: absolute;
top: 100px;
right: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This HTML code will be repeated for every event -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<div class="col-12">
<div class="scoll-pane mt-4" id="scrollFunction">
<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>
<i id="slideBack" class="fas fa-arrow-left"></i>
<i id="slide" class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<div class="col-12">
<div class="scoll-pane mt-4" id="scrollFunction">
<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>
<i id="slideBack" class="fas fa-arrow-left"></i>
<i id="slide" class="fas fa-arrow-right"></i>
</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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
The problem is because you're duplicating id attributes when they must be unique. To fix this you need to use common classes on the repeated DOM structures. Then in your JS you need to traverse this DOM structure to find the scrollable elements related to the clicked next/previous icons.
Note the loops over the .slide and .slideBack elements in order to add the event listeners to all of them individually. Also note the use of parentElement.querySelector() to find the related .scroll-pane.
document.querySelectorAll('.slide').forEach(function(next) {
next.addEventListener('click', function() {
var container = this.parentElement.querySelector('.scoll-pane');
sideScroll(container, 'right', 25, 100, 10);
});
});
document.querySelectorAll('.slideBack').forEach(function(back) {
back.addEventListener('click', function() {
var container = this.parentElement.querySelector('.scoll-pane');
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;
scrollbar-width: none;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
.scoll-pane::-webkit-scrollbar {
display: none;
}
.slideBack {
cursor: pointer;
position: absolute;
top: 105px;
left: -15px;
}
.slide {
cursor: pointer;
position: absolute;
top: 100px;
right: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This HTML code will be repeated for every event -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<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>
<i class="slideBack fas fa-arrow-left"></i>
<i class="slide fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<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>
<i class="slideBack fas fa-arrow-left"></i>
<i class="slide fas fa-arrow-right"></i>
</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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Try this to increase in the moving position as below.
next.onclick = function() {
var container = document.getElementById('scrollFunction');
sideScroll(container, 'right', 25, 300, 10);
};
var back = document.getElementById('slideBack');
back.onclick = function() {
var container = document.getElementById('scrollFunction');
sideScroll(container, 'left', 25, 300, 10);
};
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
This is the site. You don't have to visit the site, everything is written here. It's wordpress using an old wordpress theme that I can't modify to make the images look like a slideshow with thumbnails. I could access header and footer to write the css and the javascript needed but it's so hard to find which function is echoing the images and write the classes by hand. I can edit the classes using jquery
So I took this example
// thumbnails.carousel.js jQuery plugin
;(function(window, $, undefined) {
var conf = {
center: true,
backgroundControl: false
};
var cache = {
$carouselContainer: $('.thumbnails-carousel').parent(),
$thumbnailsLi: $('.thumbnails-carousel li'),
$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
};
function init() {
cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
cache.$thumbnailsLi.first().addClass('active-thumbnail');
if(!conf.backgroundControl) {
cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
}
else {
cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
}
if(conf.center) {
cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
}
}
function refreshOpacities(domEl) {
cache.$thumbnailsLi.removeClass('active-thumbnail');
cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
}
function bindUiActions() {
cache.$carouselContainer.on('slide.bs.carousel', function(e) {
refreshOpacities(e.relatedTarget);
});
cache.$thumbnailsLi.click(function(){
cache.$carouselContainer.carousel($(this).index());
});
}
$.fn.thumbnailsCarousel = function(options) {
conf = $.extend(conf, options);
init();
bindUiActions();
return this;
}
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
/* Just for demo */
body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
padding: 5px 0 0 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.thumbnails-carousel .center {
display: inline-block;
}
ul.thumbnails-carousel li {
margin-right: 5px;
float: left;
cursor: pointer;
}
.controls-background-reset {
background: none !important;
}
.active-thumbnail {
opacity: 0.4;
}
.indicators-fix {
bottom: 70px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- 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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active srle">
<img src="https://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 1.jpg </p>
</div>
</div>
<div class="item">
<img src="https://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 2.jpg </p>
</div>
</div>
<div class="item">
<img src="https://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 3.jpg </p>
</div>
</div>
<div class="item">
<img src="https://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 4.jpg </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Thumbnails -->
<ul class="thumbnails-carousel clearfix">
<li><img src="https://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg"></li>
<li><img src="https://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg"></li>
<li><img src="https://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg"></li>
<li><img src="https://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg"></li>
</ul>
</div>
And modified it like so, assuming I have nothing but images and I want to build the rest using jquery
;(function(window, $, undefined) {
var conf = {
center: true,
backgroundControl: false
};
var cache = {
$carouselContainer: $('.thumbnails-carousel').parent(),
$thumbnailsLi: $('.thumbnails-carousel li'),
$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
};
function init() {
cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
cache.$thumbnailsLi.first().addClass('active-thumbnail');
if(!conf.backgroundControl) {
cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
}
else {
cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
}
if(conf.center) {
cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
}
}
function refreshOpacities(domEl) {
cache.$thumbnailsLi.removeClass('active-thumbnail');
cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
}
function bindUiActions() {
cache.$carouselContainer.on('slide.bs.carousel', function(e) {
refreshOpacities(e.relatedTarget);
});
cache.$thumbnailsLi.click(function(){
cache.$carouselContainer.carousel($(this).index());
});
}
$.fn.thumbnailsCarousel = function(options) {
conf = $.extend(conf, options);
init();
bindUiActions();
return this;
}
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
// here's what i added
$('img').wrap('<div class="img-responsive"></div>');
$('.img-responsive').wrap('<div class="item"></div>');
$('.item').wrapAll('<div class="carousel-inner"></div>');
$('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');
$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');
var numItems = $('.img-responsive').length;
var counter =0;
for (i = counter; i < numItems; i++) {
// I don't know how to continue from here
}
$('.item:first').addClass('active srle');
body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
padding: 5px 0 0 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.thumbnails-carousel .center {
display: inline-block;
}
ul.thumbnails-carousel li {
margin-right: 5px;
float: left;
cursor: pointer;
}
.controls-background-reset {
background: none !important;
}
.active-thumbnail {
opacity: 0.4;
}
.indicators-fix {
bottom: 70px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
<img src="https://s29.postimg.org/xaf064313/image.jpg" >
<img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >
As you can see, I'm getting there, I don't know what to put in the for loop in order to generate the thumbnails and the carousel-indicators. I hope I'm not missing anything.
You need carousel indicators added to your carousel
(function(window, $, undefined) {
var conf = {
center: true,
backgroundControl: false
};
var cache = {
$carouselContainer: $('.thumbnails-carousel').parent(),
$thumbnailsLi: $('.thumbnails-carousel li'),
$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
};
function init() {
cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
cache.$thumbnailsLi.first().addClass('active-thumbnail');
if(!conf.backgroundControl) {
cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
}
else {
cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
}
if(conf.center) {
cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
}
}
function refreshOpacities(domEl) {
cache.$thumbnailsLi.removeClass('active-thumbnail');
cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
}
function bindUiActions() {
cache.$carouselContainer.on('slide.bs.carousel', function(e) {
refreshOpacities(e.relatedTarget);
});
cache.$thumbnailsLi.click(function(){
cache.$carouselContainer.carousel($(this).index());
});
}
$.fn.thumbnailsCarousel = function(options) {
conf = $.extend(conf, options);
init();
bindUiActions();
return this;
}
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
// here's what i added
$('img').wrap('<div class="img-responsive"></div>');
$('.img-responsive').wrap('<div class="item"></div>');
$('.item').wrapAll('<div class="carousel-inner"></div>');
$('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');
$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');
var numItems = $('.img-responsive').length;
var counter =0;
var $indicators = $('<ol/>', {
'class': 'carousel-indicators'
}).appendTo('#carousel-example-generic');
for (i = counter; i < numItems; i++) {
var indClass = '';
if(i == 0) {
indClass = 'active'
}
$('<li/>', {
'data-target': '#carousel-example-generic',
'data-slide-to': i,
'class': indClass
}).appendTo($indicators);
}
$('.item:first').addClass('active srle');
body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
padding: 5px 0 0 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.thumbnails-carousel .center {
display: inline-block;
}
ul.thumbnails-carousel li {
margin-right: 5px;
float: left;
cursor: pointer;
}
.controls-background-reset {
background: none !important;
}
.active-thumbnail {
opacity: 0.4;
}
.indicators-fix {
bottom: 70px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
<img src="https://s29.postimg.org/xaf064313/image.jpg" >
<img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >
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