How can I fix the jQuery code below to have multiple sliders working correctly using CSS class names (not IDs) ?
As you can see in the CodePen it's all over the place and not working as expected. The sliders are not working correctly.
CodePen
HTML
<body>
<div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
</div>
</body>
CSS
.slider {
position: relative;
width: 80%;
}
.slide {
position: absolute;
opacity: 0;
}
.active {
transition: opacity 500ms ease;
opacity:1;
}
JS
var allSlides = $('.slide');
var activeSlide = 0;
setInterval('autoSlide()', 4000);
$(".slider-next").click(function() {
if (activeSlide+1 >= allSlides.length) {
allSlides.eq(activeSlide).removeClass("active");
activeSlide = 0;
allSlides.eq(0).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide++;
allSlides.eq(activeSlide).addClass("active");
}
});
$(".slider-prev").click(function() {
if (activeSlide-1 < 0) {
allSlides.eq(0).removeClass("active");
activeSlide = allSlides.length-1;
allSlides.eq(activeSlide).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide--;
allSlides.eq(activeSlide).addClass("active");
}
});
function autoSlide() {
if (activeSlide+1 >= allSlides.length) {
allSlides.eq(activeSlide).removeClass("active");
activeSlide = 0;
allSlides.eq(0).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide++;
allSlides.eq(activeSlide).addClass("active");
}
}
I was unsure what you are doing with the sliders, but I was able to wire up the handlers and get you going. I set an array for the sliders, then at page load I wire up the handlers to the sliders. When the sliders are clicked, I think you want to loop through your index of sliders and set the css classes to active. I did that here. Be aware that the selection of the slider by index might be null. Tailor the answer to your use.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
.slider {
position: relative;
width: 80%;
}
.slide {
position: relative;
opacity: 0;
}
.active {
transition: opacity 500ms ease;
opacity: 1;
}
</style>
<script type="text/javascript">
//set the array to the slide div's we have here
var allSlides = document.getElementsByClassName("slide");
var activeSlide = 0;//start at 0
setInterval('autoSlide()', 4000);
$(function () { //when the document is ready, wire up the click functions
$(".slider-next").click(function () {
if (activeSlide + 1 >= allSlides.length) {
allSlides[activeSlide].className =""; //remove any css class on this item
activeSlide = 0;
allSlides[0].className["active"]; //careful, these items maybe null
}
else {
allSlides[activeSlide].className="";
activeSlide++;
allSlides[activeSlide].className="active";
}
});
$(".slider-prev").click(function () {
if (activeSlide - 1 < 0) {
allSlides[0].className ="";
activeSlide = allSlides.length - 1;
allSlides[activeSlide].className= "active";
}
else {
allSlides[activeSlide].className= "";
activeSlide--;
allSlides[activeSlide].className ="active";
}
});
});
function autoSlide() {
if (activeSlide + 1 >= allSlides.length) {
allSlides[activeSlide].className = "";
activeSlide = 0;
allSlides[0].className ="active";
}
else {
allSlides[activeSlide].className = "";
activeSlide++;
allSlides[activeSlide].className ="active";
}
}
</script>
</head>
<body>
<div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
</div>
</body>
</html>
Related
I'm trying to implement code in which it slides like https://swiperjs.com/demos/110-slides-per-view/core (with arrows, which are easy to implement), and has the flipping functionality.
However, it seems like swiper.js interferes with the code that is supposed to work. Is the css or javascript of the flip function interfering with the code?
The flip functionality is working, but the slides aren't.
Html/CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>locationtemplate</title>
<link rel="stylesheet" href="swiper-bundle.min.css">
<style>
* {
margin: 0;
padding: 0;
}
.card {
width:100px;
height:100px;
transition: all .5s;
transform-style: preserve-3d;
}
.front {
width:100px;
height:100px;
position:absolute;
top:0;
left:0;
backface-visibility: hidden;
-webkit-backface-visibility:hidden;
background:#36732A;
}
.card.flipCard {
transform:rotateY(-180deg);
}
.back {
width:100px;
height:100px;
position:absolute;
top:0;
left:0;
backface-visibility: hidden;
-webkit-backface-visibility:hidden;
}
.back {
transform: rotateY(-180deg);
background: #2D63A9;
}
</style>
</head>
<body>
<!-- <script>
const mult = document.getElementById("bodyh");
searchCities();
async function searchCities() {
const res = await fetch("https://raw.githubusercontent.com/millbj92/US-Zip-Codes-JSON/master/USCities.json");
const cities = await res.json();
var pic = "";
cities.forEach( function(value){
if (value.zip_code == 91030 )
{
pic = value.city;
}
} );
let matches = cities.filter(element => {
if(element.city === pic){
return element.city;
}
});
outputHTML(matches);
}
let arr = [];
var xmlhttp;
const outputHTML = matches => {
if(matches.length > 0){
const html = matches
.map(
map => {
}
)
.join('');
} else {
mult.innerHTML = "<p>Don't see your city? Email us at localyco#gmail.com</p>";
}
};
</script>
-->
<!-- <h1>91030</h1>
<div class="locationhomepage" id ="91030"> -->
<div class="swiper swiper3">
<div class="swiper-wrapper">
<div class="swiper-cards">
<div class="card" id="1">
<div class="front"> <button onClick="flipOmelette(1)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(1)">Hello</button></div>
</div></div>
<div class="swiper-cards">
<div class="card" id="2">
<div class="front"> <button onClick="flipOmelette(2)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(2)">Hello</button></div>
</div></div>
<div class="swiper-cards">
<div class="card" id="3">
<div class="front"> <button onClick="flipOmelette(3)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(3)">Hello</button></div>
</div></div>
<div class="swiper-cards">
<div class="card" id="4">
<div class="front"> <button onClick="flipOmelette(4)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(4)">Hello</button></div>
</div></div>
</div>
<div class="swiper-button-next swiper-navBtn"></div>
<div class="swiper-button-prev swiper-navBtn"></div>
</div>
<!--
</div> --> </body> </html>
Javascript
<script src="swiper-bundle.min.js"></script>
<script>
let flip;
function flipOmelette(hello){
flip = document.getElementById(hello.toString());
flip.classList.toggle("flipCard");
console.log(hello);
}
var swiper3 = new Swiper('.swiper3', {
slidesPerView: 10,
spaceBetween: 2500,
loop: true,
spaceBetween: 300,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
I tried the code above, which should have worked, but I'm probably missing something. Maybe the reason it's not working is because it's mainly for mobile applications.
The Flip is working, but the slides aren't.
The first column is displayed by default. If I click on the "1" I want to display "1.1, 1.2, 1.3" and then if I click on "1.1" display "1.1.1, 1.1.2, 1.1.3", but if I click on "1.2" hide the "1.1.1, 1.1.2, 1.1.3" and display "1.2.1, ...". If I click on "2" hide "1.1, 1.2, 1.3" and hide "1.2.1, ..." and display "2.1, 2.2" .....
This is always nested in 3 layers.
The HTML code have to look like as I wrote in my scource code.
It will not be a menu system.
I do not have any idea how to make this work.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){$("#load").attr("src","table.html");});</script>
</head>
<body>
<div id="page">
<iframe width="100%" height="100%" frameborder="0" id="load" src="table.html" ></iframe>
</div>
</body>
</html>
table.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
</div>
....
</div>
....
</div>
</div>
</div>
</body>
</html>
style.css
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}
A solution which builds the concept from first class:
var $sel = $(".First li");
var nbr = $sel.length;
var lastval ="";
$sel.clone().appendTo(".Second").clone().appendTo(".Third");
$(".main div:not([class=First])").hide();
$(document).on("click", "li", function() {
var val = $(this).text();
var l = val.length;
if(lastval == val || l > 3) return;
lastval = val;
switch(val.length){
case 1:
$(".main div").show().last().hide();
$(".Second li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
case 3:
$(".Third").show().find("li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
}
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: left;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>
Basically, this is the scrap code where you can start. It is simple logic. The code is creating HTML and changing the other div's HTML.
$(document).ready(function(){
$('body').on('click', 'a', function() {
var number = $(this).html();
var parent = $(this).parent().parent().attr('class');
var htmlss = '';
var i;
if(parent == 'First'){
$('.Second').html('');
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Second').html(htmlss);
}
else if (parent == 'Second'){
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Third').html(htmlss);
}
});
});
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>
</body>
</html>
Here is a pure JavaScript solution. I did not touch the HTML as that was declared forbidden, so I had to come up with some js mumbo jumbo to get the initial layout. Following is a working snippet:
function clickMe(id) {
let query;
if (id.length == 1) {
query = document.querySelector(".S_1");
second.style.opacity = 1;
third.style.opacity = 0;
} else if (id.length == 3) {
query = document.querySelector(".T_1").children[0];
selector = ".T_1.1";
third.style.opacity = 1;
}
[...query.children].forEach((node, i) => {
node.innerText = `${id}.${i + 1}`;
});
}
const hideNotUseful = document.querySelector(".S_2").remove();
const first = document.querySelector(".First");
const thirdChild = document.createElement("li");
thirdChild.innerText = 3;
first.append(thirdChild);
const second = document.querySelector(".Second");
const third = document.querySelector(".Third");
second.style.opacity = 0;
third.style.opacity = 0;
[...first.children, ...second.children[0].children].forEach(node => {
node.addEventListener("click", e => clickMe(node.innerText));
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: center;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>stoplight</title>
<link rel="stylesheet" type="text/css" href="stoplight.css">
</head>
<body>
<div id="controls">
<button id="stop">Stop</button>
<button id="slow">Slow</button>
<button id="go">Go</button>
<button id="caution">Caution</button>
</div>
<div id="mainContainer">
<div id="top" class="off">
</div>
<div id="middle" class="off">
</div>
<div id="bottom" class="off">
</div>
</div>
<script type="text/javascript" src="stoplight.js"></script>
</body>
</html>
Basically, I'm just trying to select each div of the stoplight and change the background color. First, I thought I could just reset each div to its original color. I'm trying to do the same with the setInterval function that starts a flashing yellow light, but it doesn't seem to stop it and breaks the rest of the functions.
document.getElementById('stop').onclick = goRed;
document.getElementById('go').onclick = goGreen;
document.getElementById('slow').onclick = goYellow;
document.getElementById('caution').addEventListener('click', () => {
blink();
});
let middle = document.getElementById('middle');
let blinking;
function goRed() {
reset();
document.getElementById('top').style.backgroundColor = '#FF0000';
};
function goYellow() {
reset();
middle.style.backgroundColor = '#FFFF00';
};
function goGreen() {
reset();
document.getElementById('bottom').style.backgroundColor = '#7FFF00';
};
function blink(){
reset();
blinking = setInterval(() => {
middle.classList.toggle('onYellow');
}, 1000);
};
function reset() {
document.getElementById('top').style.backgroundColor = '#A0522D';
document.getElementById('middle').style.backgroundColor = '#A0522D';
document.getElementById("bottom").style.backgroundColor = '#A0522D';
clearInterval(blinking);
};
You are mixing in-style coloring, with class based coloring, and in some cases, the browser will decide which gets a priority. Unless you add !important in the class background to enforce the attribute.
I suggest removing all in-style coloring and sticking only to classes so that you will not have to use !important.
This way, it is easier to work with blinking and setInterval.
See my code snippet below.
document.getElementById('stop').onclick = goRed;
document.getElementById('go').onclick = goGreen;
document.getElementById('slow').onclick = goYellow;
document.getElementById('caution').addEventListener('click', () => {
blink();
});
let middle = document.getElementById('middle');
let blinking;
function goRed() {
reset();
document.getElementById('top').className = "onRed";
};
function goYellow() {
reset();
middle.className = "onYellow";
};
function goGreen() {
reset();
document.getElementById('bottom').className = "onGreen";
};
function blink() {
reset();
blinking = setInterval(() => {
middle.classList.toggle('onYellow');
middle.classList.toggle('onOff');
}, 1000);
};
function reset() {
document.getElementById('top').className = "onOff";
document.getElementById('middle').className = "onOff";
document.getElementById("bottom").className = "onOff";
clearInterval(blinking);
};
#mainContainer div {
border: 1px solid grey;
width: 40px;
height: 40px;
border-radius: 40px;
}
.onYellow {
background-color: #ffff00;
}
.onOff {
background-color: #A0522D;
}
.onGreen {
background-color: #7FFF00;
}
.onRed {
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<title>stoplight</title>
<link rel="stylesheet" type="text/css" href="stoplight.css">
</head>
<body>
<div id="controls">
<button id="stop">Stop</button>
<button id="slow">Slow</button>
<button id="go">Go</button>
<button id="caution">Caution</button>
</div>
<div id="mainContainer">
<div id="top" class="off">
</div>
<div id="middle" class="off">
</div>
<div id="bottom" class="off">
</div>
</div>
<script type="text/javascript" src="stoplight.js"></script>
</body>
</html>
I'm trying to highlight certain div element when mouse hovers over it with spesific class. I want the whole div with class Test to be highlighted on mouse over and none of the children in the div (the span) or the div with class Main.
Currently it highlights anything inside the div on mouse over as well.
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseover", function (event) {
event.target.style.backgroundColor = "#ffcc00";
//some things I tried
//event.target.parentNode.style.backgroundColor = "#ffcc00";
//event.target.childNodes[0].style.backgroundColor = "#ffcc00";
//there will be more stuff in here, triggered by the event
});
}
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseout", function (event) {
event.target.style.backgroundColor = "transparent";
//some things I tried
//event.target.parentNode.style.backgroundColor = "transparent";
//event.target.childNodes[0].style.backgroundColor = "transparent";
//there will be more stuff in here, triggered by the event
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 540px; top: 0px;">
<div class="Main">
<div class="Test Test0">
<span>Text0</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test1">
<span>Text1</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test2">
<span>Text2</span>
<span>T</span>
<span>A</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
Thanks for any help!
This is due to event-capturing (a brief description of order here), event bound to the parent element is propagated to the DOM tree beneath.
Simply replace event.target with this.
Demo
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseover", function (event) {
this.style.backgroundColor = "#ffcc00";
});
}
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseout", function (event) {
this.style.backgroundColor = "transparent";
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 540px; top: 0px;">
<div class="Main">
<div class="Test Test0">
<span>Text0</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test1">
<span>Text1</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test2">
<span>Text2</span>
<span>T</span>
<span>A</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
Why don't you just use css with :hover? That would be much faster.
.Test {
background-color: transparent;
}
.Test:hover {
background-color: #ffcc00;
}
var linkit = document.querySelectorAll(".Test");
function isInside(node, target) {
for (; node != null; node = node.parentNode)
if (node == target) return true;
}
linkit.forEach(function(element) {
element.addEventListener("mouseover", function(event) {
if (!isInside(event.relatedTarget, element))
element.style.backgroundColor = "#ffcc00";
});
element.addEventListener("mouseout", function(event) {
if (!isInside(event.relatedTarget,element))
element.style.backgroundColor = "rgba(255, 255, 255, .4)";
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 540px; top: 0px;">
<div class="Main">
<div class="Test Test0">
<span>Text0</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test1">
<span>Text1</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test2">
<span>Text2</span>
<span>T</span>
<span>A</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
Here is my js, relevant css for photo album, and html. My photo album should automatically cycle between photos or be able to cycle between photos using the next and previous buttons. However neither is working properly. I am not sure if I am referencing js and the jquery library correctly in the html document. I am fairly new to js and jquery so any information on what might be wrong with my code would be helpful. Thank you.
ps. html formatted a bit weird in my post.
$(document).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});
/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.img-cont div {
background: rgba(0, 0, 0, 0.55);
width: 100%;
display: inline-block;
display: none;
}
.img-cont img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shear Excellence</title>
<link href="site.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<!--Current Fonts add | after each in url to simplify-->
<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
<!--google fonts-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="header">
Gallery
</div>
<div id="nav-menu">
<ul>
<li>Home</li>
<li>Services</li>
<li id="current">Gallery</li>
<li>About Us</li>
</ul>
</div>
<div class="soc-media">
<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
</div>
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="img-cont">
<div style="display: inline-block;">
<img src="http://i.imgur.com/qlkUBfl.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/WiMIaUL.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/LsPrhg5.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/9SsZHVO.jpg"/>
</div>
<div>
<img src="http://imgur.com/WSlGugy.jpg"/>
</div>
<div>
<img src="http://imgur.com/GkPzEX7.jpg"/>
</div>
<div>
<img src="http://imgur.com/WpYyjyQ.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/ilDrPeq.jpg"/>
</div>
</div>
<div id="footer">
<p>
Shear Excellence Salon is located at
<br>
Phenix Salon Suites
<br>
145 Willow Bend, Suite #107 Crystal, Minnesota 55428
<br>
+1-763-807-4186
<br>
© 2016 Nicholas Smith
</p>
</div>
</div>
<script type="text/javascript" src="myScripts.js"></script>
</body>
</html>
Replace .container div to .img-cont div in your jquery to make it work. Since .container div doesn't exist in your html.
$(document).ready(function() {
var currentIndex = 0,
items = $('.img-cont div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.img-cont div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});
/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.img-cont div {
background: rgba(0, 0, 0, 0.55);
width: 100%;
display: inline-block;
display: none;
}
.img-cont img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shear Excellence</title>
<link href="site.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<!--Current Fonts add | after each in url to simplify-->
<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
<!--google fonts-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="header">
Gallery
</div>
<div id="nav-menu">
<ul>
<li>Home</li>
<li>Services</li>
<li id="current">Gallery</li>
<li>About Us</li>
</ul>
</div>
<div class="soc-media">
<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
</div>
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="img-cont">
<div style="display: inline-block;">
<img src="http://i.imgur.com/qlkUBfl.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/WiMIaUL.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/LsPrhg5.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/9SsZHVO.jpg"/>
</div>
<div>
<img src="http://imgur.com/WSlGugy.jpg"/>
</div>
<div>
<img src="http://imgur.com/GkPzEX7.jpg"/>
</div>
<div>
<img src="http://imgur.com/WpYyjyQ.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/ilDrPeq.jpg"/>
</div>
</div>
<div id="footer">
<p>
Shear Excellence Salon is located at
<br>
Phenix Salon Suites
<br>
145 Willow Bend, Suite #107 Crystal, Minnesota 55428
<br>
+1-763-807-4186
<br>
© 2016 Nicholas Smith
</p>
</div>
</div>
<script type="text/javascript" src="myScripts.js"></script>
</body>
</html>