Jump to content

cybermario

Members
  • Content Count

    3
  • Joined

  • Last visited

Community Reputation

0 Neutral

About cybermario

  • Rank
    Newbie
  • Birthday June 22

Profile Information

  • Gender
    Male

Previous Fields

  • Languages
    spanish, english
  1. cybermario

    w3.css slideshow

    never used that, its useful...thanks again!!
  2. cybermario

    w3.css slideshow

    thanks man!! how do you load a custom file on tryit editor?
  3. cybermario

    w3.css slideshow

    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>
×