Avatar billede artico Novice
01. maj 2016 - 14:14 Der er 2 kommentarer og
1 løsning

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....
Avatar billede olsensweb.dk Ekspert
02. maj 2016 - 12:00 #1
en id skal være unik på siden, så id i disse 2 linjer skal laves om til en class


<div id="slider" data="1">
<div id="slider" data="2">

skal være
<div class="slider" data="1">
<div class="slider" data="2">

hvilke medfører
var $slider = $("#slider");
skal være
var $slider = $(".slider");
Avatar billede artico Novice
02. maj 2016 - 12:47 #2
Super, mange tak ! - Send et svar
Avatar billede olsensweb.dk Ekspert
02. maj 2016 - 18:50 #3
får du her
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester