We Keep Coding

Previous Button on Slideshow Not Working Properly

I need help with my previous button for my slideshow. My next button works just fine but everytime I press previous it does a kind of shuffle mode and retrieves the pictures in a random order. If anyone could please help that would be great! I'm fairly new to JavaScript so please be patient and clear.
HTML
<div class="container">
<header>
<nav class="clearfix">
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Before/After</li>
<li>Facilities</li>
<li>Contact</li>
<li>Staff</li>
</ul>
</div>
<p id="menu">Menu</p>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</nav>
<img src="img/logoBRB.png"/>
<h1>Brad's Auto Body</h1>
<p id="quote"><i>"Dedicated To Perfection"</i></p>
</header>
<section class="slideshow" id="slideshow">
<figure>
<img class="mySlides" src="img/corengine.jpg" width="100%">
</figure>
<figure>
<img class="mySlides" src="img/corseat.jpg" width="100%">
</figure>
<figure>
<img class="mySlides" src="img/blah.jpg" width="100%">
</figure>
<figure>
<img class="mySlides" src="img/blah2.jpg" width="100%">
</figure>
<figure class="show">
<img class="mySlides" src="img/cor.jpg" width="100%">
</figure>
<span class="prev">«</span> <span class="next">»</span>
</section>
<footer>
<div class="social">
<ul>
<li>
<i class="fa fa-facebook fa-2x" id="fa"></i>
</li>
</ul>
</div>
<p>©Copyright 2016. Brad’s Auto Body. All Rights Reserved.</p>
<p>Web Design by<img class="logo" src="img/logoJJC.png">JJC Web Developers</p>
</footer>
<script src="slideshow.js"></script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin" type="text/javascript"></script>
</div>
JavaScript
var counter = 0, // to keep track of current slide
$items = $('.slideshow figure'), // a collection of all of the slides, caching for performance
numItems = $items.length; // total number of slides
// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function() {
var itemToShow = Math.abs(counter % numItems); // uses remainder (aka modulo) operator to get the actual index of the element to show
$items.removeClass('show'); // remove .show from whichever element currently has it
$items.eq(itemToShow).addClass('show');
};
// add click events to prev & next buttons
$('.next').on('click', function() {
showCurrent();
counter++;
});
$('.prev').on('click', function() {
showCurrent();
counter--;
});
// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
var $el = $('#slideshow');
$el.slideshow({
duration: 400,
delay: 3000,
selector: '> img',
transition: 'push(up)',
autoPlay: true,
show: function(params) {
var nextIndex = params.next.index;
if (nextIndex > 2) {
// do something awesome when the slide is after the third slide.
}
},
complete: function(params) {
// do something awesome when a transition finishes
}
});
// get the slideshow object if you want it
var slideshow = $el.data('slideshow');
// show the third slide
$el.slideshow('show', 2); // Element API
slideshow.show(2); // object API
// show the next slide
slideshow.show('next');
// pause and play
slideshow.stop();
slideshow.play();
CSS
#slideshow {
background-color: solid transparent;
padding: 0;
}
.slideshow {
position: relative;
display: block;
overflow: hidden;
height: 500px;
width: auto;
}
.show {
transition: opacity 2s;
opacity: 1;
position: relative;
zoom: 110%;
}
.mySlides {
height: 500px;
}
figure {
transition: opacity 0;
opacity: 0;
position: absolute;
margin: 0;
}
.next, .prev {
color: #fff;
position: absolute;
background: rgba(0,0,0,.6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover {
cursor: pointer;
opacity: 1;
}
.next {
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev {
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

Im really not sure how your slider even works by selecting the figure using modulo. I would suggest you to keep track of the figure element that has the show class and change the counter based on that.
First, when Javascript is loaded, you should set the counter variable to the index of the figure which has the show class. This can be achived with the following function (or just add it straigth to the variable declaration):
function getShowIndex() {
return $('#slideshow figure').index($('.show'));
}
Then, change to next or previous image by adding or subtracting from the counter. Though, there are two exceptions:
When going from the last image to the first the counter value should be changed to 0.
Likewise from the firt to the last the counter value should be changed to [ammount of figure elements] - 1 aka index of the last figure element.
This can be achieved by somethin like this:
// Remove .show from whichever element currently has it and place it to
// figure that has index 'counter'
function showCurrent() {
$items.removeClass('show');
$items.eq(counter).addClass('show');
}
function showNext() {
if (counter == numItems - 1) {
counter = 0;
} else {
counter++;
}
showCurrent();
}
function showPrev() {
if (counter == 0) {
counter = numItems - 1;
} else {
counter--;
}
showCurrent();
}
// Add click events to prev & next buttons
$('.next').on('click', function() {
showNext();
});
$('.prev').on('click', function() {
showPrev();
});
Minimal JSFiddle demo
I removed TouchSwipe from the demo as its implementation didn't seem to be finished.
On a side note: you seem to have two versions of jQuery, 2.2.1 and 2.1.3. Consider removing the latter and placing all of your JS files at the end of body tag. This way the JS files are loaded last. The order of the files also matters, it should be:
jQuery
jQueryUI
TouchSwipe
Your own files

jquery-ui slide left doesn't work first time

When I'm using show() and hide() methods from jquery-ui:
var current = 1;
function slide(buttonNum) {
if (current != buttonNum){
$("#page" + current).hide("slide", { direction: "left" }, 800, function() {
$("#page" + buttonNum).show("slide", { direction: "right" }, 800);
});
current = buttonNum;
}
}
My intention is that every time button is clicked for this function the page would scroll left to change to required page.
The problem is that it doesn't work first time I'm clicking page number with function above(the current div would slide to the left, but div which I change to just pops up without animation) but works normally other times.
my css is as follows:
.slider {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider .content {
position: relative;
}
.slider .content .page {
float: left;
width: 400px;
height: 300px;
background-size: cover;
}
and HTML:
<div class="slider">
<div class="content">
<div id='page1' class="page">
<!-- stuff -->
</div>
<div id='page2' class="page">
<!-- stuff -->
</div>
<div id='page3' class="page">
<!-- stuff -->
</div>
</div>
</div>
<a onclick='slide(1)' href="#">1</a>
<a onclick='slide(2)' href='#'>2</a>

Try hiding the elements that you expect not to be visible at the beginning, so that the show animation will actually execute. E.g. add this at the top:
$("#page2").hide();
$("#page3").hide();
That way running .show() on them will have an effect.

Stop on hover on a div

Alright so I am trying to get an on hover function to work where it the div that I am on will pause on hover and start up again when my mouse has left the hover area. Here is what I have so far
HTML
<div id="slideshow">
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
</div>
CSS
<style>
#slideshow {
position: relative;
width: 340px;
height: 340px;
padding: 1px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow > div:gt(0)").hide();
$("#slideshow").hover(function () {
this.stop();
}, function () {
this.start();
});
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 10500);
</script>
any help on the issue would be greatly appreciated. I have tried a few different things that haven't worked such as .hover(), .stop(), and clearInterval(). I think my execution is all wrong. Thanks in advance.

You begin learn javascript. you must read document and understand function to use api like jquery and other javascript library. please understand function and use it this.start() and this.stop() where you define it?

You can achieve your goal using clearInterval on mouseenter event.
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slideshow</title>
<style>
#slideshow {
position: relative;
width: 400px;
height: 290px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow iframe {
position: absolute;
top: 0px;
left: 0px;
height: 100%; /* fit to parent */
width: 100%;
display: none;
}
#slideshow iframe:first-child{display:block;} /*Initially display
the first iframe */
</style>
</head>
<body>
<div id="slideshow">
<iframe src="http://www.example.com"></iframe>
<!-- You cannot use www.google.com. The reason for this is,
that Google is sending an "X-Frame-Options: SAMEORIGIN" response header.
This option prevents the browser from displaying iFrames that are not hosted
on the same domain as the parent page. -->
<iframe src="http://www.example.com"></iframe>
<iframe src="http://www.example.com></iframe>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
myinterval = doAnimation(); // Start the animation
$('#slideshow').on({
mouseenter: function(e){
clearInterval(myinterval); //stop animation
},
mouseleave: function(e){ //restart animation
myinterval = doAnimation();
}
});
// Animate the slideshow.
function doAnimation(){
return setInterval(function(){
$('#slideshow :first-child')
.fadeOut()
.next('iframe')
.fadeIn()
.end()
.appendTo('#slideshow');
}, 2000);
}
</script>
</body>
</html>

jQuery image slider fade effect doesn't work

I've made a simple image slider that fades-in an image, fades it out and than another one fades-in, an infinite loop. But, this doesn't work right away. It only works after it made a full circle. Which means: all the 6 images have been seen. Then the loop starts again at image one and the fade-in effect works. Why?
This is the HTML:
<body onload="Slider();">
<div id="container">
<div id="slider">
<img id="img1" src="photos/everything/slide1.jpg" border="0"/>
<img id="img2" src="photos/everything/slide2.jpg" border="0"/>
<img id="img3" src="photos/everything/slide3.jpg" border="0"/>
<img id="img4" src="photos/everything/slide4.jpg" border="0"/>
<img id="img5" src="photos/everything/slide5.jpg" border="0"/>
<img id="img6" src="photos/everything/slide6.jpg" border="0"/>
</div>
</div>
</body>
And this is the javascript:
function Slider() {
$("#slider #img1").show("fade", 500);
$("#slider #img1").delay(5500).hide("fade", 500);
var sc=$("#slider img").size();
var count=2;
setInterval(function(){
$("#slider #img"+count).show("fade",500);
$("#slider #img"+count).delay(5500).hide("fade", 500);
if(count==sc){
count=1;
}else{
count = count + 1;
}
},6500);
}
And the CSS used for this page:
#slider{
height: 600px;
overflow: hidden;
margin: 0 auto;
padding-top: 10px;
}
#slider img{
height: 100%;
max-width: none;
display: block;
border-radius: 10px;
margin: 0 auto;
}

The fading effect is not working at first because all of your images are visible, and then you fade them out.
To avoid that, use display:none; in your css.
Then you can create a function nextSlide() that will call itself every XX milliseconds.
For example:
var sc=$("#slider img").size();
// Set count to 0 so that it goes to 1 on first call
var count=0;
// Call it for the first time
nextSlide();
function nextSlide(){
// Go forward or back to the beginning?
count=count==sc?1:++count;
// FadeIn, wait, fadeOut
$("#slider #img"+count).fadeIn(500).delay(1500).fadeOut(500);
// Do the same thing in 2500 milliseconds
setTimeout(nextSlide,2500);
}
JS Fiddle Demo

How to make a simple auto playing slide show with javascript?

I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:
HTML:
<div id="slideshow">
<div>
<img src="slide_1.png">
</div>
<div>
<img src="slide_2.png">
</div>
<div>
<img src="slide_3.png">
</div>
</div>
CSS:
#slideshow {
position: relative;
width: 900px;
height: 450px;
}
#slideshow > div {
position: absolute;
}
If possible, can someone please provide me with a JavaScript code that will automatically play the slide show, as well as change the slides by using a slide transition, and also have it replay infinite amount of times while the user is still of the page? Also, maybe a navigation that has numbers in the bottom right corner. Here is an example of what I am looking for: (http://www.http://www.suprafootwear.com/). The large slideshow up top is what I want, the only difference is that I want the transition to be a linear slide motion instead of the fade transition. Please maintain the 900px x 450px size. Any help is appreciated. Thank you in advance!

Try this simple javascript code to make image slider.
(function() {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function() {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
})();
.container {
position: relative;
width: 100%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}
<div id="imgGallary" class="container">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>

$("#slideshow > div:gt(0)").hide();
setInterval(function() { $('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow'); }, 3000);