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><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="/css/style.css"rel="stylesheet"/><linkhref="/css/w3.css"rel="stylesheet"/><scripttype="text/javascript"src="/js/script.js"></script></head><body><!-- Slideshow Carousel Effect --><divclass="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><divclass="w3-content w3-section"style="max-width:500px"><imgclass="mySlides w3-animate-top"src="/img/img_rr_01.jpg"style="width:100%"><imgclass="mySlides w3-animate-bottom"src="/img/img_rr_02.jpg"style="width:100%"><imgclass="mySlides w3-animate-top"src="/img/img_rr_03.jpg"style="width:100%"><imgclass="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)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</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>
Automatic SlideShow Issues
in CSS
Posted · Edited by TDAdvocate
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
CSS
JS
EDIT: When checking the Console in Google Chrome I get the following error: