Jump to content

cybermario

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by cybermario

  1. hi there...

    i use the dot slideshow indicator with the carousel code for automatic advance images, but can´t make points changes togheter with the image changes with the code... any ideas? 

    sorry about my english....

     

    here is the code... thanks in advance.

    <header class="w3-display-container w3-center" id="home" style="padding-top: 150px">
      <div class="w3-content w3-display-container" style="max-width:800px">
        <img class="mySlides" src="img-1.jpg" style="width:100%">
        <img class="mySlides" src="img-2.jpg" style="width:100%">
        <img class="mySlides" src="img-3.jpg" style="width:100%">
        <img class="mySlides" src="img-4.jpg" style="width:100%">
        <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
          <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
          <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
          <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
          <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
          <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
          <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
        </div>
    </div>
    </header>
    
    <script>
    //slideshow carousel
    var myIndex = 0;
    carousel();
    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";  
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}    
        x[myIndex-1].style.display = "block";  
        setTimeout(carousel, 9000);    
    }
    //new code
    var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs(slideIndex += n);
    }
    
    function currentDiv(n) {
      showDivs(slideIndex = n);
    }
    
    function showDivs(n) {
      var i;
      var n = document.getElementsByClassName("myIndex");//quitar
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-white", "");
      }
      x[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " w3-white";
    }
    </script>
    

     

×
×
  • Create New...