Jquery funktion virke på flere div
Jeg har flg. som jeg forsøger at få til at virke på flere div som her:$(document).ready(function() {
//configuration
var width = 300;
var animationSpeed = 1000;
var pause = 2500;
var currentSlide = 1;
//cache DOM - very efficient code. Only searching the DOM for #slider.
var $slider = $("#slider");
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var interval;
//mouse enters the slider
$slider.on("mouseenter", pauseSlider).on("mouseleave", startSlider);
//start slider function
function startSlider() {
interval = setInterval(function(){
$slideContainer.animate({
"margin-left": "-="+ width +"px"},
animationSpeed, function() {
currentSlide ++;
if (currentSlide == $slides.length) {
currentSlide = 1;
$slideContainer.css("margin-left", 0);
}
});
}, pause);
};
//stop slider function
function pauseSlider() {
clearInterval(interval);
}
//call the startslider function to start the slider.. duh
startSlider();
});
<div id="canvas">
<div id="slider" data="1">
<ul class="slides">
<li class="slide"><img src="../uploads/thumbs/hotdogclosec.66abab.jpg"></li>
<li class="slide"><img src="../uploads/thumbs/kaffe5.feab72.jpg"></li>
<li class="slide"><img src="../uploads/thumbs/henrik.973727.jpg"></li>
</ul>
</div>
<div id="slider" data="2">
<ul class="slides">
<li class="slide"><img src="../uploads/thumbs/jommer.73bf83.jpg"></li>
<li class="slide"><img src="../uploads/thumbs/zbu_aries.e32034.jpg"></li>
<li class="slide"><img src="../uploads/thumbs/core_sound_leads.b8249a.jpg"></li>
</ul>
</div>
</div>
Men kan ikke finde ud af det, er der nogen der har en ide....