Image slider buttons not detecting click?

Image slider buttons not detecting click? - javascript

I have an image slider which is working fine rotating images alone using setInterval(). However, the buttons I've added to control which image is clicked aren't responding to click events.
I have used addEventListener and i'm currently using .on('click') but neither are working.
HTML:
<div id="sliderContainer">
<img src="assets/image0.png" id="sliderImage"/>
<div id="left_holder">
<img id="leftArrow" src="assets/arrow_left.png">
</div>
<div id="right_holder">
<img id="rightArrow" src="assets/arrow_right.png">
</div>
</div>
CSS:
#sliderContainer {
width: 700px;
height: 500px;
margin: 0 auto;
position: relative;
margin-bottom: 5% !important;
}
#sliderImage {
width: 700px;
height: 500px;
position: absolute;
}
#left_holder {
height: 500px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 500px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
#leftArrow {
height: 50px;
width: 50px;
position: absolute;
top: 45%;
left: 0px;
}
#rightArrow {
height: 50px;
width: 50px;
position: absolute;
top: 45%;
right: 0px;
}
JS:
$(document).ready(function () {
/*var leftbtn = document.getElementById("leftArrow");
var rightbtn = document.getElementById("rightArrow");*/
var imagecount = 0;
var total = 4;
console.log(imagecount);
function slider(x) {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + x;
if (imagecount > total) {
imagecount = 0;
}
if(imagecount < 0) {
imagecount = total;
}
Image.src = "assets/image" + imagecount + ".png"
}
window.setInterval(function sliderA() {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + 1;
console.log(imagecount);
if (imagecount > total) {
imagecount = 0;
}
if (imagecount < 0) {
imagecount = total;
}
Image.src = "assets/image" + imagecount + ".png"
},5000);
//EVENT LISTENERS
/*leftbtn.addEventListener("click", slider(-1));
rightbtn.addEventListener("click", slider(1));*/
$(document).on('click', '#leftArrow', slider(-1));
$(document).on('click', '#rightArrow', slider(1));
}); //Doc Ready

You have to pass an event handler (callback), not calling that function.
$(document).on('click', '#leftArrow', function() {
slider(-1);
});
$(document).on('click', '#rightArrow', function() {
slider(-1);
});

Related

mousedown and touchstart not registering on mobile devices

I have created the following simple image comparison slider - modified from the version on w3schools (I know my mistake to use their code).
This all works fine on a desktop but when I try to use it on a mobile, nothing happens - it doesn't even register the console.log on the mousedown/touchstart (when I press on the slider button with my finger).
I was wondering if anyone could spot anything obvious with why it isn't working on mobile devices
(() => {
$.fn.imageComparisonSlider = function() {
var returnValue = this.each((index, item) => {
var $container = $(this);
var $overlay = $container.find('.image-comparison-slider__bottom-image');
var $slider = $('<span class="image-comparison-slider__slider"></span>');
var $window = $(window);
var touchStarted = false;
var width = $container.outerWidth();
$container.prepend($slider);
$container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
event.preventDefault();
console.log('touchstart');
touchStarted = true;
});
$window.on("mousemove touchmove", windowEvent => {
if (touchStarted) {
// get the cursor's x position:
let pos = getCursorPos(windowEvent);
// prevent the slider from being positioned outside the image:
if (pos < 0) pos = 0;
if (pos > width) pos = width;
// execute a function that will resize the overlay image according to the cursor:
slide(pos);
}
});
$window.on('mouseup touchend', event => {
event.preventDefault();
touchStarted = false;
});
function getCursorPos(e) {
var thisEvent = e || window.event;
// calculate the cursor's x coordinate, relative to the image
return thisEvent.pageX - $container.offset().left;
}
function slide(x) {
// set the width of the overlay
$overlay.width(width - x);
// position the slider
$slider[0].style.left = x + 'px';
}
function resetSlider() {
$overlay.width('50%');
$slider[0].style.left = $overlay.width() + 'px'
width = $container.outerWidth();
}
});
return returnValue;
};
})($);
$('.image-comparison-slider__container').imageComparisonSlider();
.image {
display: block;
width: 100%;
}
.image-comparison-slider__title {
text-align: center;
}
.image-comparison-slider__container,
.image-comparison-slider__image-holder {
position: relative;
}
.image-comparison-slider__bottom-image {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 50%;
}
.image-comparison-slider__caption {
position: absolute;
padding: 1rem;
color: white;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
white-space: nowrap;
}
.image-comparison-slider__top-image .image-comparison-slider__caption {
top: 0;
left: 0;
}
.image-comparison-slider__bottom-image .image-comparison-slider__caption {
bottom: 0;
right: 0;
}
.image-comparison-slider__image {
display: block;
z-index: 1;
}
.image-comparison-slider__bottom-image .image {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: auto;
}
.image-comparison-slider__slider {
position: absolute;
z-index: 3;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 50px;
height: 50px;
background-color: rgba(255, 96, 38, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
}
.image-comparison-slider__slider:after {
content: "< >";
color: white;
font-weight: bold;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
<div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
<img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
<div class="image-comparison-slider__caption">Left Image</div>
</div>
<div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
<img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
<div class="image-comparison-slider__caption">Right Image</div>
</div>
</div>
Fiddle link for code

Ok have managed to fix this - the touch wasn't registering because of the transform so I changed that and just used negative margin as the button was a fixed size.
I then had to fix the thisEvent.pageX for android - so did a check with isNaN and then set it to e.originalEvent.touches[0].pageX if it was true.
Working version:
(() => {
$.fn.imageComparisonSlider = function() {
var returnValue = this.each((index, item) => {
var $container = $(this);
var $overlay = $container.find('.image-comparison-slider__bottom-image');
var $slider = $('<span class="image-comparison-slider__slider"></span>');
var $window = $(window);
var touchStarted = false;
var width = $container.outerWidth();
$container.prepend($slider);
$container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
event.preventDefault();
console.log('touchstart');
touchStarted = true;
});
$window.on("mousemove touchmove", windowEvent => {
if (touchStarted) {
// get the cursor's x position:
let pos = getCursorPos(windowEvent);
// prevent the slider from being positioned outside the image:
if (pos < 0) pos = 0;
if (pos > width) pos = width;
// execute a function that will resize the overlay image according to the cursor:
slide(pos);
}
});
$window.on('mouseup touchend', event => {
event.preventDefault();
touchStarted = false;
});
function getCursorPos(e) {
var thisEvent = e || window.event;
let xVal = thisEvent.pageX;
if (isNaN(xVal)) {
xVal = e.originalEvent.touches[0].pageX;
}
// calculate the cursor's x coordinate, relative to the image
return xVal - $container.offset().left;
}
function slide(x) {
// set the width of the overlay
$overlay.width(width - x);
// position the slider
$slider[0].style.left = x + 'px';
}
function resetSlider() {
$overlay.width('50%');
$slider[0].style.left = $overlay.width() + 'px'
width = $container.outerWidth();
}
});
return returnValue;
};
})($);
$('.image-comparison-slider__container').imageComparisonSlider();
.image {
display: block;
width: 100%;
}
.image-comparison-slider__title {
text-align: center;
}
.image-comparison-slider__container,
.image-comparison-slider__image-holder {
position: relative;
}
.image-comparison-slider__bottom-image {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 50%;
}
.image-comparison-slider__caption {
position: absolute;
padding: 1rem;
color: white;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
white-space: nowrap;
}
.image-comparison-slider__top-image .image-comparison-slider__caption {
top: 0;
left: 0;
}
.image-comparison-slider__bottom-image .image-comparison-slider__caption {
bottom: 0;
right: 0;
}
.image-comparison-slider__image {
display: block;
z-index: 1;
}
.image-comparison-slider__bottom-image .image {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: auto;
}
.image-comparison-slider__slider {
position: absolute;
z-index: 3;
cursor: ew-resize;
width: 50px;
height: 50px;
background-color: rgba(255, 96, 38, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: -25px 0 0 -25px;
}
.image-comparison-slider__slider:after {
content: "< >";
color: white;
font-weight: bold;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
<div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
<img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
<div class="image-comparison-slider__caption">Left Image</div>
</div>
<div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
<img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
<div class="image-comparison-slider__caption">Right Image</div>
</div>
</div>

JavaScript slideshow isn't working as intended

I made this little Slideshow with HTML/CSS/JS. Most of it is working but there is one thing which I can't figure out. How do I make it so the text above each image fits the img itself when autosliding is on? Right now it only shows the right title for each img when i manually click through. Any help is appreciated. Many thanks in advance.
var uniqueRandoms = [];
var indexCount = 0;
var allImagesAndText = ["Seltene römische Goldmünze", "Römische Funde", "Römische Wandmalerei", "Tutanchamun", "Cheops Pyramide", "Ägyptische Malerei"];
var total = allImagesAndText.length - 1;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = indexCount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
function slide(x) {
if(indexCount + x >= 0 && indexCount + x <= total) {
clearInterval(sliderInterval);
indexCount += x;
var Image = document.getElementById('img');
Image.src = "images/img" + indexCount + ".jpg";
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
}
}
function update_dom() {
var left_holder = document.getElementById('left_holder');
var right_holder = document.getElementById('right_holder');
ChangeText(indexCount);
if(indexCount == 0) {
left_holder.style.display = "none";
} else if (indexCount == total) {
right_holder.style.display = "none";
} else {
right_holder.style.display = "block";
left_holder.style.display = "block";
}
}
function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
Image.src = "images/img" + imagescount + ".jpg";
update_dom();
}
function ChangeText(imgNum) {
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
window.addEventListener("load", function() {
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
document.getElementById("right").addEventListener("click", function() {
slide(1);
});
document.getElementById("left").addEventListener("click", function() {
slide(-1);
});
});
#slideshow {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
<div id="slideshow">
<div id="text1">Text</div>
<img src="images/img0.jpg" />
<div id="left_holder">
<img id="left" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img id="right" class="right" src="images/arrow_right.png" />
</div>
</div>

I'm making an image slider but only the first image displays it does not display the rest

I'm making an image slider with images that hava name ending with the numbers 1 to 5 but only the first image displays. the path is fine and i've tried displaying each picture separately and that worked ...
<head>
<title>jQuery Image Slider</title>
<script src = "jquery-3.0.0.js"></script>
<style>
#container {
height: 300px;
width: 1350px;
margin: 20px auto;
position: relative;
}
#img {
height: 300px;
width: 1350px;
position: absolute;
}
#left-holder {
height: 100px;
width: 100px;
position: absolute;
left: 0px;
top: 100px;
}
#right-holder {
height: 100px;
width: 50px;
position: absolute;
right: 0px;
top: 100px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
</style>
<script>
var imageCount = 1;
var totalImages = 5;
function slide(x) {
var Image = document.getElementById("img");
imageCount = imageCount + x;
if (imageCount > totalImages)
imageCount = 1;
if (imageCount < 1)
imageCount = totalImages;
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
}
window.setInterval(function slideAuto() {
var Image = document.getElementById("img");
imageCount = imageCount + 1;
if (imageCount > totalImages)
imageCount = 1;
if (imageCount < 1)
imageCount = totalImages;
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
}, 1000);
</script>
</head>
<body>
<div id = "container">
<img id = "img" src = "E:\JavaScript work\Web Project\carousel1.jpg" />
<div id = "left-holder">
<img class = "left" onClick = "slide(-1)" src = "E:\JavaScript work\Web Project\left.png" />
</div>
<div id = "right-holder">
<img class = "right" onClick = "slide(1)" src = "E:\JavaScript work\Web Project\right.png" />
</div>
</div>
</body>

Problem: You are using backslash \ in src. Javascript uses backslash to escape.
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
Solution: Either use forward slash / or if you still want to use backslash you can use \\

Instead this
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
use this:
Image.src = "E:\\JavaScript work\\Web Project\\carousel"+imageCount+".jpg";
at all better use relative address in image src.

Slideshow with random pics

So I made this little Slideshow with HTML/CSS/JS and I want to make it so that the 6 images appear randomly and not 1,2,3.. more like 2,3,1.. for example. Any help is appreciated. Many thanks in advance.
JS:
var imagecount = 1;
var total = 6;
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
if(imagecount > total){imagecount = 1;}
if(imagecount < 1){imagecount = total;}
Image.src = "images/img"+ imagecount +".jpg";
ChangeText(imagecount);
}
window.setInterval(function slideA(x) {
var Image = document.getElementById('img');
imagecount = imagecount + 1;
if(imagecount > total){imagecount = 1;}
if(imagecount < 1){imagecount = total;}
Image.src = "images/img"+ imagecount +".jpg";
ChangeText(imagecount);
}, 3000);
function ChangeText(imgNum){
var allImagesAndText = {1: "Seltene römische Goldmünze", 2: "Römische Funde", 3: "Römische Wandmalerei", 4: "Tutanchamun", 5: "Cheops Pyramide", 6: "Ägyptische Malerei"};
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
CSS:
#container {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
HTML:
<div id="container">
<div id="text1">Text</div>
<img src="images/img1.jpg" id="img" />
<div id="left_holder">
<img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img onClick="slide(1)" class="right" src="images/arrow_right.png" />
</div>
</div>

You can create unique random image slider. So it doesn't repeat image multiple times (Soham's answer is fine but it will repeat same image multiple times in a row).
Something like this:
var imagecount = 1;
var total = 6;
var uniqueRandoms = [];
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = imagecount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
I used this SO answer.
And then in your code just call that function where you need it.
Example with your code just for autoslide is here https://jsfiddle.net/2gra4wk1/

You can add a function:-
function generateRandom(){
var x = Math.floor((Math.random() * 6) + 1); //generates random number from 1 to 6
return x;
}
And then call this function and use appropriately

Clickable bubble control auto slideshow pure JavaScript

How could I link the marked bubble to JavaScript auto slider (window.setInterval(function slideA() { ) ? Check codes to understand this issue. The slides go automatically, but the bubble only react on clicks.
var imagecount = 1;
var total = 3;
function slide(x) {
var Image = document.getElementById('img');
var nodes = document.getElementById('bubbles').getElementsByTagName('div');
for(var i=0; i<nodes.length; i++) {
if(i == imagecount-1) {
nodes[i].style.backgroundColor = '#F86215';
}
else {
nodes[i].style.backgroundColor = 'transparent';
}
}
imagecount = imagecount + x;
if (imagecount > total){ imagecount = 1;}
if (imagecount < 1){ imagecount = total;}
Image.src = "IMAGE/img"+ imagecount +".jpg";
}
window.setInterval(function slideA() {
var Image = document.getElementById('img');
imagecount = imagecount + 1;
if (imagecount > total){ imagecount = 1;}
if (imagecount < 1){ imagecount = total;}
Image.src = "IMAGE/img"+ imagecount +".jpg";
}, 5000);
function selectSlide(slideNumber){
imagecount = slideNumber;
var Image = document.getElementById('img');
Image.src = "IMAGE/img"+imagecount +".jpg";
}
function selectSlide(slideNumber, divid){
var nodes = document.getElementById('bubbles').getElementsByTagName('div');
for(var i=0; i<nodes.length; i++) {
nodes[i].style.backgroundColor = 'transparent';
}
divid.style.backgroundColor = '#F86215';
imagecount = slideNumber;
var Image = document.getElementById('img');
Image.src = "IMAGE/img"+imagecount +".jpg";
}
#img {
width: 100%;
position: relative;
height: auto;
}
.container-fluid {
width: 100%;
height: auto;
position: relative;
}
.container-fluid #left-arrow .left {
width: 60px;
position: absolute;
top: 31%;
left: 0px;
}
.container-fluid #right-arrow .right {
position: absolute;
top: 31%;
right: 0px;
width: 60px;
}
.container #left-arrow .left:hover {
cursor:pointer;
cursor: hand;
}
.container #right-arrow .right:hover {
cursor:pointer;
cursor: hand;
}
#bubbles{
width: 120px;
margin: 0px auto;
text-align: center;
top: 80%;
position: absolute;
left: 45%;
}
#bubbles > div{
display: inline-block;
width: 10px;
height: 10px;
margin: 24px 10px 0px 10px;
background: rgba(0,0,0,.1);
text-align: center;
border: 2px solid #F86215;
border-radius: 100%;
font-size: 19px;
text-decoration: none;
transition: background 0.3s linear 0s;
cursor: pointer;
}
<div class="container-fluid">
<img src="IMAGE/img1.jpg" alt="" id="img"/>
<div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
<div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>
<div id="bubbles">
<div onclick="selectSlide(1,this)" style="background:#F86215;"></div>
<div onclick="selectSlide(2,this)"></div>
<div onclick="selectSlide(3,this)"></div>
</div>
</div>

Took a while to get a JS only answer working, but here it is!
Updated HTML
<div id="bubbles">
<div class="bubble" onclick="selectSlide(1,this)" style="background:#F86215;"></div>
<div class="bubble" onclick="selectSlide(2,this)"></div>
<div class="bubble" onclick="selectSlide(3,this)"></div>
</div>
Updated Javascript
window.setInterval(function slideA() {
var image = document.getElementById('img');
imagecount = imagecount + 1;
if (imagecount > total) {
imagecount = 1;
}
if (imagecount < 1) {
imagecount = total;
}
image.src = "IMAGE/img" + imagecount + ".jpg";
var bubbles = document.getElementsByClassName("bubble");
var i;
for(i = 0; i < bubbles.length; i++) {
bubbles[i].style.backgroundColor = 'transparent';
}
document.getElementsByClassName("bubble")[imagecount - 1].style.backgroundColor = '#F86215';
}, 5000);
JSFiddle

Develop Reference

JavaScript is the programming language of the Web.

Image slider buttons not detecting click? - javascript

You have to pass an event handler (callback), not calling that function. $(document).on('click', '#leftArrow', function() { slider(-1); }); $(document).on('click', '#rightArrow', function() { slider(-1); });

Related

mousedown and touchstart not registering on mobile devices

JavaScript slideshow isn't working as intended

I'm making an image slider but only the first image displays it does not display the rest

Slideshow with random pics

Clickable bubble control auto slideshow pure JavaScript

Categories

Resources