I have this row of thumbnails that I am animating with jQuery.
Each of these thumbnails has a hover and active class.
They work fine but when I animate the list, the new thumbnail under the mousecursor does not apply the hover? I have to move the mouse a little bit after each click?
It's kinda difficult to exaplain.. I have made a fiddle here: http://jsfiddle.net/nZGYA/
When you start clicking after thumb 3 without moving the mouse you see what I mean...
It works fine in FireFox, NOT Safari, Chrome, IE etc.
Is there something I can do about this?
For reference here is my code:
<style type="text/css">
.container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver; }
ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; }
li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; }
#list-2 li a { display: block; width: 120px; height: 80px; outline: none; }
#list-2 li a:hover { background: teal; }
#list-2 li a.active { background: navy; }
</style>
$(document).ready(function() {
var idx_2 = 0;
$('#list-2 li a')
.click(function() {
$('#list-2 > li a').removeClass('active');
$(this).addClass('active');
var id = $('#list-2 li a.active').data('index') - 2;
idy = Math.max(0, id * 90);
$(this).parent().parent().animate({ 'top' : -idy + 'px' });
return false;
})
.each(function() {
$(this).data('index', idx_2);
++idx_2;
});
});
<div class="container">
<ul id="list-2">
<li><a class="active" href="#"></a></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul>
</div>
I only worked on the top list but I think I got it all working. let me know if it is what you are looking for.
Here is the fiddler
var idx = 0;
$('#list-1 li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click
(function() {
var currentindex = $('.active').index();
var selectedindex = $(this).index();
var nexthoverindex = selectedindex + (selectedindex - currentindex);
//counter for starting on index 1
if(currentindex === 1 && selectedindex > 2){
nexthoverindex = nexthoverindex - 1;
}
//counter for starting on index 0
if(currentindex === 0 && selectedindex > 2){
nexthoverindex = nexthoverindex - 2;
}
//make sure the selection never goes below 0
if(nexthoverindex < 0){
nexthoverindex = 0;
}
$('#list-1 > li').removeClass('active');
$(this).addClass('active');
var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle
idy = Math.max(0, id * 90);
$(this).parent().animate({
'top': -idy + 'px'
},200, function(){
$('.hover').removeClass('hover');
if(currentindex > 2 || selectedindex > 2){
$('#list-1 > li').eq(nexthoverindex).addClass('hover');
}
});
return false;
}).css('cursor', 'pointer').each(function() {
$(this).data('index', idx);
++idx;
});
I've got a solution that works in Chrome and IE (haven't tested in Safari). Basically I trigger the mouseover() event of the element under the mouse in the animate() callback event if the thumbnails have moved. The solution is only implemented for list-1.
// list 1
var idx = 0;
$('#list-1 li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function() {
$('#list-1 > li').removeClass('active');
var $active = $(this);
$active.addClass('active');
var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle
var moveAmount = 90;
idy = Math.max(0, id * moveAmount);
var oldPos = $active.parent().position().top;
$active.parent().animate({
'top': -idy + 'px'
}, function(){
var newPos = $(this).position().top;
// Check if we moved
if(oldPos - newPos != 0)
{
var movement = (oldPos - newPos) / moveAmount;
$($(this).children()[$active.index() + movement])
.trigger("mouseover");
}
});
return false;
}).css('cursor', 'pointer').each(function() {
$(this).data('index', idx);
++idx;
});
And here's the link to my fork in jsfiddle if you wan't to test it out over there - http://jsfiddle.net/jimmysv/3tzAt/15/
Related
I am trying to implement a left/right sliding animation inside of a JavaScript switch statement and the animation (sliding left and right without a bounce effect and no whitespace in between images) is not consistently activating. Also, the slide animation still activates when the previous button is clicked on the first slide and when the next button is clicked on the last slide. This should not be happening. Does anyone have any thoughts? Please see the code example.
$(function() {
// USER EDITABLE CONTROLS
var content = 'img'; // accepts any DOM element - div, img, table, etc...
var showControls = true; // true/false shows/hides the slider's navigational controls
var transition = 'slide'; // supports default, fade, slide
var transitionDuration = .5; // adjust the time of the transition measured in seconds
// VARIABLE DECLARATIONS
var contentType = $(content);
var $el = $('#showcase');
var $leftArrow = '#left_arrow';
var $rightArrow = '#right_arrow';
var $load = $el.find(contentType)[0];
var slideCount = $el.children().length;
var slideNum = 1;
// PRELOADS SLIDE WITH CORRECT SETTINGS
$load.className = 'active';
// ADD SLIDER CONTROLS TO PAGE
if (showControls === true) {
$('<div id="controls">« Previous Next »</div>').insertAfter('#showcase');
$('#controls').find('#left_arrow').addClass('disabled');
}
// LOGIC FOR SLIDE TRANSITIONS
function transitions() {
switch (transition) {
// FADE TRANSITION
case 'fade':
$('.slide').stop().animate({opacity : 0}, transitionDuration*300, function(){
$('.active').stop().animate({opacity : 1}, transitionDuration*1000);
});
break;
// SLIDE TRANSITION
case 'slide':
if (slideNum > 1) {
$('.slide').stop().animate({left : -160}, transitionDuration*800, function(){
$('.active').stop().animate({left : 0}, transitionDuration*1000);
});
}
if (slideNum < slideCount) {
$('.slide').stop().animate({left : 160}, transitionDuration*800, function(){
$('.active').stop().animate({left : 0}, transitionDuration*1000);
});
}
break;
// DEFAULT TRANSITION
case 'default':
break;
}
}
// CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
function checkSlide() {
if (slideNum == 1) {
$($leftArrow).addClass('disabled');
} else {
$($leftArrow).removeClass('disabled');
}
if (slideNum == slideCount) {
$($rightArrow).addClass('disabled');
} else {
$($rightArrow).removeClass('disabled');
}
}
// NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
$(document).on('click', $leftArrow, function() {
if (slideNum > 1) {
var counter = $('.active').index();
counter--;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions();
$el.find(contentType).eq(counter).addClass('active');
slideNum--;
checkSlide();
}
})
$(document).on('click', $rightArrow, function() {
if (slideNum < slideCount) {
var counter = $('.active').index();
counter++;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions();
$el.find(contentType).eq(counter).addClass('active');
slideNum++;
checkSlide();
}
})
});
#showcase {
width: 160px;
overflow: hidden;
}
img {
width: 160px;
}
a {
color: blue;
}
.disabled {
color: red !important;
}
.slide {
display: none;
opacity: 0;
position: relative;
left: 0px;
right: 0px;
}
.active {
display: block;
opacity: 1;
position: relative;
left: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
<img class="slide" src="https://picsum.photos/458/354" />
<img class="slide" src="https://picsum.photos/458/354/?image=306" />
<img class="slide" src="https://picsum.photos/458/354/?image=626" />
</div>
As said in the comments you need to fix your conditional statements. Awhile ago you had set two click handlers - one of which is binded (and is triggered regardless of any condition) when the other handler is triggered, this caused the slide animation still activates when the previous button is clicked on the first slide and when the next button is clicked on the last slide issue.
As for the animations, see my code below. I hacked your conditions a litte. When previous is clicked, the slide is to move from left to right. When next is clicked the slide is to move from right to left. I used a flag to determine the movement it will make - see the new paramter for transition function
$(function() {
// USER EDITABLE CONTROLS
var content = 'img'; // accepts any DOM element - div, img, table, etc...
var showControls = true; // true/false shows/hides the slider's navigational controls
var transition = 'slide'; // supports default, fade, slide
var transitionDuration = .5; // adjust the time of the transition measured in seconds
// VARIABLE DECLARATIONS
var contentType = $(content);
var $el = $('#showcase');
var $leftArrow = '#left_arrow';
var $rightArrow = '#right_arrow';
var $load = $el.find(contentType)[0];
var slideCount = $el.children().length;
var slideNum = 1;
// PRELOADS SLIDE WITH CORRECT SETTINGS
$load.className = 'active';
// ADD SLIDER CONTROLS TO PAGE
if (showControls === true) {
$('<div id="controls">« Previous Next »</div>').insertAfter('#showcase');
$('#controls').find('#left_arrow').addClass('disabled');
}
// LOGIC FOR SLIDE TRANSITIONS
function transitions(impl = null) {
switch (transition) {
// FADE TRANSITION
case 'fade':
$('.slide').stop().animate({
opacity: 0
}, transitionDuration * 300, function() {
$('.active').stop().animate({
opacity: 1
}, transitionDuration * 1000);
});
break;
// SLIDE TRANSITION
case 'slide':
if (impl == "next") {
$('.slide').css("left", '160px');
$('.slide').stop().animate({
left: 160
}, transitionDuration * 800, function() {
$('.active').stop().animate({
left: 0
}, transitionDuration * 1000);
});
} else if (impl == "prev") {
$('.slide').css("left", '-160px');
$('.slide').stop().animate({
left: -160
}, transitionDuration * 800, function() {
$('.active').stop().animate({
left: 0
}, transitionDuration * 1000);
});
}
break;
// DEFAULT TRANSITION
case 'default':
break;
}
}
// CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
function checkSlide() {
if (slideNum == 1) {
$($leftArrow).addClass('disabled');
} else {
$($leftArrow).removeClass('disabled');
}
if (slideNum == slideCount) {
$($rightArrow).addClass('disabled');
} else {
$($rightArrow).removeClass('disabled');
}
}
// NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
$(document).on('click', $leftArrow, function() {
if (slideNum > 1) {
var counter = $('.active').index();
counter--;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions('prev');
$el.find(contentType).eq(counter).addClass('active');
slideNum--;
checkSlide();
}
})
$(document).on('click', $rightArrow, function() {
if (slideNum < slideCount) {
var counter = $('.active').index();
counter++;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions('next');
$el.find(contentType).eq(counter).addClass('active');
slideNum++;
checkSlide();
}
})
});
#showcase {
width: 160px;
overflow: hidden;
}
img {
width: 160px;
}
a {
color: blue;
}
.disabled {
color: red !important;
}
.slide {
display: none;
opacity: 0;
position: relative;
left: 0px;
right: 0px;
}
.active {
display: block;
opacity: 1;
position: relative;
left: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
<img class="slide" src="https://picsum.photos/458/354" />
<img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=306" />
<img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=626" />
</div>
I'm building a page that first gets the HTML data from an external page (Not cross domain), then after the first function completes, it runs a function which is a sideshow. It works... More or less...
The problem that I'm having is that after 5 or 6 slides, the whole thing gets messy and then everything disappears. When checking the console, I found the following message:
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
at HTMLDivElement.<anonymous> (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:6297:21)
at domManip (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:6066:14)
at jQuery.fn.init.after (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:6295:10)
at HTMLDivElement.<anonymous> (xxxxxxxxxxxxxxxxx.com/go/scripts/jqueryautoscroll/autoscroll.js:41:47)
at HTMLDivElement.opt.complete (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:7900:12)
at fire (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:3232:31)
at Object.fireWith [as resolveWith] (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:3362:7)
at tick (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:7755:14)
at jQuery.fx.tick (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:8069:9)
I presume it has something to do with the container.find(elm + ':first').before(container.find(elm + ':last'));
So I tried commenting all the lines, the error was gone, but then the sliders wouldn't change.
My code is as follows:
jQuery(document).ready(function ($) {
$("#jobshome").load("jobs/newest-jobs .js-toprow", function(){
//rotation speed and timer
var speed = 3000;
var run = setInterval(rotate, speed);
var slides = $('.js-toprow');
var container = $('#jobshome');
var elm = container.find(':first-child').prop("tagName");
var item_height = container.height();
var previous = 'prevabc'; //id of previous button
var next = 'nextabc'; //id of next button
slides.height(item_height); //set the slides to the correct pixel height
container.parent().height(item_height);
container.height(slides.length * item_height); //set the slides container to the correct total height
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
//if user clicked on prev button
$('#buttonsabc a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'top': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'top': item_height * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
}
);
}
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'top': -1 * item_height
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() {
jQuery('#nextabc').click();
}
});
#carouselabc {
position: relative;
width: 60%;
margin: 0 auto;
}
#slidesabc {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
}
#areadoslideabc {
list-style: none;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
position: relative;
}
#slidesabcdef {
width: 100%;
height: 250px;
float: left;
text-align: center;
position: relative;
font-family: lato, sans-serif;
}
/* Styling for prev and next buttons */
.btn-barabc {
max-width: 346px;
margin: 0 auto;
display: block;
position: relative;
top: 40px;
width: 100%;
}
#buttonsabc {
padding: 0 0 5px 0;
float: right;
}
#buttonsabc a {
text-align: center;
display: block;
font-size: 50px;
float: left;
outline: 0;
margin: 0 60px;
color: #b14943;
text-decoration: none;
display: block;
padding: 9px;
width: 35px;
}
a#prevabc:hover,
a#next:hover {
color: #FFF;
text-shadow: .5px 0px #b14943;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carouselabc">
<div class="btn-barabc">
<div id="buttonsabc">
<a id="prevabc" href="#">Previous</a>
<a id="nextabc" href="#">Next</a>
</div>
</div>
<div id="slidesabc">
<div id="jobshome"></div>
</div>
</div>
Screenshot 1
Screenshot 2
This is how it starts
Your problem seems to happen because of the nested selectors (.js-toprow) that are later moved.
Try replacing all the .find() (matches children any level deep) with .children() (matches only immediate children).
jQuery(document).ready(function ($) {
$("#jobshome").load("jobs/newest-jobs .js-toprow", function(){
//rotation speed and timer
var speed = 3000;
var run = setInterval(rotate, speed);
var slides = $('.js-toprow');
var container = $('#jobshome');
var elm = container.children(':first-child').prop("tagName");
var item_height = container.height();
var previous = 'prevabc'; //id of previous button
var next = 'nextabc'; //id of next button
slides.height(item_height); //set the slides to the correct pixel height
container.parent().height(item_height);
container.height(slides.length * item_height); //set the slides container to the correct total height
container.children(elm + ':first').before(container.children(elm + ':last'));
resetSlides();
//if user clicked on prev button
$('#buttonsabc a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'top': 0
}, 1500, function () {
container.children(elm + ':first').before(container.children(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'top': item_height * -2
}, 1500, function () {
container.children(elm + ':last').after(container.children(elm + ':first'));
resetSlides();
}
);
}
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'top': -1 * item_height
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() {
jQuery('#nextabc').click();
}
});
I am trying to get three squares (put ramdomly) on page to disappear on click BUt for a reason I don't understand, some of them (usually the 2nd or 3rd one) reappear elsewhere on the page when I click on them.
They should just disappear.
I made a jsffidle: https://jsfiddle.net/DTcHh/9949/
The code:
HTML
<div class="container">
<div id="square-zone">
<!--
here appear the squares
-->
</div>
</div>
Javascript
//randomly place squares
$(function() {
var numInfoSquares = 3;
var $squareZone = $("#square-zone");
var $toAppend = $('<div class="info-square"><span class="square" data-toggle="modal"></span></div>');
for (var c = 0; c < numInfoSquares; c++) {
$squareZone.append(
$toAppend.clone()
.find('.square').attr("data-target", "#myInfoModal" + (c + 1))
.end()
);
};
// place info squares randomly on the page
function getRandomInt(min, max) {
return Math.random() * (max - min + 1) + min;
}
$(".info-square").each(function () {
var topPosition = getRandomInt(8, 70);
var leftPosition = getRandomInt(8, 92);
$(this).css({
"top": topPosition+"%",
"left": leftPosition+"%"
});
});
// clicked squares disappears on click
$(".info-square").click(function () {
$(this).css("display","none");
$(this).next().css("display","block");
});
});
CSS
body {
margin: 10px;
}
#square-zone > div { position: absolute; }
.info-square > span {
display: inline-block;
cursor: pointer;
background: url(http://cliparts.co/cliparts/ATb/jRa/ATbjRan5c.png) no-repeat center center;
width: 30px;
height: 30px;
}
How can I prevent the squares to reappear ?
Well just remove that line from your code which makes it appear again
$(this).next().css("display","block");
// clicked squares disappears on click
$(".info-square").click(function () {
$(this).css("display","none");
//$(this).next().css("display","block");
});
Updated jsfiddle with commented line https://jsfiddle.net/DTcHh/9950/
that is because of $(this).next().css("display","block");.
Assume you are clicking on 2nd element then it is hidden, then you are clicking on the first element now that is hidden but when the above line is executed it will display the second element back as it is the next sibling of the first info-square
//randomly place squares
$(function() {
var numInfoSquares = 3;
var $squareZone = $("#square-zone");
var $toAppend = $('<div class="info-square"><span class="square" data-toggle="modal"></span></div>');
for (var c = 0; c < numInfoSquares; c++) {
$squareZone.append(
$toAppend.clone()
.find('.square').attr("data-target", "#myInfoModal" + (c + 1))
.end()
);
};
// place info squares randomly on the page
function getRandomInt(min, max) {
return Math.random() * (max - min + 1) + min;
}
$(".info-square").each(function() {
var topPosition = getRandomInt(8, 70);
var leftPosition = getRandomInt(8, 92);
$(this).css({
"top": topPosition + "%",
"left": leftPosition + "%"
});
});
// clicked squares disappears on click
$(".info-square").click(function() {
$(this).css("display", "none");
//$(this).next().css("display", "block"); this displayes the next element back if it was already hidden
});
});
/* Latest compiled and minified CSS included as External Resource*/
body {
margin: 10px;
}
#square-zone > div {
position: absolute;
}
.info-square > span {
display: inline-block;
cursor: pointer;
background: url(http://cliparts.co/cliparts/ATb/jRa/ATbjRan5c.png) no-repeat center center;
width: 30px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="square-zone">
<!--
here appear the squares
-->
</div>
</div>
Alternately, changing $(this).css("display","none"); to $(this).css("visibility","hidden"); also solves it.
Here's the jsfiddle
I have a script that changes the way my menu looks when you scroll past a certain point, to stop it repeating my animation over and over again I have put in a $(window).off("scroll"); so it only executes once. I need the menu to change back again when I scroll back past the same point again, but once I have turned off scroll, is there a way I can turn it back on at certain point?
This is what I have so far:
var Header = $('#header');
var Navbar = $('.navbar');
var links = $(".navbar ul.nav > li > a");
var HeaderH = Header.height();
var NavbarH = Navbar.height();
$(window).on("scroll", function(){
if ($(this).scrollTop() === (HeaderH + 64)) {
$(window).off("scroll");
Navbar.addClass('navbar-fixed-top')
links.css('padding', '10px 20px 10px 20px');
Header.css('margin-bottom', '64px');
$('.navbar-fixed-top').css('top', '-64px')
$('.navbar-fixed-top').animate({'top' : '0'}, 1000);
}
});
Just toggle a custom class :
var Header = $('#header');
var Navbar = $('.navbar');
var links = $(".navbar ul.nav > li > a");
var HeaderH = Header.height();
var NavbarH = Navbar.height();
$(window).on("scroll", function(){
if ($(this).scrollTop() >= (HeaderH + 64)) {
if (!Navbar.hasClass('myclass')) {
Navbar.addClass('navbar-fixed-top myclass')
$('.navbar-fixed-top').stop().animate({'top' : '0'}, 1000);
}
} else {
Navbar.removeClass('navbar-fixed-top myclass');
}
});
And CSS :
.myclass {
padding: 10px 20px;
margin-bottom: 64px;
top: -64px;
}
I have multiple sliders, each in its own section->article. My problem is this: When I hit the next or previous button on one of the sliders all sliders start sliding at the same time.
html:
<section id="section01">
<article class="article01">
<div class="wrapper">
<ul class="slider">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
<img class="previous" src="images/arrow-transparent.png">
<img class="next" src="images/arrow-transparent.png">
</article>
</section>
css
.wrapper{
height: 342px;
margin: 0 auto;
overflow: hidden;
width: 918px;
}
.slider{
height: 342px;
position: relative;
width: 5000px;
}
.slide{
float: left;
height: 342px;
position: relative;
width: 306px;
}
js
/* slider */
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});
$('.next').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li'),
current = i;
i = ++i + 2 % currentSlides.length;
if(i + 3 < currentSlides.length) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = current;
}
});
});
How do I fix this?
This is because you are selecting all slider class elements so this will animate them all.
What if you select slide instead?
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slide').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});
I decided to completely ditch the javascript code from my original post and ended up using this instead:
$(function() {
$('article .wrapper').each(function(){
var slider = $(this).find('.slider'),
parent = $(this),
step =855,
left = parseInt(slider.css('left'), 10),
max = parent.width() - slider.width(),
min = 0;
parent.find(".previous").click(function() {
if (left < 0) {
var newLeft = left + step;
left = (newLeft<min) ? newLeft : min;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
parent.find(".next").click(function() {
if (left > max) {
var newLeft = left - step;
left = (newLeft>max) ? newLeft : max;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
});
});
I also slightly modified widths of several elements in css and now it all works like a charm.