Develop Reference

How to automatically advance items on a click?

I'm looking for a way to advance a list automatically on a click. For example, if there's five items in a list how do I automatically advance those items until the end? Right now, it advances when the end button is clicked, I'm looking for a way to click a button once and then advance automatically until the end.
My code so far:
var n = $(".slider-slide-wrap").length,
width = 500,
newwidth = width * n;
var n = $(".slider-slide-wrap2").length,
width = 500,
newwidth = width * n;
$('.slide-wrap').css({
'width': newwidth
});
$('.slide-wrap2').css({
'width': newwidth
});
$(".slider-slide-wrap").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$(".slider-slide-wrap2").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$('.slider-wrap2').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap2").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
});
});
$('#end').click(function() {
event.preventDefault();
var $next = $('.slide-wrap .shown').next();
var $next2 = $('.slide-wrap2 .shown').next();
var curr = $('.rundown-items .current').parent(); //find .current's parent
var $children = $('.rundown-items').children();
var firstcal = $children.length;
var actual = firstcal - 9;
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
setTimeout(function(){
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 0);
}
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
}
if (curr.next().length > 0) {
$('.rundown-items').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
};
}, 150);
});
.slider-wrap2{position:relative;width:500px;height:60px;overflow-y:hidden;overflow-x:hidden;padding-top:5px;text-align:center;z-index:99999999999}
.slide-wrap2{position:relative;height:60px;top:0;left:0}
.slider-slide-wrap,.slider-slide-wrap2{position:absolute;width:500px;height:100%}
.shown .single {width:1024px;height:576px;overflow-y: scroll;overflow-x:hidden;padding:0 17px 0 0;box-sizing: content-box;margin:0}*/
.shown .single li{overflow-y: scroll;overflow-x:hidden;padding-right: 17px;box-sizing: content-box;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="end">End</button>
<div class="slider-wrap2">
<div class="slide-wrap2">
<div class="slider-slide-wrap2 shown"></div>
<div class="slider-slide-wrap2">item 1</div>
<div class="slider-slide-wrap2">item 2</div>
<div class="slider-slide-wrap2">item 3</div>
<div class="slider-slide-wrap2">item 4</div>
<div class="slider-slide-wrap2">item 5</div>
</div>
</div>

You can trigger the click event by checking the index of the current element:
.......
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
if($next2.index() <= 5) // check the index
$('#end').trigger('click'); // trigger the event
}
.......
Also, do not forget to pass the event in the callback function:
$('#end').click(function(event) {
var n = $(".slider-slide-wrap").length,
width = 500,
newwidth = width * n;
var n = $(".slider-slide-wrap2").length,
width = 500,
newwidth = width * n;
$('.slide-wrap').css({
'width': newwidth
});
$('.slide-wrap2').css({
'width': newwidth
});
$(".slider-slide-wrap").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$(".slider-slide-wrap2").each(function (i) {
var thiswid = 500;
$(this).css({
'left': thiswid * i
});
});
$('.slider-wrap2').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap2").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
});
});
$('#end').click(function(event) {
event.preventDefault();
var $next = $('.slide-wrap .shown').next();
var $next2 = $('.slide-wrap2 .shown').next();
var curr = $('.rundown-items .current').parent(); //find .current's parent
var $children = $('.rundown-items').children();
var firstcal = $children.length;
var actual = firstcal - 9;
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
setTimeout(function(){
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 0);
}
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
if($next2.index() <= 5)
$('#end').trigger('click');
}
if (curr.next().length > 0) {
$('.rundown-items').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
};
}, 150);
});
.slider-wrap2{position:relative;width:500px;height:60px;overflow-y:hidden;overflow-x:hidden;padding-top:5px;text-align:center;z-index:99999999999}
.slide-wrap2{position:relative;height:60px;top:0;left:0}
.slider-slide-wrap,.slider-slide-wrap2{position:absolute;width:500px;height:100%}
.shown .single {width:1024px;height:576px;overflow-y: scroll;overflow-x:hidden;padding:0 17px 0 0;box-sizing: content-box;margin:0}*/
.shown .single li{overflow-y: scroll;overflow-x:hidden;padding-right: 17px;box-sizing: content-box;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="end">End</button>
<div class="slider-wrap2">
<div class="slide-wrap2">
<div class="slider-slide-wrap2 shown"></div>
<div class="slider-slide-wrap2">item 1</div>
<div class="slider-slide-wrap2">item 2</div>
<div class="slider-slide-wrap2">item 3</div>
<div class="slider-slide-wrap2">item 4</div>
<div class="slider-slide-wrap2">item 5</div>
</div>
</div>

Javascript Slideshow Buttons Only Showing 1 Slide

I am working on a slideshow for the homepage of my website. It works, automatically shifting throughout 1-3, but the onclick functions are having some troubles. Every single one of the buttons bring me to my first slide, not the second or the third, just the first. Any help is appreciated, please and thanks!
document.getElementById("left").style.opacity =1;
var currentSlide = 2;
var myVar = setInterval(changeSlide, 5000);
function changeSlide() {
if (currentSlide == 1) {
currentSlide++;
document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide1.png';
document.getElementById("left").style.opacity =1;
document.getElementById("right").style.opacity =.5;
} else if (currentSlide == 2) {
currentSlide++;
document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide2.png';
document.getElementById("middle").style.opacity =1;
document.getElementById("left").style.opacity =.5;
} else {
--currentSlide;
--currentSlide;
document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide3.png';
document.getElementById("right").style.opacity =1;
document.getElementById("middle").style.opacity =.5;
}
}
function firstSlide() {
currentSlide = 1;
myVar = setInterval(changeSlide, 5000);
}
function secondSlide() {
currentSlide = 2;
myVar = setInterval(changeSlide, 5000);
}
function thirdSlide() {
currentSlide = 3;
myVar = setInterval(changeSlide, 5000);
}
<div id="slideshow">
<div id="slide1">
<img src="/img/slide1.png" alt="" style="width:100%;height:100%;position:absolute;" id="slide1IMG">
</div>
<div id="selectors">
<a href="" onclick="firstSlide()">
<div id="left">
</div>
</a>
<a href="" onclick="secondSlide()">
<div id="middle">
</div>
</a>
<a href="" onclick="thirdSlide()">
<div id="right">
</div>
</a>
</div>
</div>

You are using links <a> tags, to handle your clicks, the page is reloading every time you click on one of them, on page reload, it will display the first slide. That is the expected behavior of href="".
The easiest solution is to change your <a> tags for <button> tags, though you could also catch the event and use event.preventDefault() to stop the page from reloading.
<button onclick="firstSlide()">
...
</button>
<button onclick="secondSlide()">
...
</button>
<button onclick="thirdSlide()">
...
</button>
Once you stop navigating away from the page, your code will be setting a new interval every time you handle the click, to avoid that, you could use a setTimeout() at the end of changeSlide(), instead of an interval, or clear the interval on your click handlers
function firstSlide() {
// Change the current slide
currentSlide = 1;
changeSlide();
// Reset the interval
clearInterval(myVar);
myVar = setInterval(changeSlide, 5000);
}
I would probaly rename myVar to something that makes it clear that it is the interval, like refreshSlideInterval.
You could also change the conditionals inside changeSlide to use strict comparisons
if (currentSlide == 1) {...}
to
if (currentSlide === 1) {...}
Since you know that you are working with integers.
Example snippet
const content = document.getElementById("content");
let currentSlide = 2;
let slideCountDown = setTimeout(changeSlide, 3000);
function changeSlide() {
// Clear the timeout
clearTimeout(slideCountDown);
if (currentSlide === 1) {
currentSlide = 2;
content.innerText = 1;
} else if (currentSlide === 2) {
currentSlide = 3;
content.innerText = 2;
} else {
currentSlide = 1;
content.innerText = 3;
}
// Reset the timeout
slideCountDown = setTimeout(changeSlide, 3000);
}
function firstSlide() {
currentSlide = 1;
changeSlide();
}
function secondSlide() {
currentSlide = 2;
changeSlide();
}
function thirdSlide() {
currentSlide = 3;
changeSlide();
}
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#content {
font-size: 5rem;
padding: 2rem;
}
#buttons {
display: flex;
flex-direction: row;
}
<div id="container">
<div id="content">1</div>
<div id="buttons">
<button onclick="firstSlide()">
First
</button>
<button onclick="secondSlide()">
Second
</button>
<button onclick="thirdSlide()">
Third
</button>
</div>
</div>

The setInterval at each select function are not necessary.
According to the changeSlide function, change the currentSlide as follow.
function firstSlide() {
currentSlide = 3;
}
function secondSlide() {
currentSlide = 1;
}
function thirdSlide() {
currentSlide = 2;
}

check this (run the snippet below ) i fixed some syntax errors :
document.getElementById("left").style.opacity =1;
var currentSlide = 1;
var myVar = setInterval(function(){
return changeSlide()
}
,1000);
function changeSlide() {
if (currentSlide == 1) {
currentSlide++;
document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg';
document.getElementById("left").style.opacity =1;
document.getElementById("right").style.opacity =.5;
} else if (currentSlide == 2) {
currentSlide++;
document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg';
document.getElementById("middle").style.opacity =1;
document.getElementById("left").style.opacity =.5;
} else if(currentSlide==3){
currentSlide = 1;
document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg/1024px-Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg';
document.getElementById("right").style.opacity =1;
document.getElementById("middle").style.opacity =.5;
}
}
function firstSlide() {
currentSlide = 1;
clearInterval(myVar)
myVar = setInterval(changeSlide(), 1000);
}
function secondSlide() {
currentSlide = 2;
clearInterval(myVar)
myVar = setInterval(changeSlide(), 1000);
}
function thirdSlide() {
currentSlide = 3;
clearInterval(myVar)
myVar = setInterval(changeSlide(), 1000);
}
<div id="slideshow">
<div id="slide1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg" alt="" style="width:100%;height:100%;position:absolute;" id="slide1IMG">
</div>
<div id="selectors">
<a href="" onclick="firstSlide()">
<div id="left">
</div>
</a>
<a href="" onclick="secondSlide()">
<div id="middle">
</div>
</a>
<a href="" onclick="thirdSlide()">
<div id="right">
</div>
</a>
</div>
</div>

jquery fadeIn fadeOut effect not working

I'm trying to learn jquery and I want to create fadein and fadeout effect which loops through image. I have used setInterval function to loop through images but it works only for first iteration.
$(document).ready(function() {
var newcount = 0;
var image = $(".image-store img");
image.hide();
var image_array = [];
image.each(function() {
image_array.push($(this).attr('src'));
});
var showimg = $(".image-disp img");
showimg.attr("src", image_array[newcount]);
setInterval(function() {
showimg.fadeOut(2000, function() {
newcount = newcount + 1;
showimg.attr("src", image_array[newcount]);
showimg.fadeIn(2000);
});
if (newcount == image_array.length) {
newcount = -1;
}
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-store">
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
</div>
<div class="image-disp">
<img src="">
</div>

It works, but you're missing }); at the end of the code. Use the browser console to know if there is any error.

$(document).ready(function() {
var newcount = 0;
var image = $(".image-store img");
image.hide();
var image_array = [];
image.each(function() {
image_array.push($(this).attr('src'));
});
var showimg = $(".image-disp img");
showimg.attr("src", image_array[newcount]);
setInterval(function() {
showimg.fadeOut(2000, function() {
newcount = newcount + 1;
showimg.attr("src", image_array[newcount]);
showimg.fadeIn(2000);
});
if (newcount == image_array.length) {
newcount = -1;
}
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-store">
<img width="50" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<img width="50" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="image-disp">
<img width="200" src="">
</div>

How to add prev and next button in a JQuery slideshow code

I have jQuery code for a slideshow below. It works perfectly in the project I am working on right now. Although, I would like to implement a previous and next button in the same code if it's possible. Any help would be really appreciated.
<script type="text/javascript">
function() {
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction:"right"},500);
$(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500);
if(count == sc){
count = 1;
}
else
{
count=count+1;
}
},6500);
}
</script>
<div class="slider">
<img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" />
<img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" />
<img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" />
</div>
<style>
.slider {
width: 800px;
height: 349px;
overflow:hidden;
margin: 30px auto;
background-image: url(images/slider/load.GIF);
background-repeat: no-repeat;
background-position: center;
}
.slider img {
width: 800px;
height: 349px;
display: none;
}
</stile>

You can do the following:
var sc;
var count = 1;
$(document).ready(function() {
sc = $(".slider img").size();
$(".slider #1").show("fade",500);
setInterval(function(){
switchPanel(1);
},5500);
$("#prev").click(function(){switchPanel(-1)});
$("#next").click(function(){switchPanel(1)});
});
function switchPanel(direction)
{
var hide, show;
if (direction == 1)
{
show = "right";
hide = "left";
}
else if (direction == -1)
{
show = "left";
hide = "right";
}
$(".slider #"+count).hide("slide",{direction:hide},500);
count = count + direction;
if(count == sc + 1) count = 1;
else if(count == 0) count = sc;
$(".slider #"+count).show("slide",{direction:show},500);
}
What's left for you is to add the previous (#prev) and next (#next) buttons.

This should be works.
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
var hideImage;
var slideshow;
var slideImage = function(isNext) {
var showDirection;
if (isNext){
showDirection = "right";
} else {
showDirection = "left";
}
$(".slider #"+count).show("slide",{direction:showDirection},500);
hideImage = setTimeout(function(){
$(".slider #"+count).hide("slide",{direction:"left"},500);
count = (count+1) > sc ? 1 : count+1;
}, 5500);
}
// Start the slideshow
slideshow = setInterval(function(){
slideImage(true);
},6500);
var manualSlide = function(isNext) {
// Stop the slideshow
clearTimeout(hideImage);
clearInterval(slideshow);
// Force hide current image
var hideDirection = isNext ? "left" : "right";
$(".slider #"+count).hide("slide",{direction:hideDirection},500);
if(isNext) {
count = (count+1) > sc ? 1 : count+1;
} else {
count = (count-1) == 0 ? sc : count-1;
}
setTimeout(function(){
slideImage(isNext);
// Start the slideshow again
slideshow = setInterval(function(){
slideImage(true);
},6500);
}, 1000);
}
$("#prev").on("click", function() { manualSlide(false); });
$("#next").on("click", function() { manualSlide(true); });
This is the result: FIDDLE
Note: I have to change delay into setTimeout because we can't cancel delay.

Multiple sliders sliding at the same time when only the active one should be sliding

I have multiple sliders, each in its own section->article. My problem is this: When I hit the next or previous button on one of the sliders all sliders start sliding at the same time.
html:
<section id="section01">
<article class="article01">
<div class="wrapper">
<ul class="slider">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
<img class="previous" src="images/arrow-transparent.png">
<img class="next" src="images/arrow-transparent.png">
</article>
</section>
css
.wrapper{
height: 342px;
margin: 0 auto;
overflow: hidden;
width: 918px;
}
.slider{
height: 342px;
position: relative;
width: 5000px;
}
.slide{
float: left;
height: 342px;
position: relative;
width: 306px;
}
js
/* slider */
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});
$('.next').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li'),
current = i;
i = ++i + 2 % currentSlides.length;
if(i + 3 < currentSlides.length) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = current;
}
});
});
How do I fix this?

This is because you are selecting all slider class elements so this will animate them all.
What if you select slide instead?
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slide').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});

I decided to completely ditch the javascript code from my original post and ended up using this instead:
$(function() {
$('article .wrapper').each(function(){
var slider = $(this).find('.slider'),
parent = $(this),
step =855,
left = parseInt(slider.css('left'), 10),
max = parent.width() - slider.width(),
min = 0;
parent.find(".previous").click(function() {
if (left < 0) {
var newLeft = left + step;
left = (newLeft<min) ? newLeft : min;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
parent.find(".next").click(function() {
if (left > max) {
var newLeft = left - step;
left = (newLeft>max) ? newLeft : max;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
});
});
I also slightly modified widths of several elements in css and now it all works like a charm.