How To add automatic scrolling in slider

How To add automatic scrolling in slider - javascript

I want to add automatic scrolling time to my slider code but unable to do it can you please suggest me something to help me out with the code to make this slider slide automatic with a set interval of time.
'use strict';
$(document).ready(function () {
var $slides = $('.con__slide').length,
topAnimSpd = 650,
textAnimSpd = 1000,
nextSlideSpd = topAnimSpd + textAnimSpd,
animating = true,
animTime = 4000,
curSlide = 1,
nextSlide,
scrolledUp;
setTimeout(function () {
animating = false;
}, 2300);
//navigation up function
function navigateUp() {
if (curSlide > 1) {
scrolledUp = true;
pagination(curSlide);
curSlide--;
}
}
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}
}
$(window).on('load', function () {
$('.con__slide--1').addClass('active');
});
//pagination function
function pagination(slide, target) {
animating = true;
// Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
if (target === undefined) {
nextSlide = scrolledUp ? slide - 1 : slide + 1;
} else {
nextSlide = target;
}
////////// Slides //////////
$('.con__slide--' + slide).removeClass('active');
setTimeout(function () {
$('.con__slide--' + nextSlide).addClass('active');
}, nextSlideSpd);
////////// Nav //////////
$('.con__nav-item--' + slide).removeClass('nav-active');
$('.con__nav-item--' + nextSlide).addClass('nav-active');
setTimeout(function () {
animating = false;
}, animTime);
}
// Mouse wheel trigger
$(document).on('mousewheel DOMMouseScroll', function (e) {
var delta = e.originalEvent.wheelDelta;
if (animating) return;
// Mouse Up
if (delta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
// Direct trigger
$(document).on("click", ".con__nav-item:not(.nav-active)", function () {
// Essential to convert target to a number with +, so curSlide would be a number
var target = +$(this).attr('data-target');
if (animating) return;
pagination(curSlide, target);
curSlide = target;
});
// Arrow trigger
$(document).on('click', '.con__nav-scroll', function () {
var target = $(this).attr('data-target');
if (animating) return;
if (target === 'up') {
navigateUp();
} else {
navigateDown();
}
});
// Key trigger
$(document).on("keydown", function (e) {
if (animating) return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
var topLink = $(".con__slide--4-top-h-link"),
botLink = $(".con__slide--4-bot-h-link");
$(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
mouseenter: function mouseenter() {
topLink.css('text-decoration', 'underline');
botLink.css('text-decoration', 'underline');
},
mouseleave: function mouseleave() {
topLink.css('text-decoration', 'none');
botLink.css('text-decoration', 'none');
}
});
});
Hope you understand the above code if you have any query in it feel free to ask me and please help me out as soon as possible.

Added setInterval in your code.
setInterval(() => {
if (curSlide >= $slides){
if (animating) return;
pagination(4, 1);
curSlide = 1;
}
else
navigateDown();
}, 10000);
Check updated fiddle.

update below navigateDown code.
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}else{
curSlide=1;
pagination(4,1)
}
}
Add this below line
setInterval(navigateDown,7000);

Related

Change JS scrolling event to time interval

I have an image gallery I'm using for a webpage. Currently, the gallery images change when the user scrolls, but I'd like to change it so that the images change on a time interval, and are on a loop instead of an up scroll to go back and a down scroll to go forward. I'm pretty new to Javascript, so I'm now sure how to change the below script from scrolling to timed.
<script>
$(document).ready(function() {
var curPage = 1;
var numOfPages = $(".skw-page").length;
var animTime = 1000;
var scrolling = false;
var pgPrefix = ".skw-page-";
function pagination() {
scrolling = true;
$(pgPrefix + curPage).removeClass("inactive").addClass("active");
$(pgPrefix + (curPage - 1)).addClass("inactive");
$(pgPrefix + (curPage + 1)).removeClass("active");
setTimeout(function() {
scrolling = false;
}, animTime);
};
function navigateUp() {
if (curPage === 1) return;
curPage--;
pagination();
};
function navigateDown() {
if (curPage === numOfPages) return;
curPage++;
pagination();
};
$(document).on("mousewheel DOMMouseScroll", function(e) {
if (scrolling) return;
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
$(document).on("keydown", function(e) {
if (scrolling) return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
});
</script>

Just call setInterval, change what happens when navigateDown is called once all pages have been cycled through, and remove the scroll/keydown listeners.
$(document).ready(function() {
var curPage = 1;
var numOfPages = $(".skw-page").length;
var animTime = 1000;
var scrolling = false;
var pgPrefix = ".skw-page-";
function pagination() {
scrolling = true;
$(pgPrefix + curPage)
.removeClass("inactive")
.addClass("active");
$(pgPrefix + (curPage - 1)).addClass("inactive");
$(pgPrefix + (curPage + 1)).removeClass("active");
if (curPage === 1) $(pgPrefix + numOfPages).addClass("inactive");
setTimeout(function() {
scrolling = false;
}, animTime);
}
function navigateDown() {
if (curPage === numOfPages) curPage = 0;
curPage++;
console.log(curPage);
pagination();
}
setInterval(navigateDown, 5000); // 5000 ms == 5 s
});
.active {
color: purple;
}
.inactive {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p class="skw-page skw-page-1 active">Page 1</p>
<p class="skw-page skw-page-2 inactive">Page 2</p>
<p class="skw-page skw-page-3 inactive">Page 3</p>
<p class="skw-page skw-page-4 inactive">Page 4</p>
</div>

You can use setInterval, also inside setInterval you should not call both the navigateUp and navigateDown functions, since this will nullify their pagination changes as defined in your code.
Also, since in your original code, the trigger to fire either of navigateDown and nvaigateUp functions depends on event passed from keydown and DOMmouseScroll, you will need to tweak my example code to fit your html. I can not give a complete example since your html part is missing here.
$(document).ready(function() {
var curPage = 1;
var numOfPages = $(".skw-page").length;
var animTime = 1000;
var scrolling = false;
var pgPrefix = ".skw-page-";
function pagination() {
scrolling = true;
$(pgPrefix + curPage).removeClass("inactive").addClass("active");
$(pgPrefix + (curPage - 1)).addClass("inactive");
$(pgPrefix + (curPage + 1)).removeClass("active");
setTimeout(function() {
scrolling = false;
}, animTime);
}
function navigateUp() {
if (curPage === 1) return;
curPage--;
pagination();
}
function navigateDown() {
if (curPage === numOfPages) return;
curPage++;
pagination();
}
setInterval(function() {
navigateUp();
/*
or call
navigateDown();
*/
}, animTime);
});

Triger Next Prev function button when clicking the left right key

good day everyone... badly needed help
how can I trigger the next prev function if I press the left and right arrow keys. this is for the slider/lightbox that I was assign into.
this is the code
$(document).ready(function() {
var currentIndex = 0,
navItems = $(".navindex");
function setSlide(index) {...}
$(".navindex").click(function() {
var index = $(".navindex").index($(this));
currentIndex = index;
setSlide(currentIndex);
});
function next() {
if (currentIndex < navItems.length - 1) {
currentIndex++;
setSlide(currentIndex);
}
}
$(".next").click(function() {
next();
});
function prev() {
if (currentIndex > 0) {
currentIndex--;
setSlide(currentIndex);
}
}
$(".prev").click(function() {
prev();
});
function slide() {
if (currentIndex < navItems.length - 1) {
currentIndex++;
setSlide(currentIndex);
} else {
currentIndex = 0;
setSlide(currentIndex);
}
}
});

You want to handle key events. Something along the lines of:
$(document).keyup((evt) => {
if (evt.key === 'ArrowLeft')
return prev();
if (evt.key === 'ArrowRight')
return next();
});

trying to make a timer stop when the user reaches the bottom of the page using jQuery

I have a timer that starts counting up when the page is loaded. I want it to stop when the user scrolls to the bottom of the page. Here is the jQuery I've written:
function timerTick(time, stop)
{
if(stop == false)
{
setInterval(function ()
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
}
});
});
The timer counts up perfectly, the problem is I can't get it to stop. If I replace the stop = true; line with alert('abc');, the alert shows up when the user reaches the bottom. So all of the pieces are working, just for some reason setting stop to true doesn't stop the timerTick function from going into the if(stop == false) block.
Can someone tell me what I'm doing wrong?
Edit: I made a jsFiddle.

You have to clear interval as soos as user reach the end of page. Otherwise it will continue executing.
Try:
var intervalId;
function timerTick(time, stop)
{
if(stop == false)
{
intervalId=setInterval(function () //Set the interval in a var
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
clearInterval(intervalId);//HERE clear the interval
}
});
});
DEMO

to determine bottom of the page you could try this
if(window.innerHeight + document.body.scrollTop >= document.body.offsetHeight) {
stop = true;
}
Update:
you need to make your variable stop global, declare it outside of documnet.ready function.

setInterval function returns number that you can later pass into clearInterval to stop the timer.

Declare
var Timeout=0;
check
if(stop == false)
inside the setInterval function
like
Timeout=setInterval(function ()
{
if(stop == false)
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}
else
{
clearInterval(Timeout);
}
}, 100);

Autoplay function Infiniteslider JS

Stuck with a fiddly (for me) bit of JS for my infinite slider. I'm trying to use the set interval function to auto click through the slides however I haven't been able to identify the correct function in the JS.
I know I need to replace the alert with said function but don't know what that would be to click through slides.Any idea?
window.setInterval(yourfunction, 10000);
function yourfunction() { alert('test'); }
Slider JS:
function InfiniteSlider(wrapper,speed,duration,mode,easing,hover,animation){
var _infiniteSlider = this;
// If true : running
this.animated = false;
// Autorotation
this.hover = hover;
this.autorotation = animation;
this.running = true;
this.t;
// Setting the container and controller
this.wrapper = $(wrapper);
this.container = $('.slider',this.wrapper);
this.arrows = $('.slider-arrows',this.wrapper);
this.count = $('.count',this.arrows);
this.controls = $('.slider-controls',this.wrapper);
this.infos = $('.slider-infos',this.wrapper);
this.speed = speed;
this.duration = duration;
this.mode = mode; // slide - slidev - fade - demask
this.easing = easing;
this.width = this.container.width();
this.height = this.container.height();
// Setting index : slide ordered index || indexSlide : slide real index
this.index = 0;
this.indexSlide = 0;
// Number of elements
this.length = $('li', this.container).length - 1;
/* Initialize
//////////////////////////////////////////////////////////////////////// */
// Bind
if(this.hover){
$(this.wrapper).live('mouseenter', function(){
_infiniteSlider.stop(_infiniteSlider);
});
$(this.wrapper).live('mouseleave', function(){
_infiniteSlider.start(_infiniteSlider);
});
}
$('.next a',this.arrows).live('click', function(){
_infiniteSlider.next(_infiniteSlider);
return false;
});
$('.previous a',this.arrows).live('click', function(){
_infiniteSlider.previous(_infiniteSlider);
return false;
});
$('li a',this.controls).live('click', function(){
_infiniteSlider.controlsClick($(this),_infiniteSlider);
return false;
});
$(window).resize(function(){
_infiniteSlider.reset(_infiniteSlider);
});
// Identify each slide and control with initial order
$('li', this.container).each(function(){
$(this).attr('data-slide',$(this).index() + 1);
if($(this).index() == 0){
$(this).addClass('active');
$(_infiniteSlider.controls).append('<li data-slide="'+($(this).index() + 1)+'" class="active"><span>'+$(this).index()+'</span></li>');
} else {
$(this).addClass('inactive');
$(_infiniteSlider.controls).append('<li data-slide="'+($(this).index() + 1)+'" class="inactive"><span>'+$(this).index()+'</span></li>');
}
});
// Fill Count values
$(this.count).html((this.index + 1)+' / '+(this.length + 1));
// Fill First Infos
if($('li:eq(0)', this.container).attr('data-infos') != '') $(this.infos).html($('li:eq(0)', this.container).attr('data-infos'));
// Disable if just one slide
if(this.length == 0){
$(this.controls).hide();
this.autorotation = false;
}
// Initiate Positioning
this.reset(_infiniteSlider);
// Start Autorotation
if(this.running) this.autoRotation(_infiniteSlider);
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Autorotation
//
/////////////////////////////////////////////////////////////////////////// */
InfiniteSlider.prototype.autoRotation = function(_infiniteSlider){
clearTimeout(_infiniteSlider.t);
if($('li', _infiniteSlider.controls).length > 1 && _infiniteSlider.autorotation){
if(_infiniteSlider.running){
_infiniteSlider.t = setTimeout(function(){
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,_infiniteSlider.indexSlide + 1,_infiniteSlider)
},_infiniteSlider.duration);
}
}
}
/* ////////////////////////////////////////////////////////////////////////////
//
// External Functions
//
/////////////////////////////////////////////////////////////////////////// */
InfiniteSlider.prototype.start = function(_infiniteSlider){
_infiniteSlider.running = true;
_infiniteSlider.autoRotation(_infiniteSlider);
return false;
}
InfiniteSlider.prototype.stop = function(_infiniteSlider){
clearTimeout(_infiniteSlider.t);
_infiniteSlider.running = false;
return false;
}
InfiniteSlider.prototype.next = function(_infiniteSlider){
if(!_infiniteSlider.animated){
_infiniteSlider.autorotation = false;
clearTimeout(_infiniteSlider.t);
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,_infiniteSlider.indexSlide + 1,_infiniteSlider);
}
return false;
}
InfiniteSlider.prototype.previous = function(_infiniteSlider){
if(!_infiniteSlider.animated){
_infiniteSlider.autorotation = false;
clearTimeout(_infiniteSlider.t);
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,_infiniteSlider.indexSlide - 1,_infiniteSlider);
}
return false;
}
InfiniteSlider.prototype.controlsClick = function(object,_infiniteSlider){
if(!_infiniteSlider.animated){
_infiniteSlider.autorotation = false;
// Stop timer
clearTimeout(_infiniteSlider.t);
var clicked = $(object).parent().index();
$('li',_infiniteSlider.container).each(function(){
if($(this).attr('data-slide') == clicked + 1){
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,$(this).index(),_infiniteSlider);
}
});
}
return false;
}
InfiniteSlider.prototype.reset = function(_infiniteSlider){
_infiniteSlider.wrapper.height($(window).height());
$('.centered-v', _infiniteSlider.wrapper).css('top', ($('.slider-alt-nav', _infiniteSlider.wrapper).height()/2 - $('.centered-v', _infiniteSlider.wrapper).height()/2)+'px');
_infiniteSlider.stop(_infiniteSlider);
_infiniteSlider.width = _infiniteSlider.container.width();
_infiniteSlider.height = _infiniteSlider.container.height();
$('li',_infiniteSlider.container).width(_infiniteSlider.width);
if(_infiniteSlider.mode == 'demask'){
$('li.inactive',_infiniteSlider.container).width(0);
$('li img',_infiniteSlider.container).width(_infiniteSlider.width);
}
// Adjust Arrows
$(_infiniteSlider.arrows).css('top', ($(_infiniteSlider.container).height()/2 - $('a',_infiniteSlider.arrows).height()/2)+'px');
// Adjust Images Size
$('li img',_infiniteSlider.container).each(function(){
// Ratios
var imageRatio = 1600/935;
var wrapperRatio = _infiniteSlider.width/_infiniteSlider.height;
// Resize
if(imageRatio > wrapperRatio){
$(this)
.height(_infiniteSlider.height)
.width(_infiniteSlider.height * imageRatio)
.css('margin-left',-($(this).width()/2 - _infiniteSlider.width/2)+'px')
.css('margin-top','0');
} else {
$(this)
.width(_infiniteSlider.width)
.height(_infiniteSlider.width / imageRatio)
.css('margin-left','0')
.css('margin-top',-($(this).height()/2 - _infiniteSlider.height/2)+'px');
}
});
_infiniteSlider.start(_infiniteSlider);
return false;
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Change slide
//
/////////////////////////////////////////////////////////////////////////// */
InfiniteSlider.prototype.changeSlide = function(current,clicked,_infiniteSlider){
_infiniteSlider.animated = true;
var direction = 'next';
if(clicked < current) direction = 'previous';
// Check limits
if(clicked > _infiniteSlider.length){
clicked = 0;
} else if(clicked < 0){
clicked = _infiniteSlider.length;
}
// Redefine active slide
$('> ul > li',_infiniteSlider.container).removeClass('active').addClass('inactive');
$('> ul > li',_infiniteSlider.container).eq(clicked).removeClass('inactive').addClass('active');
_infiniteSlider.index = parseInt($('.active',_infiniteSlider.container).attr('data-slide')) - 1;
_infiniteSlider.indexSlide = $('.active',_infiniteSlider.container).index();
// Redefine active control
$('li',_infiniteSlider.controls).removeClass('active');
$('li',_infiniteSlider.controls).eq(_infiniteSlider.index).addClass('active');
// Change Count
$(_infiniteSlider.count).html($('.active',_infiniteSlider.container).attr('data-slide')+' / '+(_infiniteSlider.length + 1));
// Animate Infos
$(_infiniteSlider.infos).fadeOut(_infiniteSlider.speed/2, function(){
if(typeof $('li.active',_infiniteSlider.container).attr('data-infos') !== "undefined"){
$(_infiniteSlider.infos).html($('li.active',_infiniteSlider.container).attr('data-infos'));
$(this).fadeIn(_infiniteSlider.speed/2);
} else {
$(_infiniteSlider.infos).html('');
}
});
// Animate Slides
if(_infiniteSlider.mode == 'slide'){
// Place new slide AFTER
if(direction == 'next'){
$('li',_infiniteSlider.container).eq(clicked)
.css('left', _infiniteSlider.width+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({left: '-='+_infiniteSlider.width}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
// Place new slide BEFORE
else {
$('li',_infiniteSlider.container).eq(clicked)
.css('left', -_infiniteSlider.width+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({left: '+='+_infiniteSlider.width}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
} else if(_infiniteSlider.mode == 'slidev'){
// Place new slide AFTER
if(direction == 'next'){
$('li',_infiniteSlider.container).eq(clicked)
.css('top', _infiniteSlider.height+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({top: '-='+_infiniteSlider.height}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
// Place new slide BEFORE
else {
$('li',_infiniteSlider.container).eq(clicked)
.css('top', -_infiniteSlider.height+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({top: '+='+_infiniteSlider.height}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
} else if(_infiniteSlider.mode == 'fade'){
// Animate Slides
$('> ul > li.active',_infiniteSlider.container).fadeIn(_infiniteSlider.speed, function(){
$('> ul > li',_infiniteSlider.container).eq(current).hide();
_infiniteSlider.animated = false;
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
});
} else if(_infiniteSlider.mode == 'demask'){
$('> ul > li.active',_infiniteSlider.container).animate({width: _infiniteSlider.width}, _infiniteSlider.speed, _infiniteSlider.easing, function(){
$('> ul > li.inactive',_infiniteSlider.container).width(0);
_infiniteSlider.animated = false;
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
});
}
}
Thanks for any help :)
Miles

I've never used JQuery but as a guess why not try
function yourfunction() {_infiniteSlider.next(_infiniteSlider);
return false;}

Add auto slide option in my JavaScript function

I have slide and when I click prev or next button, go to other images. Everything is OK. But I want add time option and auto slide in 10 seconds.
My click function:
$(document).ready(function () {
$(window).resize();
$("#nav #prevslide").click(function () {
ChangeBackground($("#backgrounds img.current"), -1);
});
$("#nav #nextslide").click(function () {
ChangeBackground($("#backgrounds img.current"), 1);
});
});
And:
function ChangeBackground(background, direction) {
if (is_animating)
return;
is_animating = true;
$background = $(background);
$newItem = null;
if (direction == -1) {
$newItem = $background.prev();
if ($newItem.length == 0) {
$newItem = $("#backgrounds img").last();
}
} else {
$newItem = $background.next();
if ($newItem.length == 0) {
$newItem = $("#backgrounds img").first();
}
}
$background.fadeOut(300);
$newItem.fadeIn(300, function () {
$("#backgrounds img").removeClass("current");
$newItem.addClass("current");
is_animating = false;
});
$clone = $("div.item.current").clone();
$clone.removeClass("current").addClass("new");
$clone.find("h1").html($newItem.attr("alt"));
$clone.find("h2").html($newItem.attr("data-title2"));
$clone.find("p").html($newItem.attr("data-desc"));
$clone.css({ display: "none" });
$("div.item.current").after($clone);
$("div.item.current").fadeOut(300, function () {
$(this).remove();
});
$clone.fadeIn(300, function () {
$(this).removeClass("new").addClass("current");
});
}
How can I add this option? Thank you.

$(document).ready(function () {
$(window).resize();
$("#nav #prevslide").click(function () {
ChangeBackground($("#backgrounds img.current"), -1);
});
$("#nav #nextslide").click(function () {
ChangeBackground($("#backgrounds img.current"), 1);
});
setInterval(function(){ $("#nav #nextslide").click()},10000);
});
your also can use following
setInterval(function(){ChangeBackground($("#backgrounds img.current"), -1)},10000);

Develop Reference

JavaScript is the programming language of the Web.

How To add automatic scrolling in slider - javascript

Added setInterval in your code. setInterval(() => { if (curSlide >= $slides){ if (animating) return; pagination(4, 1); curSlide = 1; } else navigateDown(); }, 10000); Check updated fiddle.

update below navigateDown code. //navigation down function function navigateDown() { if (curSlide < $slides) { scrolledUp = false; pagination(curSlide); curSlide++; console.log(curSlide); }else{ curSlide=1; pagination(4,1) } } Add this below line setInterval(navigateDown,7000);

Related

Change JS scrolling event to time interval

Triger Next Prev function button when clicking the left right key

trying to make a timer stop when the user reaches the bottom of the page using jQuery

Autoplay function Infiniteslider JS

Add auto slide option in my JavaScript function

Categories

Resources