I have this simple jQuery Counter on my website. The only issue I face, that the counter starts or even has finished before you get to the section where the html code is embedded.
Any help is much appreciated!
<script>
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
// then in your code ..
if(isInViewPort) {
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('#number1').jQuerySimpleCounter({end: 52,duration: 5000});
$('#number2').jQuerySimpleCounter({end: 35,duration: 3000});
$('#number3').jQuerySimpleCounter({end: 998,duration: 6000});
}</script>
There are multiple ways of doing this
Vanilla JS: https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
jQuery plugin: https://github.com/zeusdeux/isInViewport
Updated Vanilla version as pseudoCode for directional purposes - Can be optimized tremendously.
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
}
function startCounters() {
if(isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({end: 52,duration: 5000});
if(isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({end: 52,duration: 5000});
if(isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({end: 52,duration: 5000});
}
$(document).ready(function(){
startCounters()
})
$(window).on("scroll",function(){
startCounters()
})
You can improve it with the following updates
1.Instead of the selectors #number1, #number2 etc. just use a class so your code is cleaner, imagine a future of #number99.
2. Should the counter stall at where it was last left or reset?
I'm stuck with my page scroll effects.
This is what I've got so far - https://codepen.io/DCRSLG/pen/jzYJeY
$(document).ready(function($) {
//variables
var hijacking = $('body').data('hijacking'),
animationType = $('body').data('animation'),
delta = 0,
scrollThreshold = 5,
actual = 1,
animating = false;
//DOM elements
var sectionsAvailable = $('.cd-section'),
verticalNav = $('.cd-vertical-nav'),
prevArrow = verticalNav.find('a.cd-prev'),
nextArrow = verticalNav.find('a.cd-next');
//check the media query and bind corresponding events
var MQ = deviceType(),
bindToggle = false;
bindEvents(MQ, true);
$(window).on('resize', function() {
MQ = deviceType();
bindEvents(MQ, bindToggle);
if (MQ == 'mobile') bindToggle = true;
if (MQ == 'desktop') bindToggle = false;
});
function bindEvents(MQ, bool) {
if (MQ == 'desktop' && bool) {
//bind the animation to the window scroll event, arrows click and keyboard
if (hijacking == 'on') {
initHijacking();
$(window).on('DOMMouseScroll mousewheel', scrollHijacking);
} else {
scrollAnimation();
$(window).on('scroll', scrollAnimation);
}
prevArrow.on('click', prevSection);
nextArrow.on('click', nextSection);
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var target = $(this).attr('href');
$(target).velocity('scroll', {
duration: 3000,
offset: 0,
easing: 'ease-in-out',
mobileHA: false
});
});
$(document).on('keydown', function(event) {
if (event.which == '40' && !nextArrow.hasClass('inactive')) {
event.preventDefault();
nextSection();
} else if (event.which == '38' && (!prevArrow.hasClass('inactive') || (prevArrow.hasClass('inactive') && $(window).scrollTop() != sectionsAvailable.eq(0).offset().top))) {
event.preventDefault();
prevSection();
}
});
//set navigation arrows visibility
checkNavigation();
} else if (MQ == 'mobile') {
//reset and unbind
resetSectionStyle();
$(window).off('DOMMouseScroll mousewheel', scrollHijacking);
$(window).off('scroll', scrollAnimation);
prevArrow.off('click', prevSection);
nextArrow.off('click', nextSection);
$(document).off('keydown');
}
}
function scrollAnimation() {
//normal scroll - use requestAnimationFrame (if defined) to optimize performance
(!window.requestAnimationFrame) ? animateSection(): window.requestAnimationFrame(animateSection);
}
function animateSection() {
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
sectionsAvailable.each(function() {
var actualBlock = $(this),
offset = scrollTop - actualBlock.offset().top;
//according to animation type and window scroll, define animation parameters
var animationValues = setSectionAnimation(offset, windowHeight, animationType);
transformSection(actualBlock.children('div'), animationValues[0], animationValues[1], animationValues[2], animationValues[3], animationValues[4]);
(offset >= 0 && offset < windowHeight) ? actualBlock.addClass('visible'): actualBlock.removeClass('visible');
});
checkNavigation();
}
function transformSection(element, translateY, scaleValue, rotateXValue, opacityValue, boxShadow) {
//transform sections - normal scroll
element.velocity({
translateY: translateY + 'vh',
scale: scaleValue,
rotateX: rotateXValue,
opacity: opacityValue,
boxShadowBlur: boxShadow + 'px',
translateZ: 0,
}, 0);
}
function initHijacking() {
// initialize section style - scrollhijacking
var visibleSection = sectionsAvailable.filter('.visible'),
topSection = visibleSection.prevAll('.cd-section'),
bottomSection = visibleSection.nextAll('.cd-section'),
animationParams = selectAnimation(animationType, false),
animationVisible = animationParams[0],
animationTop = animationParams[1],
animationBottom = animationParams[2];
visibleSection.children('div').velocity(animationVisible, 1, function() {
visibleSection.css('opacity', 1);
topSection.css('opacity', 1);
bottomSection.css('opacity', 1);
});
topSection.children('div').velocity(animationTop, 0);
bottomSection.children('div').velocity(animationBottom, 0);
}
function scrollHijacking(event) {
// on mouse scroll - check if animate section
if (event.originalEvent.detail < 0 || event.originalEvent.wheelDelta > 0) {
delta--;
(Math.abs(delta) >= scrollThreshold) && prevSection();
} else {
delta++;
(delta >= scrollThreshold) && nextSection();
}
return false;
}
function prevSection(event) {
//go to previous section
typeof event !== 'undefined' && event.preventDefault();
var visibleSection = sectionsAvailable.filter('.visible'),
middleScroll = (hijacking == 'off' && $(window).scrollTop() != visibleSection.offset().top) ? true : false;
visibleSection = middleScroll ? visibleSection.next('.cd-section') : visibleSection;
var animationParams = selectAnimation(animationType, middleScroll, 'prev');
unbindScroll(visibleSection.prev('.cd-section'), animationParams[3]);
if (!animating && !visibleSection.is(":first-child")) {
animating = true;
visibleSection.removeClass('visible').children('div').velocity(animationParams[2], animationParams[3], animationParams[4])
.end().prev('.cd-section').addClass('visible').children('div').velocity(animationParams[0], animationParams[3], animationParams[4], function() {
animating = false;
if (hijacking == 'off') $(window).on('scroll', scrollAnimation);
});
actual = actual - 1;
}
resetScroll();
}
function nextSection(event) {
//go to next section
typeof event !== 'undefined' && event.preventDefault();
var visibleSection = sectionsAvailable.filter('.visible'),
middleScroll = (hijacking == 'off' && $(window).scrollTop() != visibleSection.offset().top) ? true : false;
var animationParams = selectAnimation(animationType, middleScroll, 'next');
unbindScroll(visibleSection.next('.cd-section'), animationParams[3]);
if (!animating && !visibleSection.is(":last-of-type")) {
animating = true;
visibleSection.removeClass('visible').children('div').velocity(animationParams[1], animationParams[3], animationParams[4])
.end().next('.cd-section').addClass('visible').children('div').velocity(animationParams[0], animationParams[3], animationParams[4], function() {
animating = false;
if (hijacking == 'off') $(window).on('scroll', scrollAnimation);
});
actual = actual + 1;
}
resetScroll();
}
function unbindScroll(section, time) {
//if clicking on navigation - unbind scroll and animate using custom velocity animation
if (hijacking == 'off') {
$(window).off('scroll', scrollAnimation);
(animationType == 'catch') ? $('body, html').scrollTop(section.offset().top): section.velocity("scroll", {
duration: time
});
}
}
function resetScroll() {
delta = 0;
checkNavigation();
}
function checkNavigation() {
//update navigation arrows visibility
(sectionsAvailable.filter('.visible').is(':first-of-type')) ? prevArrow.addClass('inactive'): prevArrow.removeClass('inactive');
(sectionsAvailable.filter('.visible').is(':last-of-type')) ? nextArrow.addClass('inactive'): nextArrow.removeClass('inactive');
}
function resetSectionStyle() {
//on mobile - remove style applied with jQuery
sectionsAvailable.children('div').each(function() {
$(this).attr('style', '');
});
}
function deviceType() {
//detect if desktop/mobile
return window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
}
function selectAnimation(animationName, middleScroll, direction) {
// select section animation - scrollhijacking
var animationVisible = 'translateNone',
animationTop = 'translateUp',
animationBottom = 'translateDown',
easing = 'ease',
animDuration = 800;
switch (animationName) {
case 'gallery':
animDuration = 1500;
if (middleScroll) {
animationTop = 'scaleDown.moveUp.scroll';
animationVisible = 'scaleUp.moveUp.scroll';
animationBottom = 'scaleDown.moveDown.scroll';
} else {
animationVisible = (direction == 'next') ? 'scaleUp.moveUp' : 'scaleUp.moveDown';
animationTop = 'scaleDown.moveUp';
animationBottom = 'scaleDown.moveDown';
}
break;
}
return [animationVisible, animationTop, animationBottom, animDuration, easing];
}
function setSectionAnimation(sectionOffset, windowHeight, animationName) {
// select section animation - normal scroll
var scale = 1,
translateY = 100,
rotateX = '0deg',
opacity = 1,
boxShadowBlur = 0;
if (sectionOffset >= -windowHeight && sectionOffset <= 0) {
// section entering the viewport
translateY = (-sectionOffset) * 100 / windowHeight;
switch (animationName) {
case 'gallery':
if (sectionOffset >= -windowHeight && sectionOffset < -0.9 * windowHeight) {
scale = -sectionOffset / windowHeight;
translateY = (-sectionOffset) * 100 / windowHeight;
boxShadowBlur = 400 * (1 + sectionOffset / windowHeight);
} else if (sectionOffset >= -0.9 * windowHeight && sectionOffset < -0.1 * windowHeight) {
scale = 0.9;
translateY = -(9 / 8) * (sectionOffset + 0.1 * windowHeight) * 100 / windowHeight;
boxShadowBlur = 40;
} else {
scale = 1 + sectionOffset / windowHeight;
translateY = 0;
boxShadowBlur = -400 * sectionOffset / windowHeight;
}
break;
}
} else if (sectionOffset > 0 && sectionOffset <= windowHeight) {
//section leaving the viewport - still has the '.visible' class
translateY = (-sectionOffset) * 100 / windowHeight;
switch (animationName) {
case 'gallery':
if (sectionOffset >= 0 && sectionOffset < 0.1 * windowHeight) {
scale = (windowHeight - sectionOffset) / windowHeight;
translateY = -(sectionOffset / windowHeight) * 100;
boxShadowBlur = 400 * sectionOffset / windowHeight;
} else if (sectionOffset >= 0.1 * windowHeight && sectionOffset < 0.9 * windowHeight) {
scale = 0.9;
translateY = -(9 / 8) * (sectionOffset - 0.1 * windowHeight / 9) * 100 / windowHeight;
boxShadowBlur = 40;
} else {
scale = sectionOffset / windowHeight;
translateY = -100;
boxShadowBlur = 400 * (1 - sectionOffset / windowHeight);
}
break;
}
} else if (sectionOffset < -windowHeight) {
translateY = 100;
switch (animationName) {
case 'gallery':
scale = 1;
break;
}
} else {
//section not visible anymore
translateY = -100;
switch (animationName) {
case 'gallery':
scale = 1;
break;
}
}
return [translateY, scale, rotateX, opacity, boxShadowBlur];
}
});
/* Custom effects registration - feature available in the Velocity UI pack */
//gallery
$.Velocity
.RegisterEffect("scaleDown.moveUp", {
defaultDuration: 1,
calls: [
[{
translateY: '-10%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '-100%'
}, 0.60],
[{
translateY: '-100%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity
.RegisterEffect("scaleDown.moveUp.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '-100%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.60],
[{
translateY: '-100%',
scale: '1',
boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity
.RegisterEffect("scaleUp.moveUp", {
defaultDuration: 1,
calls: [
[{
translateY: '90%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '0%'
}, 0.60],
[{
translateY: '0%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity
.RegisterEffect("scaleUp.moveUp.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '0%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.60],
[{
translateY: '0%',
scale: '1',
boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity
.RegisterEffect("scaleDown.moveDown", {
defaultDuration: 1,
calls: [
[{
translateY: '10%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '100%'
}, 0.60],
[{
translateY: '100%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity
.RegisterEffect("scaleDown.moveDown.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '100%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.60],
[{
translateY: '100%',
scale: '1',
boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity
.RegisterEffect("scaleUp.moveDown", {
defaultDuration: 1,
calls: [
[{
translateY: '-90%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '0%'
}, 0.60],
[{
translateY: '0%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
I'm trying to get it so the Dots on the right hand side can be a reference to scroll down to each section like this:
https://codyhouse.co/demo/vertical-fixed-navigation/index.html
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var target = $(this).attr('href');
$(target).velocity('scroll', {
duration: 3000,
offset: 0,
easing: 'ease-in-out',
mobileHA: false
});
});
I can get it to work using the above code providing I disable data-hijacking on the scroll, does anyone know of a way to get this to work while keep data-hijacking enabled?
On my page I have a few bx Sliders. They're set up like this:
$('#bxslider1').bxSlider({
auto: true,
mode: 'fade',
speed: 2000,
slideMargin: 160,
pause: Math.floor((Math.random() * 5000) + 1500)
});
Is there any possibility to set the pause option of the slider for the first change on 2000, but from this point it should be a random time between 1500 and 5000. So is there any way to change the pause option after the first slide/fade?
Thx for your help
I don't think the bx Slider has that type of support, here is a solution that might work. It is untested but might point you into the right direction:
JAVASCRIPT:
function Timer(timeout) { //timer function to keep track of slide speed.
var self = this;
var time = 0;
this.interval = timeout ? timeout : 1000; // Default
this.run = function (runnable) {
interval = setInterval(function () { runnable(self); time += 1; }, this.interval);
};
var pauseCalc = Math.floor((Math.random() * 5000) + 1500); //You can do your pause calculations here
if ($('#bxslider1').length > 0 && time == 0) { // Check if the contol exists and time == 0
$('#bxslider1').bxSlider({
auto: true,
mode: 'fade',
speed: 2000,
slideMargin: 160,
pause: pauseCalc // original pause
});
} else if (time == 2) {
$('#bxslider1').unbind(); // Unbind the control first then re-bind
$('#bxslider1').bxSlider({
auto: true,
mode: 'fade',
speed: 2000,
slideMargin: 160,
pause: pauseCalc //Add new pause after 2 sec
});
clearInterval(interval); //Stop the timer;
}
clearInterval(this.interval);
}
//invoke the timer
Timer.run(1000);
I've searched a lot these days but i didn't manage to solve my problem.
I have the script below which is a simple counter, that counts some stats starting from 0. It starts when my page loads. I would like to fire this event when i scroll to a specific div or id, but only once. I saw a lot examples with .one() method etc. but i didn't find out the proper solution.
Here is my script.
<script type="text/javascript">
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 500,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});
</script>
So what should i add to trigger it after reaching a certain div or id...?
I managed to find a "good" solution that works for me. doing the below "not so good" thing. :) Thanks Nikolas for your help.
<script type="text/javascript">
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var one = $('.tworow').position().top;
var two = $('.endrow').position().top;
if (scroll > one & scroll < two) {
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 500,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});
};
});
When the scroll reaches a certain div it starts, and after that i put another div where the event should end, controlling it with an if condition. Now the area of the page that triggers the event is a very small "area" between 2 divs.
This should give you the result you're looking for:
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var one = $('element').position().top;
var count = 0;
if (scroll > one) {
var newCount = count + 1;
if (newCount === 1) {
//do something
};
};
});
this is my first post,
I was looking for a solution to my problem, i have a jquery slider working at http://www.creo.com.uy/web/mytho/ which i want to make in automatic rotation.
The problem is: i need to set the slider in an automatic rotation. So would be, both options, clicking the arrows, and auto-slide.
The original code didn't come with that, even the guy who developed this theme, told me they didn't added that function.
So with a friend that understands javascript, we worked over the .js file to add some code, but we're missing something, cus in the last image, it gets in a recursive loop, from 4 to 3, from 3 to 4, and so on.
I deliver here both files, the original one, and the modified one, i hope you can help me with this!
Original:
jQuery(document).ready(function($) {
"use strict";
//prev = top
//current = middle
//next = bottom
var windowHeight = $(window).height();
$('.slide:first-child').addClass('current');
$('.slide:nth-child(2)').addClass('next').css('top', windowHeight);
$(window).resize(function() {
windowHeight = $(window).height();
$('.slide.next').css('top', windowHeight);
$('.slide.prev').css('top', -windowHeight);
});
if (!$('.slide.current').next('.slide').length) { $('#next').hide(); }
if (!$('.slide.current').prev('.slide').length) { $('#prev').hide(); }
function nextSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (next.length) {
current.animate({
top: -windowHeight
}, 300);
next.animate({
top: 0
}, 300);
prev.removeClass('prev');
current.removeClass('current').addClass('prev');
next.removeClass('next').addClass('current');
next.next('.slide').addClass('next').css('top', windowHeight);
if (!$('.slide.current').next('.slide').length) {
$('#next').hide();
$('#prev').show();
} else {
$('#next').show();
}
}
}
function prevSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (prev.length) {
current.animate({
top: windowHeight
}, 300);
prev.animate({
top: 0
}, 300);
next.removeClass('next');
current.removeClass('current').addClass('next');
prev.removeClass('prev').addClass('current');
prev.prev('.slide').addClass('prev').css('top', -windowHeight);
if (!$('.slide.current').prev('.slide').length) {
$('#prev').hide();
$('#next').show();
} else {
$('#prev').show();
}
}
}
$('#next').live('click', function() {
nextSlide();
return false;
});
$('#prev').live('click', function() {
prevSlide();
return false;
});
//Add swipe capabilities
$(".slide").swipe( {
swipeUp:function(event, direction, distance, duration, fingerCount) {
nextSlide();
},
swipeDown:function(event, direction, distance, duration, fingerCount) {
prevSlide();
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
Modded:
jQuery(document).ready(function($) {
"use strict";
//prev = top
//current = middle
//next = bottom
var windowHeight = $(window).height();
var timeSlider = 3000;
var move = setTimeout(autoSlider,timeSlider);
function autoSlider(){
if (!$('.slide.current').next('.slide').length) {
prevSlide();
}else{
nextSlide();
}
}
$('.slide:first-child').addClass('current');
$('.slide:nth-child(2)').addClass('next').css('top', windowHeight);
$(window).resize(function() {
windowHeight = $(window).height();
$('.slide.next').css('top', windowHeight);
$('.slide.prev').css('top', -windowHeight);
});
if (!$('.slide.current').next('.slide').length){
$('#next').hide();
}
if (!$('.slide.current').prev('.slide').length){
$('#prev').hide();
}
function nextSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (next.length) {
current.animate({
top: -windowHeight
}, 300);
next.animate({
top: 0
}, 300);
prev.removeClass('prev');
current.removeClass('current').addClass('prev');
next.removeClass('next').addClass('current');
next.next('.slide').addClass('next').css('top', windowHeight);
if (!$('.slide.current').next('.slide').length) {
$('#next').hide();
$('#prev').show();
} else {
$('#next').show();
}
}
clearTimeout(move);
move = setTimeout(autoSlider,timeSlider);
}
function prevSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (prev.length) {
current.animate({
top: windowHeight
}, 300);
prev.animate({
top: 0
}, 300);
next.removeClass('next');
current.removeClass('current').addClass('next');
prev.removeClass('prev').addClass('current');
prev.prev('.slide').addClass('prev').css('top', -windowHeight);
if (!$('.slide.current').prev('.slide').length) {
$('#prev').hide();
$('#next').show();
} else {
$('#prev').show();
}
}
clearTimeout(move);
move = setTimeout(autoSlider,timeSlider);
}
$('#next').live('click', function() {
nextSlide();
return false;
});
$('#prev').live('click', function() {
prevSlide();
return false;
});
//Add swipe capabilities
$(".slide").swipe( {
swipeUp:function(event, direction, distance, duration, fingerCount) {
nextSlide();
},
swipeDown:function(event, direction, distance, duration, fingerCount) {
prevSlide();
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
Thank you very very much in advance!
Nacho.