[Javascript] Slideshow Gallery

Discussione in 'Javascript' iniziata da ANDREA20, 7 Ottobre 2018.

  1. ANDREA20

    ANDREA20 Utente Attivo

    Registrato:
    25 Giugno 2016
    Messaggi:
    131
    Mi Piace Ricevuti:
    1
    Punteggio:
    18
    Sesso:
    Maschio
    Buogiorno io devo creare una galleria cosi ma il problema che i tasti si sovrapporranno non riesco ad risolvere il problema qualcuno mi può aiutare gentilmente grazie

    Codice:
    <div class="row">
      <div class="column">
        <div class="content">
                <img class="airpods" src="images/accessori/apple/airpods/1airpods_partholonsrl.jpeg" style="width:100%">
                <img class="airpods" src="images/accessori/apple/airpods/2airpods_partholonsrl.jpeg" style="width:100%">
                <img class="airpods" src="images/accessori/apple/airpods/3airpods_partholonsrl.jpeg" style="width:100%">
                <img class="airpods" src="images/accessori/apple/airpods/4airpods_partholonsrl.jpeg" style="width:100%">
              <img class="airpods" src="images/accessori/apple/airpods/5airpods_partholonsrl.jpeg" style="width:100%">
              <img class="airpods" src="images/accessori/apple/airpods/6airpods_partholonsrl.jpeg" style="width:100%">
          <h3>AirPods</h3>
          <p>Lorem ipsum dolor sit amet, tempor prodesset
                    eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
                    <button class="button" onclick="airpods(-1)">&#10094;</button>
                <button class="button" onclick="airpods(1)">&#10095;</button>
        </div>
      </div>
      <div class="column">
        <div class="content">
                <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/1auricolari_partholonsrl.jpeg" style="width:100%">
                <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/2auricolari_partholonsrl.jpeg" style="width:100%">
                <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/3auricolari_partholonsrl.jpeg" style="width:100%">
                <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/4auricolari_partholonsrl.jpeg" style="width:100%">
             <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/5auricolari_partholonsrl.jpeg" style="width:100%">
             <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/6auricolari_partholonsrl.jpeg" style="width:100%">
          <h3>My Work</h3>
          <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei,
                    at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
                    <button class="button" onclick="cuffie(-1)">&#10094;</button>
                    <button class="button" onclick="cuffie(1)">&#10095;</button>
        </div>
      </div>
    
    
    <!-- END MAIN -->
    </div>
    
    
    <br>
    <script>
    var slideIndex = 1;
    airpods(airpods);
    
    function airpods(n) {
      airpods(slideIndex += n);
    }
    
    function airpods(n) {
      var i;
      var x = document.getElementsByClassName("airpods");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";
    }
    </script>
    
    <script>
    var slideIndex = 1;
    showDivs(slideIndex);
    
    function cuffie(n) {
      showDivs(slideIndex += n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("cuffie");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";
    }
    </script>
    
     
Sto caricando...

Condividi questa Pagina