We Keep Coding

How do I cycle a css class through banners in a slider container with javascript?

I have a basic slider setup, with three banners in it. The id is there to set the background image. Only the banner with the class "active" is shown at the frontend.
I'd like to cycle that class within the elements in the "slider" div every 8 seconds, so I can add new banners in the html and they will be implemented in the loop easily.
My initial approach only works, if two banners are active within the slider.
setInterval(changebanner, 8000);
function changebanner() {
document.getElementsByClassName("banner").classList.toggle("active");
}
<div class="slider">
<div class="banner active" id="sky"></div>
<div class="banner" id="outdoor"></div>
<div class="banner" id="photo"></div>
</div>

You need to track the current slide - see code below (comments in js)
const banners = document.getElementsByClassName("banner"); // get banners
let currentActive = 0; // set the current active slide index
setInterval(changebanner, 2000); // have changed to 2000 for demo so you don't have to wait 8 seconds
function changebanner() {
banners[currentActive].classList.remove("active"); // remove class from current active banner
currentActive++; // increment active slide
if (currentActive === banners.length) {
currentActive = 0; // reset active to 0 if last banner is active
}
banners[currentActive].classList.add("active"); // add active to next slide
}
.active {
color: red;
}
<div class="slider">
<div class="banner active" id="sky">1</div>
<div class="banner" id="outdoor">2</div>
<div class="banner" id="photo">3</div>
</div>

I think this should work as you want.
There we no need to loop over banners we just made and index variable, removed active class from whichever banner it is on and then assigned that to the next banner.
let currIndex = 0;
setInterval(changebanner, 8000);
function changebanner() {
let banners = document.getElementsByClassName("banner");
let activeBanner = document.getElementByClassName("active");
activeBanner.classList.remove('active')
if(currIndex >= banners.length){
currIndex = 0;
}
banners[currIndex].classList.add('active')
currIndex++;
}

How to run jQuery function for multiple elements individually?

I can't make my jQuery function work on individual elements. My function is a slider. When I put one slider to my html, it works fine, without problems. But whenever I try to put a second slider, it doesn't work properly. The first slider controls both of them, then the second slider takes the charge if I click right arrow too much etc.
Here is my jQuery code:
$('.right-arrow').click(function () {
var currentSlide = $('.slide.active');
var nextSlide = currentSlide.next();
currentSlide.fadeOut(300).removeClass('active');
nextSlide.fadeIn(300).addClass('active');
if (nextSlide.length == 0) {
$('.slide').first().fadeIn(300).addClass('active');
}
});
$('.left-arrow').click(function() {
var currentSlide = $('.slide.active');
var prevSlide = currentSlide.prev();
currentSlide.fadeOut(300).removeClass('active');
prevSlide.fadeIn(300).addClass('active');
if (prevSlide.length == 0) {
$('.slide').last().fadeIn(300).addClass('active');
}
});
And this is where I use it:
<style>
.slide {
display:none;
}
.slide.active {
display:block;
}
</style>
<div class="slider-container">
<div id="slider1">
<div class="slide active">#1</div>
<div class="slide">#2</div>
<div class="slide">#3</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
<div class="slider-container">
<div id="slider2">
<div class="slide active">#a</div>
<div class="slide">#b</div>
<div class="slide">#c</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
Like I said previously, when I click the first slider's right arrow, first slider's #2 and second slider's #b shows up.

You are getting this behavior because of the line
var currentSlide = $('.slide.active');
which selects all elements with the classes slide and active. try replacing that line with something like this:
var currentSlide = $(this).parent().find('.slide.active');
What this is doing is selecting the element the event was fired on $(this). Then getting the parent of that element, then finding the active slide within that element.
EDIT
Here is an example of your first if statement. Once again, you are getting the parent of the element that caused the event, then searching inside that dom element for all of the elements with a class of 'slide'.
As a side note you might want to make $(this) a variable something like var $this = $(this). Then use $this instead of $(this). It's a performance issue that you may or may not be concerned with.
if (nextSlide.length == 0) {
$(this).parent().find('.slide').first().fadeIn(300).addClass('active');
}

As other answers and comments mentioned, you are searching the .slide elements on the whole document. Instead you need to limit the search inside the related .slider-container element. For this purpose, you can use JQuery.closest(). Also, it will be nice to wait the fadeOut animation to finish using the complete callback function before showing the new .slide element. You can take next example as reference of implementation:
$('.right-arrow').click(function()
{
var container = $(this).closest(".slider-container");
var currSlide = container.find('.slide.active');
var nextSlide = currSlide.next(".slide");
if (nextSlide.length === 0)
nextSlide = container.find('.slide:first-child');
currSlide.fadeOut(300, function()
{
$(this).removeClass('active');
nextSlide.fadeIn(300).addClass('active');
});
});
$('.left-arrow').click(function()
{
var container = $(this).closest(".slider-container");
var currSlide = container.find('.slide.active');
var prevSlide = currSlide.prev(".slide");
if (prevSlide.length === 0)
prevSlide = container.find('.slide:last-child');
currSlide.fadeOut(300, function()
{
$(this).removeClass('active');
prevSlide.fadeIn(300).addClass('active');
});
});
.slide {
display:none;
}
.slide.active {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-container">
<div id="slider1">
<div class="slide active">#1</div>
<div class="slide">#2</div>
<div class="slide">#3</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
<div class="slider-container">
<div id="slider2">
<div class="slide active">#a</div>
<div class="slide">#b</div>
<div class="slide">#c</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>

Stop jQuery Fade Loop and add Hover Not Working

I am trying to implement a fade in- fade out loop in jQuery
You can see it here
But this does not work the way I want it to. This code just stops the Fade loop when I hover over the point1.
I want the code to work in such a way that when you hover over one of the points (point1, point2 etc.), the fade loop will stop/pause, and only the specified .trip will show, then on hover out/mouseout, the fade loop will start over from the top.
For example:
If I hover over <div class="point2">Hover Point 2</div>, the loop should stop, and only <div id="2" class="trip two">Item2</div> should be shown. Or if I hover over <div class="point1">Hover Point 1</div> during the loop, the loop should stop and <div id="2" class="trip one">Item1</div>, should be shown, and once on mouseout, the loop should start from the top.
Tried a bunch of stuff, help please.
How do I fix this?

You are correctly stopping the animation, but then you need to display the proper element and hide all others. Also, you want to re-start the loop by calling go when you mouseout.
$('.point1').hover(function(){
$('.trip').stop(true).hide();
$("#1").show();
},function(){
i = 0;
go();
});
http://jsfiddle.net/MtmxN/68/

Here's my take on it:
HTML:
<div id="main">
<div id="1" class="trip 1">Item1</div>
<div id="2" class="trip">Item2</div>
<div id="3" class="trip">Item3</div>
</div>
<hr>
<br/>
<div class="point" id="show1">Hover Point 1</div>
<br/>
<div class="point" id="show2">Hover Point 2</div>
<br/>
<div class="point" id="show3">Hover Point 3</div>
JS
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go();
var tripToShow = 0;
$('.point').hover(function(){
tripToShow = this.id.replace('show', '');
$('.trip').stop(true).hide();
$('#'+tripToShow).show();
},function(){
$('.trip').hide();
i = 1;
tripToShow = 0;
go();
});
fiddle: http://jsfiddle.net/stevoperisic/GKZ2F/

How to make round visibility of array of divs

I have inside 3 divs inside one one aside another and every of those 3 divs shows one image.
How to make that at the time only one is visible and after 5 seconds visible fade out and next fade in and same in round indefinite time.
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>

You can Do Some thing like This
var i = 0;
window.setInterval(function() {
$("#container").find("div").each(function() {
$(this).hide();
});
$("#container").find("div:eq(" + i + ")").slideDown(500);
i++;
if (i==2) {
i = 0;
}
}, 5000);

Select next element carousel

I have a list of DIVs, and I want every X second using setTimeout to take the next div and set the display to block, and for the other ones to none, how can I do that? Can someone please give me an example?
How can I make it to be infinite, when reaches the last one to start from the first one again.
I know this is a kind of carousel, but I want too see how it's done.

There are many ways to do this, but here's one way: http://jsfiddle.net/jfriend00/Yr3NV/
HTML:
<div id="container">
<div class="item active">1111</div>
<div class="item">2222</div>
<div class="item">3333</div>
<div class="item">4444</div>
<div class="item">5555</div>
<div class="item">6666</div>
<div class="item">7777</div>
</div>
Code:
setInterval(function() {
var next = $("#container .active").removeClass("active").next();
if (next.length == 0) {
next = $("#container .item:first");
}
next.addClass("active");
}, 1000);
CSS:
.item {display: none;}
.item.active {display: block;}
Using the method of adding/removing a class gives you a little more style control via CSS rather than coding the style into your javascript and avoids the use of any global or closure variables to keep the state.

var divs = $('#container').find('div'),
index = 0;
setInterval(function() {
if (!divs[index]) index = 0;
divs.hide();
divs[index++].style.display = 'block';
}, 1000); // fires every 1 second
All the usual disclaimers about global scope being a bad idea, but this should give you what you want.

$("#list div").hide();
var current = $("#list div").first().show();
setInterval(function() {
current.hide();
current = current.next().length > 0 ? current.next() : $("#list div").first();
current.show();
},2000);
<div id="list">
<div>1</div>
<div>22</div>
<div>333</div>
<div>4444</div>
</div>
Can be seen working here:
http://jsfiddle.net/KenwV/

Here's an implementation with setTimeout: http://jsfiddle.net/imsky/EBpTw/
Given a UL with id of "list" and LIs inside:
$(function() {
$("#list li:gt(0)").hide();
function showNextBlock() {
var currentBlock = $("#list li:visible");
if (currentBlock.index() == $("#list li").length - 1) {
currentBlock.hide().parent().find("li:first").show()
}
else {
currentBlock.hide().next("li").show();
}
setTimeout(showNextBlock,1000);
}
setTimeout(showNextBlock,1000);
});

DIV LOOP DEMO
var i=0, len=$('#parent div').length;
(function loop(){
$('#parent div').eq(i++%len).fadeTo(700,1).siblings().fadeTo(700,0,loop);
})();
HTML example:
<div id="parent">
<div class="children ch1">I'm DIV 1</div>
<div class="children ch2">I'm DIV 2</div>
<div class="children ch3">I'm DIV 3</div>
<div class="children ch4">I'm DIV 4</div>
</div>
CSS basic setup:
.children{
position:absolute;
}
And here is one with a mouseover pause :
DEMO with mouseover pause

function cycleDivs(base)
{
var next = ($(base).next('div').css('display') == 'none')? $(base).next('div') : $('div:first');
$(base).hide();
$(next).show();
window.setTimeout(function(){cycleDivs(next);}, 1000)
}
window.setTimeout(function(){cycleDivs($('div:first'));}, 1000);
Here's a working example: http://jsfiddle.net/8hfBd/