This is my JS code so far. Right now I can click on each button on the slider and it will change to the corresponding slide.
$('.slide-nav').on('click', function(e) {
e.preventDefault();
// get current slide
var current = $('.flex--active').data('slide'),
// get button data-slide
next = $(this).data('slide');
console.log(current);
$('.slide-nav').removeClass('active');
$(this).addClass('active');
if (current === next) {
return false;
} else {
$('.slider__wrapper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');
$('.flex--active').addClass('animate--end');
setTimeout(function() {
$('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');
$('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');
}, 900);
}
});
the slider I am working with looks like this one to see the html/css
https://codepen.io/mikun/pen/YWgqEX
So in addition to clicking to change slides I would like to scroll to change slides
You can simulate the click function this way:
setInterval(function () {
$(".slide-nav.active").next().click();
}, 1000);
You need to check if this is the last and try this:
setInterval(function () {
if ($(".slide-nav.active").next().length > 0)
$(".slide-nav.active").next().click();
else
$(".slide-nav").first().click();
}, 1000);
Demo: https://codepen.io/anon/pen/ZwBVzo
Related
guys.
So i've got this code that runs a loop on slides/tabs and they have a sort of dropdown interaction to show and hide text based on the current/active slide/tab.
What I want to add is a function where, if a user hovers over one of the tabs(.loop-tab-link) that the clearTimout pauses until the user hovers out of the div.
As you can see I tried adding a mouseover function but that only adds an additional 5 seconds to the Timeout.
clearTimeout(tabTimeout);
tabLoop();
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.loop-tabs-menu').children('.current:first').next();
if($next.length) {
$next.click();
} else {
$('.loop-tab-link:first').click();
}
}, 5000);
}
$('.loop-tab-link').on('mouseenter', function() {
clearTimeout(tabTimeout);
tabLoop();
});
$('.loop-tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
Looks like you need exactly what you asked for
clearTimeout(tabTimeout);
tabLoop(5000);
function tabLoop(x) {
tabTimeout = setTimeout(function() {
var $next = $('.loop-tabs-menu').children('.current:first').next();
if($next.length) {
$next.click();
} else {
$('.loop-tab-link:first').click();
}
}, x);
}
$('.loop-tab-link').mouseenter(function() {
clearTimeout(tabTimeout);
});
$('.loop-tab-link').mouseleave(function(){
tabLoop(1000);
});
This program randomly selects two employees from a json-object Employees array, winnerPos is already defined.
For better user experience I programmed these functions to change pictures one by one. The animation stops when the randomly selected person is shown on the screen.
The slideThrough function will be triggered when the start button is pressed.
function slideThrough() {
counter = 0;
start = true;
clearInterval(picInterval);
picInterval = setInterval(function () {
changePicture();
}, 500);
}
function changePicture() {
if (start) {
if (counter > winnerPos) {
setWinner();
start = false;
killInterval();
} else {
var employee = Employees[counter];
winnerPic.fadeOut(200, function () {
this.src = 'img/' + employee.image;
winnerName.html(employee.name);
$(this).fadeIn(300);
});
counter++;
}
}
}
The problem is the animation doesn't work smoothly. At first it works, but not perfect. The second time the transition happens in an irregular way, i.e. different speed and fadeIn/fadeOut differs from picture to picture.
Could anyone help me to fine-tune the transition?
I would avoid using setInterval() and add a function to the call to .fadeIn() that starts the animation of the next picture.
It would look like this:
function changePicture(pos) {
pos = pos || 0;
if (pos <= winnerPos) {
var employee = Employees[pos];
winnerPic.fadeOut(200, function() {
this.src = 'img/' + employee.image;
winnerName.html(employee.name);
$(this).fadeIn(300, function() {
changePicture(pos + 1);
});
});
} else {
setWinner();
}
}
To start the animation, you call changePicture() without any arguments, like this.
changePicture();
jsfiddle
This is a problem with superslides from nicinabox Github Link
I know that you can use the 'play' option in order to set a time in milliseconds before progressing to the next slide automatically. This sets a global time for the entire slideshow.
What I would like to achieve is for individual slides to have their own specific progress/delay time.
For example if I have a slideshow with twenty slides I want all the slides to progress automatically and to stay on screen for 5 seconds. However the third slide should be displayed for 20 seconds.
I have tried to do this by using the animated.slides event but I cant get it to work as the animation stops with the fourth slide :
Here is my code:
$(function () {
$('#slides').superslides({
hashchange: true,
play: 5000,
pagination: true
});
});
$('#slides').on('animated.slides', function () {
var current_index = $(this).superslides('current');
if (current_index === 2) { // third slide
$(this).superslides('stop');
var disp = function test1() {
setTimeout(function ()
{
$('#slides').superslides('animate', 3)
}, 20000);
}
disp();
}
});
Any help would be appreciated. Maybe there is someone out there to solve my problem.
Replace .superslides('animate', 3) with .superslides('start').
Demo (the condition is 2, as you originally wrote)
Just do this:
$('#slides').on('animated.slides', function () {
var current_index = $(this).superslides('current');
if (current_index === 2) { // third slide
$(this).superslides('stop');
var disp = function test1() {
setTimeout(function ()
{
$('#slides').superslides('start')
}, 20000);
}
disp();
}
});
FIDDLE
You can do it like this:
$('#slides').superslides({
hashchange: true,
play: 500,
pagination: true
});
$('#slides').on('animated.slides', function () {
var slideNo = $(this).superslides('current');
if(slideNo === 2){
$(this).superslides('stop');
setTimeout(function(){
$('#slides').superslides('start')
}, 2000);
}
});
Here's a fiddle.
I have the following j-query code (using the jquery plugin ajax/libs/jquery/1.10.1) to move a div element to the left upon clicking on a separate div element:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animate({left:"+=97%"});
});
});
</script>
What I want to happen is when the #tab_box3 div is clicked on a second time, the #tab3 div moves back to where it originally started.
I tried the following, using Toggle, but it does not seem to have worked:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animateToggle({left:"+=97%"});
});
});
</script>
Can anyone offer advice please?
You must doing something like this :
$(document).ready(function(){
$("#tab_box3").click(function(e){
var element = $(this),
clicked = parseInt(element.data('clicked')) || 0;
element.data('clicked', clicked + 1);
$("#tab3").stop();
if (clicked % 2 == 0)
{
$("#tab3").animate({left:"+=97%"}, 800);
}
else
{
$("#tab3").animate({left:"-=97%"}, 800);
}
e.preventDefault();
});
});
An example here :
http://jsfiddle.net/Q5HDu/
You will have to use -=97% to offset the previous animation change.
var $tab3 = $("#tab3");
if ($tab3.data("animated")) {
$tab3.animate({left: "-=97%").data("animated", false);
}
else {
$tab3.animate({left: "+=97%").data("animated", true);
}
I am not very proficient in JS and would like to help me with an issue I have.
I want to make the tabs on a Drupal website automatically rotate but still the user to be able to click on them.
This is the code I have:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$('ul.checklist-select li').click(function () {
var selectID = $(this).attr('id');
$('ul.checklist-select li').removeClass('active');
$(this).addClass('active');
$('.first-box, .second-box, .third-box, .fourth-box').fadeOut(300);
$('.' + selectID + '-box').delay(300).fadeIn(300);});
</script>
I tried few options but it wasn't working.Thanks very much! I appreciate your time and help.
Well, you want to add an interval that updates the view and rotates to the next one (or first if it's the last).
Try this (not tested):
<script type="text/javascript">
var index = 0, // Index of current tab
interval = setInterval(function () { rotate(); }, 5000), // Interval
$tabs = $('ul.checklist-select'),
$content = $('.checklist_wrap');
// Click handler
$('ul.checklist-select li').each(function (i) {
$(this).click(function () {
index = i;
switchElement();
});
});
function rotate() {
// Update index to next one
index++;
// Check if this is a valid index, or reset to 0
if (index >= $tabs.children('li').length)
index = 0;
switchElement();
}
function switchElement() {
clearInterval(interval);
// Remove class from current tab
$('ul.checklist-select li').removeClass('active');
$('.checklist_wrap .box').fadeOut(300);
// Show
$tabs.children('li').eq(index).addClass('active');
$content.children('.box').eq(index).delay(300).fadeIn(300);
// Reset interval
interval = setInterval(function () { rotate(); }, 5000);
}
</script>
Something you might want to add is that the interval is reset when someone clicks a tab.