January 10th, 2013, 12:10 PM
|
|
Registered User
|
|
Join Date: Nov 2012
Posts: 7
Time spent in forums: 4 h 23 m 15 sec
Reputation Power: 0
|
|
|
Help keying up next slide section in custom slider
I've got this custom slider and I can't get the section cycle to work. The idea is that when the the page loads, several slide shows will load and the user will navigate through them with prev/next buttons. When they get to the end of one section, whey will select the next section that they want to view. The slider works great, but the next section selector is not.
Here is a JSfiddle. And below is my javascript. I'm new to all of this, so any suggestions to improve the code in any way will be greatly appreciated. Thanks
Code:
$(document).ready(function() {
var sec = 'introduction',
secCount = $('#'+sec+'').length,
slideCount = 0,
centSlide = 0,
prevSlide = centSlide - 1,
nextSlide = centSlide + 1;
function init (x) {
centSlide = 0;
prevSlide = centSlide - 1;
nextSlide = centSlide + 1;
$('#'+x+' > .slide').first().addClass('liveslide').next().addClass('next');
slideCount = $('#'+x+' > .slide').length;
return centSlide, prevSlide, nextSlide, slideCount;
};
//initialize
init(sec);
// cycle code
$('#'+sec+' > .slide').click(function() {
var index = $('#'+sec+' > .slide').index(this);
if (index > centSlide) nextcycle(centSlide, slideCount);
if (index < centSlide) prevcycle(centSlide, slideCount);
return false;
});
// section cycle code
$('.slide li').click(function() {
$('.liveslide').removeClass('liveslide');
$('.prev').removeClass('prev');
sec = $(this).attr('name');
slideCount = $('#'+sec+' > .slide').length;
init(sec);
});
// construct cycle functions
function nextcycle(x, y) {
centSlide = x + 1;
prevSlide = centSlide - 1;
nextSlide = centSlide + 1;
n = x - 1;
$('#'+sec+' > .slide:eq('+n+')').removeClass('prev');
$('#'+sec+' > .slide:eq('+centSlide+')').animate({
left: 0,
height: '90%',
top: 0
}, 1000).removeClass('next').addClass('liveslide');
if (prevSlide >= 0 && prevSlide < y) {
$('#'+sec+' > .slide:eq('+prevSlide+')').animate({
left: '-79%',
height: '80%',
top: '5%',
}, 1000).removeClass('liveslide').addClass('prev');
};
if (nextSlide < y) {
$('#'+sec+' > .slide:eq('+nextSlide+')').css('left','100%').animate({
left: '79%'
}, 1000).addClass('next')
};
};
function prevcycle(x, y) {
centSlide = x - 1;
prevSlide = centSlide - 1;
nextSlide = centSlide + 1;
n = x + 1;
$('#'+sec+' > .slide:eq('+n+')').removeClass('next');
$('#'+sec+' > .slide:eq('+centSlide+')').animate({
left: 0,
height: '90%',
top: 0
}, 1000).removeClass('prev').addClass('liveslide');
if (prevSlide >= 0 && prevSlide < y) {
$('#'+sec+' > .slide:eq('+prevSlide+')').css('left','-100%').animate({
left: '-79%'
}, 1000).addClass('prev');
};
if (nextSlide < y) {
$('#'+sec+' > .slide:eq('+nextSlide+')').animate({
left: '79%',
height: '80%',
top: '5%',
}, 1000).removeClass('liveslide').addClass('next');
};
};
}); // end ready
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
