logo
down
shadow

Multiple JS slideshows on one page


Multiple JS slideshows on one page

By : chrischan
Date : October 21 2020, 08:10 PM
To fix this issue Decided to do it another way, instead of clearing the intervals and trying to restart them by creating new ones. Which ended up being very messy.
I am now just changing classes when I hover on the image which stops the slideshow function, because the slideshow is looking for the class "visible" and while the image is hovered over that class is removed.
code :
var slideShows = document.getElementsByClassName("slideShow");
var dots = document.getElementsByClassName("dot");
var slideShow1 = document.getElementById("slideShow1");
var slideShow1Timer = slideShow1.getAttribute("data-slide-time")
var slideShow2 = document.getElementById("slideShow2");
var slideShow2Timer = slideShow2.getAttribute("data-slide-time")
var slideShow3 = document.getElementById("slideShow3");
var slideShow3Timer = slideShow3.getAttribute("data-slide-time")
var timer1 = setInterval(function() {
  nextSlide("slideShow1")
}, slideShow1Timer);
var timer2 = setInterval(function() {
  nextSlide("slideShow2")
}, slideShow2Timer);
var timer3 = setInterval(function() {
  nextSlide("slideShow3")
}, slideShow3Timer);
var slideShowsArray = ["slideShow1", "slideShow2", "slideShow3"];

// Finds all elements by class name and adds an event listener to each.
function addListener(element, listenFor, functionToCall) {
  for (var i = 0; i < element.length; i++) {

    element[i].addEventListener(listenFor, functionToCall);
  }
}

function addDots() {
  for (var i = 0; i < slideShows.length; i++) {
    var slides = slideShows[i].getElementsByClassName("slide");
    for (var j = 0; j < slides.length; j++) {
      var dot = document.createElement("div");
      dot.classList.add("dot");
      dot.innerHTML = "O";
      slideShows[i].appendChild(dot);
    }
  }
}

addDots();

function nextSlide(ele) {
  var elem = document.getElementById(ele);
  var currentSlideHere = elem.getElementsByClassName("visible");
  if (currentSlideHere[0]) {
    var dots = elem.getElementsByClassName("dot");
    var slides = elem.getElementsByClassName("slide");
    var slidesArray = Array.prototype.slice.call(slides);
    var here = slidesArray.indexOf(currentSlideHere[0]);
    dots[here].style.backgroundColor = "white";
    slides[here].classList.remove("visible");
    here += 1;
    if (here >= slides.length) {
      here = 0;
    }
    slides[here].classList.add("visible");
    dots[here].style.backgroundColor = "grey";
  }
}

function changeImageDot() {
  var slides = this.parentElement.getElementsByClassName("slide");
  var dotsHere = this.parentElement.getElementsByClassName("dot");
  var dotsArray = Array.prototype.slice.call(dotsHere);
  var chosenSlide = dotsArray.indexOf(this);
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove("visible");
    slides[i].classList.remove("visiblePaused");
    dotsHere[i].style.backgroundColor = "white";
  }
  this.style.backgroundColor = "grey";
  slides[chosenSlide].classList.add("visible");
}

addListener(dots, "click", changeImageDot);

addListener(slideShows, "mouseover", function() {
  var lemon = this.getElementsByClassName("visible");
  lemon[0].classList.add("visiblePaused");
  lemon[0].classList.remove("visible");
})


addListener(slideShows, "mouseleave", function() {
  var lemon = this.getElementsByClassName("visiblePaused");
  lemon[0].classList.add("visible");
  lemon[0].classList.remove("visiblePaused");
})
.slideDiv {
  height: 200px;
  width: 200px;
  background-color: #378B53;
}

.slide {
  display: none;
  transition: 4s;
}

.visible {
  display: block;
  width: 100%;
  opacity: 100;
}

.visiblePaused {
  display: block;
  width: 100%;
  opacity: 100;
}

.slideShow {
  width: 40%;
  display: inline-block;
}

.dot {
  display: inline-block;
  cursor: pointer;
}
<div class="slideShow" id="slideShow1" data-slide-time="2000">
  <div class="slideDiv slide">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide visible">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>
<div class="slideShow" id="slideShow2" data-slide-time="2000">
  <div class="slideDiv slide">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide visible">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>
<div class="slideShow" id="slideShow3" data-slide-time="2000">
  <div class="slideDiv slide">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide visible">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>


Share : facebook icon twitter icon
Multiple jQuery Slideshows on 1 page

Multiple jQuery Slideshows on 1 page


By : Scott
Date : March 29 2020, 07:55 AM
seems to work fine I think you should just create a function to initialize the different albums and give it the id to only select the slides you want.
code :
 function initAlbum(id){   
    var slides = $('#'+id+' .slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slideshowContainer').css('overflow', 'hidden');

   // Wrap all .slides with #slideInner div
   slides.wrapAll('<div class="slideInner"></div>')....
$(".galleryimage-box").each(function(index, element){
    initAlbum(element.id);
});
Implementing each() for multiple slideshows on the same page

Implementing each() for multiple slideshows on the same page


By : Pavel Seraphimov
Date : March 29 2020, 07:55 AM
Hope that helps It's a slideshow using images in the divs 'store_images'. Several slideshows on the same page: click on image for next slide, after last image goes to the first. It works if I have just one but I have to implement the each() condition in the second part since they're more, and I have no idea how. , You could try this:
code :
$(this).find('img').click(function () {
    var $parentDiv = $(this).closest('.store_images');
    $(':first-child',$parentDiv).hide()
       .next('img').show()
       .end().appendTo($parentDiv);
});
Jquery - Multiple slideshows on one page using radios

Jquery - Multiple slideshows on one page using radios


By : Daniel Thompson
Date : March 29 2020, 07:55 AM
it should still fix some issue You were defining two variables with the same name, which caused the variable to interfere with each other. Renaming them fixes it.
https://jsfiddle.net/nhctucg6/32/
code :
var currentFirst = '';
$('[name="first_inputs"]').change(function() {
    if(currentFirst.length) 
        $('#' + currentFirst).slideUp();
    currentFirst = $(this).val();
    $('#' + $(this).val()).slideDown();
});

var currentSecond = '';
$('[name="second_inputs"]').change(function() {
    if(currentSecond.length) 
        $('#' + currentSecond).slideUp();
    currentSecond = $(this).val();
    $('#' + $(this).val()).slideDown();
});
HTML Page to Display Multiple Slideshows

HTML Page to Display Multiple Slideshows


By : Jack D.S
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Goal: To create an HTML page that displays 6 slideshows to be displayed on a large display. Each slideshow will use the same batch of images as it will be showing off product and product information in a showroom. This is for internal use only and will be loaded and just keep looping so if load times are a little slow it is not the end of the world. , Yes, just take the class name as an argument for your function:
code :
function carousel(className) {
    var i;
    var x = document.getElementsByClassName(className);
    // …
}

carousel("mySlides1");
carousel("mySlides2");
Multiple slideshows on one page not work anymore

Multiple slideshows on one page not work anymore


By : Kynsley
Date : March 29 2020, 07:55 AM
I wish did fix the issue. the functions in your top
shadow
Privacy Policy - Terms - Contact Us © voile276.org