I am very new in JavaScript. I have multiple sliders on a single screen. You can see by going on this link: http://iliachtida.sportpolis.gr/play-unit/#
I am running a slider when click on the current product, but my slider behavior goes wrong when I click on the arrow.
When I click on the arrow only one product image is displayed, all the other images are not displayed.
I want to run different sliders for different products. Suppose I have four products on this screen and every product has four images. I want to run first product images on first product arrow click, second product images on second product arrow click, etc. I hope you understand.
I have tried many code, but it does not work for me.
This is my code:
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("size-full");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++)
{
//alret(slideIndex);
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";
}
Related
I have slider with right left click button and its sliding fine but not smooth sliding and I would like to auto slide my banner images with 4-5 sec duration, I have not found any tutorial how to make it auto slide, please check my script.
<script>
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";
}
</script>
I understand there are two questions:
How can I make it smoother?
That'd have to do with choosing a 'transitionable' CSS property instead of display, such as transform. See example: https://codepen.io/d88naimi/pen/YzzOQPB
Auto sliding could be achieved by setting an interval at which you'd run the active slide setting function. See: https://www.w3schools.com/jsref/met_win_setinterval.asp
Hope it helps. Enjoy the process.
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)";
}
}
To begin, I know this is a very basic question. However, I am not well taught in Javascript and I focus on design in general. On my website right now once you click on an arrow it takes you forwards or backwards within a collection of images. I would like for this function to also apply to the captions I created below the images. Once you click the arrow to move through the images, it should move through the captions below simultaneously. I almost achieved this by creating another function for the captions that would fire on click for the same arrows, this however, did not work. I would appreciate some help. Below is a bit of the javascript. I will also link the live website. Note that within the code is an index for dots which displayed the location among the slides, I however abandoned this idea.
var sliderIndex = 1;
function setSlider(){
showSliders(sliderIndex);
}
//slider image index
function plusSlider(n) {
showSliders(sliderIndex += n);
}
//dot index
function currentSlider(n) {
showSliders(sliderIndex = n);
}
function showSliders(n) {
var i;
var slides = document.getElementsByClassName("manualslider");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {sliderIndex = 1}
if (n < 1) {sliderIndex = 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[sliderIndex-1].style.display = "block";
dots[sliderIndex-1].className += " active";
}
//Manual Slide
setSlider();
Website
Thank you and sorry if this is basic.
Edit: the class name for the captions is manualsliderb
I've been following a slideshow tutorial on w3schools to learn how to create my own.
This is the link to the tutorial's code. What I am referring to is this code however.
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides =
document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000); // Change image every
2 seconds
}
</script>
I wanted to make multiple slideshows for a single page so I made it so this section of the code would take a parameter and then I could just insert my list of images. But when I changed the code to this...
var images = document.getElementsByClassName("mySlides");
var imageNum = document.getElementsByClassName("dot");
showSlides(images, imageNum);
function showSlides(slides, dots) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000);
}
Complete code available via this link.
It gives me the error property of length undefined, even though .length can be used on a HTML Collection.
Why does it seem that this function cannot accept a HTML Collection as a parameter?
Edit: After looking at feedback and noticing that I made it harder for people to help me, I made a codesandbox link with my issue. I included the solution as a comment, so people can see before and after. I also included the entire function above.
Thank you for your feedback so I can make questions more clear and sorry about the trouble!
It's because of that line at the end of the function
setTimeout(showSlides, 2000); // Change image every 2 seconds
it call showSlides without any arguments
To add argument to call you can do :
setTimeout(() => { showSlides(slides, dots) }, 2000);
// call from an anonymous function
// or
setTimeout(showSlides, 2000, slides, dots);
// use additional params of setTimeout
Here's the doc for setTimeout
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.