Jump to content

TDAdvocate

Members
  • Posts

    1
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

TDAdvocate's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. I am working to create an Automatic (Animated) and Manual (Indicators) SlideShow but having issues even getting the bases working at all. I have not started work on the Manual SlideShow yet but here is a direct link for the Automatic Animated SlideShow tutorial. When I use the w3.css and try to put the code into a CSS file separate from the HTML file it will initially load all the images into the view animated but separate from one another. I have placed the code below for further inspection and suggestions. Thank you in advance to anyone who helps me regarding this issue! HTML <!DOCTYPE html> <html> <head> <title>My Site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/css/style.css" rel="stylesheet"/> <link href="/css/w3.css" rel="stylesheet"/> <script type="text/javascript" src="/js/script.js"></script> </head> <body> <!-- Slideshow Carousel Effect --> <div class="w3-container"> <h2>Animated Slides</h2> <p>Slide or fade in an element from the top, bottom, left or right of the screen with the w3-animate-* classes.</p> </div> <div class="w3-content w3-section" style="max-width:500px"> <img class="mySlides w3-animate-top" src="/img/img_rr_01.jpg" style="width:100%"> <img class="mySlides w3-animate-bottom" src="/img/img_rr_02.jpg" style="width:100%"> <img class="mySlides w3-animate-top" src="/img/img_rr_03.jpg" style="width:100%"> <img class="mySlides w3-animate-bottom" src="/img/img_rr_04.jpg" style="width:100%"> </div> <!-- Slideshow Navigation Menu --> <!-- <div class="w3-content w3-display-container" style="max-width:800px"> <img class="mySlides" src="/img/img_nature_wide.jpg" style="width:100%"> <img class="mySlides" src="/img/img_fjords_wide.jpg" style="width:100%"> <img class="mySlides" src="/img/img_mountains_wide.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> </div> </div> --> </body> </html> CSS @charset "utf-8"; /* Slideshow Carousel Effect */ style { .mySlides {display:none;} } /* Slideshow Navigation Menu Style*/ /* style { .mySlides {display:none} .w3-left, .w3-right, .w3-badge {cursor:pointer} .w3-badge {height:13px;width:13px;padding:0} } */ JS //Slideshow Carousel Effect 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, 2500); } //Slideshow Naviagtion Effect /* var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; 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"; } */ EDIT: When checking the Console in Google Chrome I get the following error: script.js:13 Uncaught TypeError: Cannot read property 'style' of undefined at carousel (script.js:13) at script.js:3
×
×
  • Create New...