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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...