I try to settle a slider on my html page. But my slider cannot reach the element that is created by the other js code. I am working with modules.
The code block below comes from UI.js file
static createSliderBtn(){
let slider2 = document.querySelector(".slideshow-container");
slider2.innerHTML = `
<a id="prev" >❮</a>
<a id="next" >❯</a>
`;
}
And try to run it with my slider code in project.JS
function prevSlides() {
showSlides((slideIndex += 1));
console.log("prevSlides is triggered");
}
function nextSlides() {
showSlides((slideIndex += -1));
console.log("prevSlides is triggered");
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".mySlides");
let dots = document.querySelectorAll(".dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
and try to trigger tese A elements in order to navigate sliders in project.JS
const prvBtn = document.querySelector("#prev");
const nxtBtn = document.querySelector("#next");
eventListener();
function eventListener() {
prvBtn.addEventListener("click", prevSlides);
nxtBtn.addEventListener("click", nextSlides);
}
But when I run my code, my browser gives this error Uncaught TypeError: prvBtn is null
Related
I'm creating a slider where I use a small script. With this script the slides get an additional styling (display block or none). On browser this works just fine, but on mobile it won't give the slides the additional styling. I heared that it might be the 'let' elements, but changing this to 'var' wont make a difference. Anyone knows what to improve to make this working?
Btw: testing on an iPhone 11 with IOS 15.6 (both firefox and safari)
<script>
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
let prev = document.querySelector(".prev");
let next = document.querySelector(".next");
if (!slides.length == 0) {
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
let currentSlide = function (n) {
showSlides((slideIndex = n));
};
function showSlides(n) {
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active-dot", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active-dot";
}
}
prev.addEventListener("click", () => {
plusSlides(-1);
});
next.addEventListener("click", () => {
plusSlides(1);
});
</script>
I'm trying something tricky. I'm just trying to amend a javascript code I found to create a modal with slides, and I'm trying to get the background image to change as you scroll through the images. I thought I could just add "return slideIndex;" and a new function that would have a specific background image for every integer (there are 5) of slideIndex. I think I must be misunderstanding the original javascript I am working with.
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlidesE");
var dots = document.getElementsByClassName("demoE");
if (n > slides.length) {slideIndex = 1
}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
return slideIndex;
}
function changeBG() {
if (slideIndex === 1) {
document.getElementByClassName(".modalE:before").style.backgroundImage = "linear-gradient(160deg, white, black)";
}
else if (slideIndex === 2) {
document.getElementByClassName(".modalE:before").style.backgroundImage = "linear-gradient(160deg, green, blue)";
}
}
I'm working on a website that has 2 sliders but the controls on the top slider do not seem to function
http://www.nathangriffithgc.com/gallery.html
How can I target the second slider? I've already changed the ID names but I'm not sure if that is affecting the slider.
Below is a snippet of both my galleries, you'll find that I renamed the top scripts the slides2, the bottom script is the original that works
<script>
var slideIndex = 1;
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) {slideIndex = 1;}
if (slideIndex < 1) {slideIndex = slides.length;}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
var dots = document.getElementsByClassName("slide-dot");
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" slide-dot-active", "");
}
dots[slideIndex-1].className += " slide-dot-active";
}
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function currentSlide(n) {
slideIndex = n;
showSlides();
}
var slide2Index = 1;
function showSlides2() {
var slides = document.getElementsByClassName("mySlides2");
if (slide2Index > slides.length) {slide2Index = 1;}
if (slide2Index < 1) {slide2Index = slides.length;}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide2Index-1].style.display = "block";
var dots = document.getElementsByClassName("slide2-dot");
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" slide2-dot-active", "");
}
dots[slideIndex-1].className += " slide2-dot-active";
}
function plusSlides(n) {
slide2Index += n;
showSlides2();
}
function currentSlide(n) {
slide2Index = n;
showSlides2();
}
window.addEventListener("load", showSlides); window.addEventListener("load", showSlides2);
</script>
Hi I have a slideshow javascript running on my website but it doesn't seem to be working properly when I change the images back and forth and the automaticity doesn't show image 6. Could someone please help me write it up because I have been trying over a month and reached nowhere.
https://wbd-ownwork-13--15nalaas.repl.co/
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 2}
slides[slideIndex-2].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
First of all you need not to add the custom controls for changing the slides because the slide show is more than enough.
And secondly you need to change the entire script to the given script only then it is going to work because rest of your script is messing with the slideshow.
Change the entire script from line 94 to line 125 in your HTML to this -
<script>
var slideIndex = 0;
showSlides();
function showSlides(){
var slides = document.querySelectorAll('.mySlides');
for(var i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
slideIndex++;
if(slideIndex > slides.length - 1){slideIndex = 0}
loop();
}
function loop(){
setTimeout(showSlides, 1000);
}
</script>
If still you have a problem the please ask again.
It seems there is some error in javascript, please help.
Slides are not visible at page load, but appears o click of dot.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
You are defining all the functions for sliding but it doesn't look like you are calling any of them until a click. Try adding
showSlides() below your code.
Asif Vk could you demonstrate in JSFiddle?