How to put more than one slideshow on the same page

Asked

Viewed 220 times

0

Hello. I’m new here but I thought it would be the ideal place to solve my problem. Come on.

I’m beginner and I’m developing a page. On this page, I created a slideshow to present the steps of a particular project. My problem is that when I do another slideshow, I end up repeating the same code and script. And I think it ends up generating a lot of code. Is there any way I could create multiple Slideshows using the same script? I’ll upload the code:

$(document).ready(function(){
    $('.top').click(function(){
        $('ul').toggleClass('active');
    })
})
    
    
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";
}


    var slideIndex2 = 1;
showSlides2(slideIndex2);

function plusSlides2(n) {
  showSlides2(slideIndex2 += n);
}

function currentSlide2(n) {
  showSlides2(slideIndex2 = n);
}

function showSlides2(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides2");
  var dots = document.getElementsByClassName("dot2");
  if (n > slides.length) {slideIndex2 = 1}    
  if (n < 1) {slideIndex2 = 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(" active2", "");
  }
  slides[slideIndex2-1].style.display = "block";  
  dots[slideIndex2-1].className += " active2";
}
    
.mySlides {
display: none;

}

.slideshow-container {
position: relative;
margin: auto;
width: 100%;
height: 550px;
background: #e6ffe6;
}

.mySlides img {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -24px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;   
}

.prev{
left: 0;
background: #009900;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
background: #009900;
}

.prev:hover, .next:hover {
  background-color: #009900;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #33cc33;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #009900;
}

.mySlides2 {
display: none;

}

.slideshow-container2 {
position: relative;
margin: auto;
width: 100%;
height: 550px;
background: #e6ffe6;
}

.mySlides2 img {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}


.prev2, .next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -24px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;   
}

.prev2{
left: 0;
background: #009900;
}

.next2 {
  right: 0;
  border-radius: 3px 0 0 3px;
background: #009900;
}

.prev2:hover, .next2:hover {
  background-color: #009900;
}

.dot2 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #33cc33;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active2, .dot2:hover {
  background-color: #009900;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    
    <title>Page Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="css/style_cobertura.css">
                
</head>

<body>
    
       
    <div class="row">

        </div>
    
        <div class="mid-column col-7">
              
            <div class="slideshow-container">

            <div class="mySlides fade">
                <img src="image/cobertura-verde/001.jpg">
            </div>

            <div class="mySlides fade">
                <img src="image/cobertura-verde/002.jpg">
            </div>

            <div class="mySlides fade">
                <img src="image/cobertura-verde/003.jpg">
            </div>
            
            <div class="mySlides fade">
                <img src="image/cobertura-verde/004.jpg">
            </div>

            <div class="mySlides fade">
                <img src="image/cobertura-verde/005.jpg">
            </div>
                
                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>

        </div>
                <br>

        <div>
            <span class="dot" onclick="currentSlide(1)"></span> 
            <span class="dot" onclick="currentSlide(2)"></span> 
            <span class="dot" onclick="currentSlide(3)"></span>
            <span class="dot" onclick="currentSlide(4)"></span>
            <span class="dot" onclick="currentSlide(5)"></span>
            
        </div>
           
            
        <div class="slideshow-container2">

            <div class="mySlides2 fade">
                <img src="image/cobertura-verde/fase1/020.jpg">
            </div>

            <div class="mySlides2 fade">
                <img src="image/cobertura-verde/fase1/021.jpg">
            </div>

            <div class="mySlides2 fade">
                <img src="image/cobertura-verde/fase1/022.jpg">
            </div>
            
            <div class="mySlides2 fade">
                <img src="image/cobertura-verde/fase1/023.jpg">
            </div>

            <div class="mySlides2 fade">
                <img src="image/cobertura-verde/fase1/024.jpg">
            </div>
                
            
        
            <small class="small"> Fotos do dia 16/03/2010 </small>
                
                <a class="prev2" onclick="plusSlides2(-1)">&#10094;</a>
                <a class="next2" onclick="plusSlides2(1)">&#10095;</a>

        </div>
                <br>

        <div>
            <span class="dot2" onclick="currentSlide2(1)"></span> 
            <span class="dot2" onclick="currentSlide2(2)"></span> 
            <span class="dot2" onclick="currentSlide2(3)"></span>
            <span class="dot2" onclick="currentSlide2(4)"></span>
            <span class="dot2" onclick="currentSlide2(5)"></span>
            
        </div>

javascript css slideshow

  • create a javascript event for each slide, in case you should create the event with different classes.

  • Fabiano, thanks for the reply. The event in which you say would be in Script ne?

  • Add 2 in variables and classes or HTML ID. .

1 answer

0

The problem with reusing this code is that it has the slide selector inside the code. To be able to reuse the functions you need to abstract this selector out of the function, passing to it each time you create use a slideshow.

The code would look like this

var slideIndex = 1;
// Mantive o código mais próximo do original, mas é melhor trabalhar com getElementsById neste caso. 
var slides = document.getElementsByClassName("mySlides");
var slides2 = document.getElementsByClassName("mySlides2");
// ... N slides => var slideN = document.getElementsByClassName("mySlidesN");

var dots = document.getElementsByClassName("dot");
var dotsn = document.getElementsByClassName("dot2");
// ... N slides => var dotsN = document.getElementsByClassName("dotN");

showSlides(slideIndex, slides, dots);
showSlides(slideIndex, slides2, dots2);
// ... N slides => showSlides(slideIndex, slidesN, dotsN);

function plusSlides(n, slides, dots) { // acrescentando o parâmetro "slides"
  showSlides(slideIndex += n, slides, dots);
}
function currentSlide(n, slides, dots) {
  showSlides(slideIndex = n, slides);
}
function showSlides(n, slides, dots) { // acrescentando o parâmetro "slides"
  var i;
  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";
}

There are simpler ways to make slideshows, and this code has some problems, but for educational purposes is a good starting point.

  • I think I understood what you wanted to go through. You said you had a simpler way to make a slideshow. You would have some material I could see or study to twist my simpler code?

  • If you want to make the slideshow, your code is ok and you can improve over time. But if your intention is just to show the slideshow, you can use some ready lib. As you are using jquery, you can use some slideshow plugin for jquery for example.

  • Yes. It is working. What I wanted to know was this: if I wanted to create 1 more slideshow on the same page, do I have any way to reuse the code or do I have to do it the way I’m doing it? because I think this way I posted, I’m generating a lot of code and maybe at the time to load it will be heavy. this is my question.

  • Did you read my answer? There’s the code for you to reuse without having to rewrite the same function several times. As for getting heavy, it doesn’t make much difference whether you have multiple functions or one. It only changes to make code easier to read and maintain.

Browser other questions tagged javascript css slideshow

You are not signed in. Login or sign up in order to post.