Jump to content
cybermario

w3.css slideshow

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites
1 hour ago, dsonesuk said:

https://www.w3schools.com/code/tryit.asp?filename=FXDT0KA2GFBG

 

thanks man!! 

how do you load a custom file on tryit editor? 

Share this post


Link to post
Share on other sites

You can paste it to any try yourself editor panel, then click save menu button along top of panel. Then copy link provided.

Edited by dsonesuk
  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×