Jump to content

w3.css Image Carousel - Combined Auto & Manual

Goodness

By Goodness
in CSS

 Share

Recommended Posts

Goodness Newbie

Goodness

Posted
  • Author
Posted (edited)

Unfortunately the page is not online. It's on my machine.

 

Here's the page source:

<!DOCTYPE html>
<html>
<head>
<title>New Site Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
<!--.mySlides {width: 100%;} /**/-->
.mySlides {display: none}
<!--#myslideFrame{text-align: center; font-size:0;min-height:100%; font-size:0; text-align: center;position:relative;}-->
.w3-left, .w3-right, .w3-tag {cursor:pointer}
.w3-tag {height:15px;width:15px;padding:0;margin-top:6px}
</style>
<script src="lib/w3data.js"></script>
<script src="lib/carousel.js"></script>
</head>
<body>

<!-- Navbar -->
<div class="w3-top">
<div w3-include-html="includes/topNav.html"></div>
</div>

<!-- Navbar on small screens -->
<div id="navDemo" class="w3-hide w3-hide-large w3-top w3-dark-grey" style="margin-top:43px;">
<div w3-include-html="includes/smallScreenNav.html"></div> 
</div>

<!-- Start Content -->
<div class="w3-content w3-container w3-padding-0" style="max-width:100%;margin-top:60px;margin-bottom:80px">

<div w3-include-html="includes/topBranding-Search.html"></div> 

<!-- Slideshow -->
<div id="myslideFrame"> <!-- open slideShow frame-->
    
    <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0">
<img src="images/banner-1.jpg" style="width:100%; max-height:774px">
<div class="w3-display-bottommiddle w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-zot-red w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span>
</div>
    </div>
    
    <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0">
<img src="images/banner-2.jpg" style="width:100%; max-height:774px">
<div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-dark-grey w3-padding-large w3-hover-zot-red w3-animate-bottom">Copy That Animates Over Image</span>
</div>
    </div>
    
    <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0">
<img src="images/banner-3.jpg" style="width:100%; max-height:774px">
<div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span>
</div>
    </div>
    
<div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0">
<img src="images/banner-4.jpg" style="width:100%; max-height:774px">
<div class="w3-display-bottomright w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span>
</div>
</div>

<div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0">
<img src="images/banner-5.jpg" style="width:100%; max-height:774px">
<div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span>
</div>
</div>

<div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0">
<img src="images/banner-6.jpg" style="width:100%; max-height:774px">
<div class="w3-display-bottomright w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span>
</div>
</div>

<div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0">
<img src="images/banner-7.jpg" style="width:100%; max-height:774px">
<div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span>
</div>
</div>

<!-- Slideshow next/previous buttons -->
<div class="w3-container w3-dark-grey w3-padding-8 w3-xlarge"> <!--open manual controls div-->

    <div class="w3-left" onclick="plusDivs(-1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"><i class="fa fa-arrow-circle-left w3-hover-text-zot-red"></i></div>
<div class="w3-right" onclick="plusDivs(1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"><i class="fa fa-arrow-circle-right w3-hover-text-zot-red"></i></div>

<div class="w3-center"> <!-- open Slideshow individual selector buttons --> 
<span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span>
<span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span>
<span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span>
     <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span>
     <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(5)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span>
     <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(6)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span>
     <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(7)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span>
</div><!--close Slideshow individual selectors-->
</div> <!--close manual controls-->
</div> <!--close slideshow frame-->

<!-- Grid -->
<div class="w3-row"> <!--open grid-->

    <div class="w3-center w3-padding-64 w3-hide-small">
<span class="w3-xlarge w3-bottombar w3-border-dark-grey w3-text-zot-red w3-padding-16">MAIN TOPIC HEADING</span>
</div>

<div class="w3-col l3 m6 w3-light-grey w3-padding-large">
<h3>Heading One</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p> </p><br/>
</div>

<div class="w3-col l3 m6 w3-grey w3-padding-large">
<h3>Heading Two</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p> </p><br/>
</div>

<div class="w3-col l3 m6 w3-dark-grey w3-padding-large">
<h3>Heading Three</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p> </p><br/>
</div>

<div class="w3-col l3 m6 w3-black w3-padding-large">
<h3>Heading Four</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
     <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div>
        
</div> <!--close grid-->

    <!-- Footer -->
    <div w3-include-html="includes/footer.html"></div>
</div> <!--close content div-->

<!-- Script For Side Navigation -->
<script>
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "300px";
x.style.textAlign = "center";
x.style.fontSize = "40px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}

// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}

// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

<!--Includes Script-->
<script>
w3IncludeHTML();
</script>
</body>

</html>

To keep the page clean I'm including some pieces.

 

Here is the topNav.html

<ul class="w3-navbar w3-left-align w3-light-grey w3-center w3-large">
<li class="w3-hide-large w3-opennav w3-right">
    <a class="w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
  </li>
  <li class="w3-left w3-hide-small w3-hide-medium" style="width:11.11% !important"><a href="home.html">Home</a></li>
 
  <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="1.html">Link 1<i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">DD1</a>
      <a href="#">DD2</a>
      <a href="#">DD3</a>
      <a href="#">DD4</a>
    </div>
</li>
  <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="2.html">Link 2<i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">DD1</a>
      <a href="#">DD2</a>
      <a href="#">DD3</a>
      <a href="#">DD4</a>
    </div>
</li>
  <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="3.html">Link 3 <i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">DD1</a>
      <a href="#">DD2</a>
      <a href="#">DD3</a>
      <a href="#">DD4</a>
    </div>
  </li>
 <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="4.html">Link 4<i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">DD1</a>
      <a href="#">DD2</a>
      <a href="#">DD3</a>
      <a href="#">DD4</a>
    </div>
</li>
 <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="5.html">Link 5<i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">DD1</a>
      <a href="#">DD2</a>
      <a href="#">DD3</a>
    </div>
</li>
 <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="6.html">Link 6<i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">DD1</a>
      <a href="#">DD2</a>
    </div>
</li>
 <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="7.html">Link 7<i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
     <a href="#">DD1</a>
      <a href="#">DD2</a>
    </div>
</li>
<li class="w3-left w3-hide-small w3-hide-medium" style="width:11.11% !important"><a href="8.html">Link 8</a></li>
</ul>

Here's the topBranding-Search.html: (the serach input is just a placeholder)

<div class="w3-row w3-margin">
    <div class="w3-col w3-quarter w3-container">
    <img src="images/logo.jpg" />
    </div>
    <div class="w3-col w3-half w3-container"></div>
    <div class="w3-col w3-quarter w3-container w3-hide-small">Search <input class="w3-input w3-border" type="text" ></div>
  </div>

Here is smallscreenNav.html (all dropdowns have not been added yet)

<ul class="w3-navbar w3-left-align w3-large w3-theme">
  <li><a href="#">Home</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="w3-dropdown-hover">
    <a href="#" title="test">Link 3<i class="fa fa-caret-down"></i></a>
    <div class="w3-dropdown-content w3-light-grey w3-card-4">
      <a href="#">DD1</a>
      <a href="#">DD2</a>
      <a href="#">DD3</a>
    </div>
  </li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
  </ul>

Here's the footer:

<footer class="w3-container w3-padding-32 w3-light-grey w3-center">
  <!--<h4>Footer</h4>-->
  <p>Copyright 2016 - All Rights Reserved</p>
  <a class="w3-btn-floating w3-zot-red" href="https://www.facebook.com"><i class="fa fa-facebook"></i></a>
  <a class="w3-btn-floating w3-zot-red" href="https://www.linkedin.com"><i class="fa fa-linkedin"></i></a>
  <a class="w3-btn-floating w3-zot-red" href="https://www.youtube.com"><i class="fa fa-youtube"></i></a>
</footer>

Here's the carousel.js:

var slideIndex = 0;
            var t;
            var dots;
            var maxheight = 0;
            var timedelay = 9000;
            window.onload = function() {
                var x = document.getElementsByClassName("mySlides");
                var parent_elem = document.getElementById('myslideFrame')

                var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)
                for (i = 0; i < x.length; i++) {
                    // x[i].style.width = "100%";

                    if (x[i].height > maxheight)
                    {

                        maxheight = x[i].height;

                    }

                }

                document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";

                showDivs(slideIndex);
                carousel();
            };

            function plusDivs(n) {
                showDivs(slideIndex += n);

            }

            function currentDiv(n) {
                showDivs(slideIndex = n);
            }

            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("mySlides");
                dots = document.getElementsByClassName("demodots");
                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-zot-red", "");
                }
                x[slideIndex - 1].style.display = "inline-block";
                dots[slideIndex - 1].className += " w3-zot-red";
            }



            function carousel() {
                var i;

                var x = document.getElementsByClassName("mySlides");
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                    dots[i].className = dots[i].className.replace(" w3-zot-red", "");
                }
                slideIndex++;
                if (slideIndex > x.length) {
                    slideIndex = 1
                }
                x[slideIndex - 1].style.display = "inline-block";
                dots[slideIndex - 1].className += " w3-zot-red";
                t = setTimeout(carousel, timedelay);
            }

            function pauseCarousel() {

                clearTimeout(t)
            }

            function startCarousel() {

                t = setTimeout(carousel, timedelay);
            }

Here's the w3data.js:

/* W3Data ver 1.2 by W3Schools.com */
var w3DataObject = {};
function w3DisplayData(id, data) {
    var htmlObj, htmlTemplate, html, arr = [], a, l, rowClone, x, j, i, ii, cc, repeat, repeatObj, repeatX = "";
    htmlObj = document.getElementById(id);
    htmlTemplate = w3InitTemplate(id, htmlObj);
    html = htmlTemplate.cloneNode(true);
    arr = w3GetElementsByAttribute(html, "w3-repeat");
    l = arr.length;
    for (j = (l-1); j >= 0; j -= 1) {
        cc = arr[j].getAttribute("w3-repeat").split(" ");
        if (cc.length == 1) {
            repeat = cc[0];
        } else {
            repeatX = cc[0];
            repeat = cc[2];
        }
        arr[j].removeAttribute("w3-repeat");
        repeatObj = data[repeat];
        if (repeatObj && typeof repeatObj == "object" && repeatObj.length != "undefined") {
            i = 0;
            for (x in repeatObj) {
                i += 1;
                rowClone = arr[j];
                rowClone = w3NeedleInHaystack(rowClone, "element", repeatX, repeatObj[x]);
                a = rowClone.attributes;
                for (ii = 0; ii < a.length; ii += 1) {
                    a[ii].value = w3NeedleInHaystack(a[ii], "attribute", repeatX, repeatObj[x]).value;
                }
                (i === repeatObj.length) ? arr[j].parentNode.replaceChild(rowClone, arr[j]) : arr[j].parentNode.insertBefore(rowClone, arr[j]);
            }
        } else {
            console.log("w3-repeat must be an array. " + repeat + " is not an array.");
            continue;
        }
    }
    html = w3NeedleInHaystack(html, "element");
    htmlObj.parentNode.replaceChild(html, htmlObj);
    function w3InitTemplate(id, obj) {
        var template;
        template = obj.cloneNode(true);
        if (w3DataObject.hasOwnProperty(id)) {return w3DataObject[id];}
        w3DataObject[id] = template;
        return template;
    }
    function w3GetElementsByAttribute(x, att) {
        var arr = [], arrCount = -1, i, l, y = x.getElementsByTagName("*"), z = att.toUpperCase();
        l = y.length;
        for (i = -1; i < l; i += 1) {
            if (i == -1) {y[i] = x; }
            if (y[i].getAttribute(z) !== null) {arrCount += 1; arr[arrCount] = y[i];}
        }
        return arr;
    }
    function w3NeedleInHaystack(elmnt, typ, repeatX, x) {
        var value, rowClone, pos1, haystack, pos2, needle = [], needleToReplace, i, cc, r;
        rowClone = elmnt.cloneNode(true);
        pos1 = 0;
        while (pos1 > -1) {
            haystack = (typ == "attribute") ? rowClone.value : rowClone.innerHTML;
            pos1 = haystack.indexOf("{{", pos1);
            if (pos1 === -1) {break; }
            pos2 = haystack.indexOf("}}", pos1 + 1);
            needleToReplace = haystack.substring(pos1 + 2, pos2);
            needle = needleToReplace.split("||");
            value = undefined;
            for (i = 0; i < needle.length; i += 1) {
                needle[i] = needle[i].replace(/^\s+|\s+$/gm,''); //trim
                //value = ((x && x[needle[i]]) || (data && data[needle[i]]));
                if (x) {value = x[needle[i]];}
                if (value == undefined && data) {value = data[needle[i]];}
                if (value == undefined) {
                    cc = needle[i].split(".");
                    if (cc[0] == repeatX) {value = x[cc[1]]; }
                }
                if (value == undefined) {
                    if (needle[i] == repeatX) {value = x; }
                }
                if (value == undefined) {
                    if (needle[i].substr(0,1) == '"') {
                        value = needle[i].replace(/"/g, "");
                    } else if (needle[i].substr(0,1) == "'") {
                        value = needle[i].replace(/'/g, "");
                    }
                }
                if (value != undefined) {break;}
            }
            if (value != undefined) {
                r = "{{" + needleToReplace + "}}";
                if (typ == "attribute") {
                    rowClone.value = rowClone.value.replace(r, value);
                } else {
                    w3ReplaceHTML(rowClone, r, value);
                }
            }
            pos1 = pos1 + 1;
        }
        return rowClone;
    }
    function w3ReplaceHTML(a, r, result) {
        var b, l, i, a, x, y, j, ll, nam;
        if (a.hasAttributes()) {
            b = a.attributes;
            l = b.length;
            for (i = 0; i < l; i += 1) {
                if (b[i].value.indexOf(r) > -1) {b[i].value = b[i].value.replace(r, result); }
            }
        }
        x = a.getElementsByTagName("*");
        l = x.length;
        a.innerHTML = a.innerHTML.replace(r, result);
    }
}
function w3IncludeHTML() {
  var z, i, a, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    if (z[i].getAttribute("w3-include-html")) {
      a = z[i].cloneNode(false);
      file = z[i].getAttribute("w3-include-html");
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = this.responseText;
          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}
function w3Http(target, readyfunc, xml, method) {
    var httpObj;
    if (!method) {method = "GET"; }
    if (window.XMLHttpRequest) {
        httpObj = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        httpObj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (httpObj) {
        if (readyfunc) {httpObj.onreadystatechange = readyfunc; }
        httpObj.open(method, target, true);
        httpObj.send(xml);
    }
}

Lastly, here's my w3.css (note: I added a color zot-red and commented where it's added)

/* W3.CSS 2.8 by Jan Egil and Borge Refsnes */html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/* End extract */html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}h1,h2,h3,h4,h5,h6,.w3-slim,.w3-wide{font-family:"Segoe UI",Arial,sans-serif}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:"Times New Roman",Times,serif}h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}hr{border:0;border-top:1px solid #eee;margin:20px 0}img{margin-bottom:-5px}a{color:inherit}.w3-image{max-width:100%;height:auto}.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}.w3-btn,.w3-btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}.w3-btn:hover,.w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}.w3-btn,.w3-btn-floating,.w3-btn-floating-large,.w3-closenav,.w3-opennav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   .w3-btn-floating,.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}.w3-btn-floating{width:40px;height:40px;line-height:40px}.w3-btn-floating-large{width:56px;height:56px;line-height:56px}.w3-disabled,.w3-btn:disabled,.w3-btn-floating:disabled,.w3-btn-floating-large:disabled{cursor:not-allowed;opacity:0.3}.w3-btn.w3-disabled *,.w3-btn-block.w3-disabled,.w3-btn-floating.w3-disabled *,.w3-btn:disabled *,.w3-btn-floating:disabled *{pointer-events:none}.w3-btn.w3-disabled:hover,.w3-btn-block.w3-disabled:hover,.w3-btn:disabled:hover,.w3-btn-floating.w3-disabled:hover,.w3-btn-floating:disabled:hover,.w3-btn-floating-large.w3-disabled:hover,.w3-btn-floating-large:disabled:hover{box-shadow:none}.w3-btn-group .w3-btn{float:left}.w3-btn-block{width:100%}.w3-btn-bar .w3-btn{box-shadow:none;background-color:inherit;color:inherit;float:left}.w3-btn-bar .w3-btn:hover{background-color:#ccc}.w3-ripple{position:relative;overflow:hidden}.w3-ripple:after{content:"";background:#ccc;position:absolute;padding:300%;bottom:0;left:0;opacity:0;transition:0.8s}.w3-ripple:active:after{padding:0;opacity:1;transition:0s}.w3-badge,.w3-tag,.w3-sign{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}ul.w3-ul{list-style-type:none;padding:0;margin:0}ul.w3-ul li{padding:6px 2px 6px 16px;border-bottom:1px solid #ddd}ul.w3-ul li:last-child{border-bottom:none}.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}.w3-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}/*.w3-navbar li{float:left}.w3-navbar li a,.w3-navitem{display:block;padding:8px 16px}.w3-navbar li a:hover{color:#000;background-color:#ccc}*//*commented out original css above - below changed background-color and text color*/.w3-navbar li{float:left}.w3-navbar li a,.w3-navitem{display:block;padding:8px 16px}.w3-navbar li a:hover{color:#fff;background-color:#ac172b}.w3-navbar .w3-dropdown-hover,.w3-navbar .w3-dropdown-click{position:static}.w3-navbar .w3-dropdown-hover:hover,.w3-navbar .w3-dropdown-hover:first-child,.w3-navbar .w3-dropdown-click:hover{background-color:#ccc;color:#000}.w3-navbar a,.w3-topnav a,.w3-sidenav a,.w3-dropdown-content a,.w3-accordion-content a,.w3-dropnav a{text-decoration:none!important}.w3-navbar .w3-opennav.w3-right{float:right!important}.w3-topnav{padding:8px 8px}.w3-topnav a{padding:0 8px;border-bottom:3px solid transparent;-webkit-transition:border-bottom .3s;transition:border-bottom .3s}.w3-topnav a:hover{border-bottom:3px solid #fff}.w3-topnav .w3-dropdown-hover a{border-bottom:0}.w3-opennav,.w3-closenav{color:inherit}.w3-opennav:hover,.w3-closenav:hover{cursor:pointer;opacity:0.8}.w3-btn,.w3-btn-floating,.w3-dropnav a,.w3-btn-floating-large,.w3-btn-block,.w3-hover-shadow,.w3-hover-opacity,.w3-hover-opacity-off,.w3-navbar a,.w3-sidenav a,.w3-pagination li a,.w3-hoverable tbody tr,.w3-hoverable li,.w3-accordion-content a,.w3-dropdown-content a,.w3-dropdown-click:hover,.w3-dropdown-hover:hover,.w3-opennav,.w3-closenav,.w3-closebtn,.w3-hover-amber,.w3-hover-aqua,.w3-hover-blue,.w3-hover-light-blue,.w3-hover-brown,.w3-hover-cyan,.w3-hover-blue-grey,.w3-hover-green,.w3-hover-light-green,.w3-hover-indigo,.w3-hover-khaki,.w3-hover-lime,.w3-hover-orange,.w3-hover-deep-orange,.w3-hover-pink,.w3-hover-purple,.w3-hover-deep-purple,.w3-hover-red,.w3-hover-sand,.w3-hover-teal,.w3-hover-yellow,.w3-hover-white,.w3-hover-black,.w3-hover-grey,.w3-hover-light-grey,.w3-hover-dark-grey,.w3-hover-text-amber,.w3-hover-text-aqua,.w3-hover-text-blue,.w3-hover-text-light-blue,.w3-hover-text-brown,.w3-hover-text-cyan,.w3-hover-text-blue-grey,.w3-hover-text-green,.w3-hover-text-light-green,.w3-hover-text-indigo,.w3-hover-text-khaki,.w3-hover-text-lime,.w3-hover-text-orange,.w3-hover-text-deep-orange,.w3-hover-text-pink,.w3-hover-text-purple,.w3-hover-text-deep-purple,.w3-hover-text-red,.w3-hover-text-sand,.w3-hover-text-teal,.w3-hover-text-yellow,.w3-hover-text-white,.w3-hover-text-black,.w3-hover-text-grey,.w3-hover-text-light-grey,.w3-hover-text-dark-grey{-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}.w3-sidenav{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}.w3-sidenav a{padding:4px 2px 4px 16px}.w3-sidenav a:hover{background-color:#ccc}.w3-sidenav a,.w3-dropnav a{display:block}.w3-sidenav .w3-dropdown-hover:hover,.w3-sidenav .w3-dropdown-hover:first-child,.w3-sidenav .w3-dropdown-click:hover,.w3-dropnav a:hover{background-color:#ccc;color:#000}.w3-sidenav .w3-dropdown-hover,.w3-sidenav .w3-dropdown-click {width:100%}.w3-sidenav .w3-dropdown-hover .w3-dropdown-content,.w3-sidenav .w3-dropdown-click .w3-dropdown-content{min-width:100%}.w3-main,#main{transition:margin-left .4s}.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}.w3-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit}.w3-closebtn:hover,.w3-closebtn:focus{color:#000;text-decoration:none;cursor:pointer}.w3-pagination{display:inline-block;padding:0;margin:0}.w3-pagination li{display:inline}.w3-pagination li a{text-decoration:none;color:#000;float:left;padding:8px 16px}.w3-pagination li a:hover{background-color:#ccc}.w3-input-group,.w3-group{margin-top:24px;margin-bottom:24px}.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #808080;width:100%}.w3-label{color:#009688}.w3-input:not(:valid)~.w3-validate{color:#f44336}.w3-select{padding:9px 0;width:100%;color:#000;border:1px solid transparent;border-bottom:1px solid #009688}.w3-select select:focus{color:#000;border:1px solid #009688}.w3-select option[disabled]{color:#009688}.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}.w3-dropdown-hover:hover .w3-dropdown-content{display:block;z-index:1}.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}.w3-dropdown-content a{padding:6px 16px;display:block}.w3-dropdown-content a:hover{background-color:#ccc}.w3-accordion {width:100%;cursor:pointer}.w3-accordion-content{cursor:auto;display:none;position:relative;width:100%;margin:0;padding:0}.w3-accordion-content a{padding:6px 16px;display:block}.w3-accordion-content a:hover{background-color:#ccc}.w3-progress-container{width:100%;height:1.5em;position:relative;background-color:#f1f1f1}.w3-progressbar{background-color:#757575;height:100%;position:absolute;line-height:inherit}input[type=checkbox].w3-check,input[type=radio].w3-radio{width:24px;height:24px;position:relative;top:6px}input[type=checkbox].w3-check:checked+.w3-validate,input[type=radio].w3-radio:checked+.w3-validate{color:#009688}input[type=checkbox].w3-check:disabled+.w3-validate,input[type=radio].w3-radio:disabled+.w3-validate{color:#aaa}.w3-responsive{overflow-x:auto}.w3-container:after,.w3-panel:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after{content:"";display:table;clear:both}.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{width:99.99999%}@media only screen and (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}@media only screen and (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3,.w3-quarter{width:24.99999%}.w3-col.l4,.w3-third{width:33.33333%}.w3-col.l5{width:41.66666%}.w3-col.l6,.w3-half{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8,.w3-twothird{width:66.66666%}.w3-col.l9,.w3-threequarter{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}.w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden}.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}}@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}@media (min-width:993px){.w3-modal-content{width:900px}}@media screen and (max-width:600px){.w3-topnav a{display:block}.w3-navbar li:not(.w3-opennav){float:none;width:100%!important}.w3-navbar li.w3-right{float:none!important}}    @media screen and (max-width:600px){.w3-topnav .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}}    @media screen and (max-width:600px){.w3-topnav,.w3-navbar{text-align:center}}@media (max-width:600px){.w3-hide-small{display:none!important}}@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}@media (min-width:993px){.w3-hide-large{display:none!important}}@media screen and (max-width:992px){.w3-sidenav.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}@media screen and (min-width:993px){.w3-sidenav.w3-collapse{display:block!important}}.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}.w3-left{float:left!important}.w3-right{float:right!important}.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}.w3-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}.w3-circle{border-radius:50%!important}.w3-round-small{border-radius:2px!important}.w3-round,.w3-round-medium{border-radius:4px!important}.w3-round-large{border-radius:8px!important}.w3-round-xlarge{border-radius:16px!important}.w3-round-xxlarge{border-radius:32px!important}.w3-round-jumbo{border-radius:64px!important}.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}.w3-margin{margin:16px!important}.w3-margin-0{margin:0!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}.w3-section{margin-top:16px!important;margin-bottom:16px!important}.w3-padding-tiny{padding:2px 4px!important}.w3-padding-small{padding:4px 8px!important}.w3-padding-medium,.w3-padding,.w3-form{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}.w3-padding-xlarge{padding:16px 32px!important}.w3-padding-xxlarge{padding:24px 48px!important}.w3-padding-jumbo{padding:32px 64px!important}.w3-padding-4{padding-top:4px!important;padding-bottom:4px!important}.w3-padding-8{padding-top:8px!important;padding-bottom:8px!important}.w3-padding-12{padding-top:12px!important;padding-bottom:12px!important}.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}.w3-padding-128{padding-top:128px!important;padding-bottom:128px!important}.w3-padding-0{padding:0!important}.w3-padding-top{padding-top:8px!important}.w3-padding-bottom{padding-bottom:8px!important}.w3-padding-left{padding-left:16px!important}.w3-padding-right{padding-right:16px!important}.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}.w3-spin{animation:w3-spin 2s infinite linear;-webkit-animation:w3-spin 2s infinite linear}@-webkit-keyframes w3-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes w3-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.w3-container{padding:0.01em 16px}.w3-panel{padding:0.01em 16px;margin-top:16px!important;margin-bottom:16px!important}.w3-example{background-color:#f1f1f1;padding:0.01em 16px}.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}.w3-code{line-height:1.4;width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}.w3-example,.w3-code{margin:20px 0}.w3-card{border:1px solid #ccc}.w3-card-2,.w3-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}.w3-card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}.w3-card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)!important}.w3-card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21)!important}.w3-card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22)!important}.w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite}@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.w3-animate-opacity{-webkit-animation:opac 1.5s;animation:opac 1.5s}@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}@keyframes opac{from{opacity:0} to{opacity:1}}.w3-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}/*increased animation time from 4 to 8 for animate-left below*/.w3-animate-left{position:relative;-webkit-animation:animateleft 0.8s;animation:animateleft 0.8s}@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}.w3-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}.w3-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}.w3-animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}.w3-animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}.w3-opacity,.w3-hover-opacity:hover{opacity:0.60;filter:alpha(opacity=60);-webkit-backface-visibility:hidden}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1;filter:alpha(opacity=100);-webkit-backface-visibility:hidden}.w3-text-shadow{text-shadow:1px 1px 0 #444}.w3-text-shadow-white{text-shadow:1px 1px 0 #ddd}.w3-transparent{background-color:transparent!important}.w3-hover-none:hover{box-shadow:none!important;background-color:transparent!important}/* Colors */.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}.w3-blue-grey,.w3-hover-blue-grey:hover{color:#fff!important;background-color:#607d8b!important}.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}.w3-grey,.w3-hover-grey:hover{color:#000!important;background-color:#9e9e9e!important}.w3-light-grey,.w3-hover-light-grey:hover{color:#000!important;background-color:#f1f1f1!important}.w3-dark-grey,.w3-hover-dark-grey:hover{color:#fff!important;background-color:#616161!important}.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}/*added zot-red color below*/.w3-zot-red,.w3-hover-zot-red:hover{color:#fff!important;background-color:#ac172b!important}.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}.w3-text-blue-grey,.w3-hover-text-blue-grey:hover{color:#607d8b!important}.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}.w3-text-black,.w3-hover-text-black:hover{color:#000!important}.w3-text-grey,.w3-hover-text-grey:hover{color:#757575!important}.w3-text-light-grey,.w3-hover-text-light-grey:hover{color:#f1f1f1!important}.w3-text-dark-grey,.w3-hover-text-dark-grey:hover{color:#3a3a3a!important}/*added zot-red text color below*/.w3-text-zot-red,.w3-hover-text-zot-red:hover{color:#ac172b!important}.w3-border-amber,.w3-hover-border-amber:hover{border-
Edited by Goodness
Link to comment
Share on other sites
Goodness Newbie

Goodness

Posted
  • Author
Posted

Also Note:

 

Uncommenting these 2 lines, just after the <body> start does not have any effect:

 

<!--.mySlides {width: 100%;} /**/-->
<!--#myslideFrame{text-align: center; font-size:0;min-height:100%; font-size:0; text-align: center;position:relative;}-->

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

IT wouldn't because that is html comment NOT css comment which uses /* */, the problem is font-size: 0; which removes spacing appearing issue when display: inline-block is used.

 

Place this under #mySlideFrame

#myslideFrame > .mySlides > * {
    font-size: 15px;
}

full css

            body {font-family: "Lato", sans-serif}
            .mySlides {width: 100%;} /**/
            .mySlides {display: none}
            #myslideFrame{text-align: center; font-size:0;min-height:100%; font-size:0; text-align: center;position:relative;}
            #myslideFrame > * {font-size:15px;}
            .w3-left, .w3-right, .w3-tag {cursor:pointer}
            .w3-tag {height:15px;width:15px;padding:0;margin-top:6px}
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

IF you wish the text to animate for more than 1 loop of slide show images use.

var slideIndex = 0;
var t;
var dots;
var maxheight = 0;
var timedelay = 9000;
window.onload = function() {
    var x = document.getElementsByClassName("mySlides");
    var parent_elem = document.getElementById('myslideFrame')

    var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)
    for (i = 0; i < x.length; i++) {
        // x[i].style.width = "100%";

        if (x[i].height > maxheight)
        {

            maxheight = x[i].height;

        }

    }

    document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";

    showDivs(slideIndex);
    carousel();
};

function plusDivs(n) {
    showDivs(slideIndex += n);

}

function currentDiv(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    dots = document.getElementsByClassName("demodots");
    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-zot-red", "");
    }
    x[slideIndex - 1].style.display = "inline-block";
    dots[slideIndex - 1].className += " w3-zot-red";
}



function carousel() {
    var i;

    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
        dots[i].className = dots[i].className.replace(" w3-zot-red", "");
    }
    slideIndex++;
    if (slideIndex > x.length) {
        slideIndex = 1;
    }
//added by Dsonesuk
    var anim_element = x[slideIndex - 1].getElementsByTagName('span')[0];
    var anim_element_clone = anim_element.cloneNode(true);
    anim_element.parentNode.replaceChild(anim_element_clone, anim_element);


    x[slideIndex - 1].style.display = "inline-block";
    dots[slideIndex - 1].className += " w3-zot-red";
    t = setTimeout(carousel, timedelay);
}

function pauseCarousel() {

    clearTimeout(t)
}

function startCarousel() {

    t = setTimeout(carousel, timedelay);
}
Link to comment
Share on other sites
  • 2 months later...
Wheelman85 Newbie

Wheelman85

Posted
Posted

 

    var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)
    for (i = 0; i < x.length; i++) {
        // x[i].style.width = "100%";

        if (x[i].height > maxheight)
        {

            maxheight = x[i].height;

        }

    }

    document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";

    showDivs(slideIndex);
    carousel();
};

Hi

At last, a complete slideshow without jquery or with a big and unnecessary script. The only thing is i can't put my own height with css. If i remove the script part above, the slideshow disappears. Leaving the thumbnails alone. Don't know nothing about javascript.

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...