I want to do an automatic picture slideshow with the dots underneath for each picture. I don't know how to use javascript at all, just html/css, so I found this code snippet online but I can't make the slideshow scroll behind my fixed header. any suggestions? also if anybody knew how to make the dots clickable to automatically change the picture that would be great too! Basically, I want my slideshow to be like the one on http://www.eatchronictacos.com, minus the image preview when hovering over a dot. Thanks guys
Here is a codepen: http://codepen.io/nrojina0/pen/jAZVJE
Here is my html (with the entirety of the slideshow code snippet):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style4.css">
<title>
Bonlee Grown Farm
</title>
</head>
<body>
<div id="header">
<div id="logo"> Bonlee Grown Farm </div> <div id="address"> 650 Al Davis Road <br> <p style="font-size: 0.1em"> <br> </p> Bear Creek, NC 27207 <p style="font-size: 0.1em"> <br> </p> Home: (919)837-2937 | Cell: (012)345-6789 <p style="font-size: 0.1em"> <br> </p> amyraysugg@embarqmail.com </div>
<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a> </li>
<li> <a href="OurStory.html"> Our Story </a> </li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a> </li>
<li> <a href="Market2.html"> Market2 </a> </li>
<li> <a href="Market3.html"> Market3 </a> </li>
<li> <a href="Market4.html"> Market4 </a> </li>
</ul>
</li>
<li> <a href="FromOurFarm.html"> From Our Farm </a> </li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jams.html"> Jams </a> </li>
<li> <a href="Jellies.html"> Jellies </a> </li>
<li> <a href="Pickled.html"> All Things Pickled </a> </li>
<li> <a href="Relishes.html"> Relishes </a> </li>
<li> <a href="Mustards.html"> Mustards </a> </li>
<li> <a href="Miscellaneous.html"> Miscellaneous </a> </li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a> </li>
</ul>
</nav>
</div>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin-left: 1%;
z-index: 2;
/* max-height: 500px;
*/}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
margin-bottom: 3%;
font-family: Verdana,sans-serif;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
margin-top: 3%;
margin-left: 2.5%;
font-family: Verdana,sans-serif;s
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://www.kowalskis.com/sites/kowalskis.com/files/images/signature-products/signature-jams.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="http://i.parkseed.com/images/xxl/51659-pk-p1.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://spoonuniversity.com/wp-content/uploads/sites/100/2016/06/produce.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="http://static.wixstatic.com/media/a63fc0_89452cdd3605426791e345d6b3679883.jpg_srz_126_148_85_22_0.50_1.20_0.00_jpg_srz" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<div style="text-align:left; margin-top: -1%; margin-left: 32.8%">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
</body>
</html>
Here is my CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
font-family: Garamond, Times;
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 15em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 0.75em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}
nav > ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav > ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav > ul li > a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: Garamond, Times;
padding: 8px 0;
display: block;
/*width: 97.5%;*/
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav > ul li > a,
nav > ul li:focus > a,
nav > ul li:visited > a,
nav > ul li:hover > a,
nav > ul li:active > a {
text-decoration: none;
color: #0000EE;
}
nav > ul li:hover > a,
nav > ul li:active > a {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav > ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}
/* ^NAVIGATION BAR - LEVEL 2 */
/*-------------------------------------------------------------------------*/
table tr#firstrow td{
background-color: #eee;
color: #8B4513;
font-weight: bold;
}
table{
width: 80%;
margin: 20px 0.5%;
font-family: Arial;
font-size: 1.12em;
margin: auto;
clear: both;
table-layout: fixed;
}
table tr td{
text-decoration: none;
color: white;
}
table tbody tr:nth-child(2n) td {
background: #CA240C;
}
table tbody tr:nth-child(2n+1) td {
background: #FF7159;
}
table tr td{
padding: 0.75%;
margin: 0 auto;
}
table tr td#kitchenfirstcolumn{
width: 30%;
}
table tr td#kitchenothercolumns{
width: 70%;
}
table tr td#farmfirstcolumn{
width: 18%;
}
table tr td#farmsecondcolumn{
width: 20%;
}
table tr td#farmothercolumns{
width: 62%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
img{
max-width:100%;
max-height: 100%;
padding: 3%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
h1{
font-size: 1.5em;
font-family: Palatinos, cursive;
}
h2{
font-size: 3em;
font-family: Palatinos, cursive;
text-align: center;
}
/*-------------------------------------------------------------------------*/
Add z-index: 3 to #header in css and it works as expected I guess:
#header {
position: fixed;
width: 100%;
top: 0;
height: 15em;
background-color: #254117;
z-index: 3;
}