wiele karuzel na jednej stronie

Question

Cześć, chciałam skorzystać z owl carousel, kilka razy na jednej stronie. Karuzele mają mieć różne parametry. Niestety podany kod nie działa dla drugiej karuzeli. Dla pierwszej działa, ale jeśli zmieniam ją na inną niż "owl-carousel" to także przestaje działać. Gdzie powinnam szukać błędu? Pierwszy raz korzystam z tego typu rozwiązania. Podaje kod niżej. Dzięki z góry za odpowiedzi.

 

                    <div class="content owl-theme owl-carousel">
                        <div class="item">
                            <a class="clickimg" href="#"><img src="images/logan.jpg" alt="Wolverine" ></a>
                        </div>
                        <div class="item">
                            <a class="clickimg" href="#"><img src="images/curie.jpg" alt="Wolverine" ></a>
                        </div>
                        <div class="item">
                            <a class="clickimg" href="#"><img src="images/logan.jpg" alt="Wolverine" ></a>
                        </div>
                        <div class="item">
                            <a class="clickimg" href="#"><img src="images/logan.jpg" alt="Wolverine" ></a>
                        </div>
</div>




                        <div id="owl-demo">
                            <div><img src="images/apes.jpg" alt="Apes"></div>
                            <div><img src="images/apes.jpg" alt="Apes"></div>
                            <div><img src="images/apes.jpg" alt="Apes"></div>
                            <div><img src="images/apes.jpg" alt="Apes"></div>
                        </div>

 

$(document).ready(function(){
    $('.owl-carousel').owlCarousel();
});
 $('.owl-carousel').owlCarousel({
     nav: true,
    pagination: false,
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
});


$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      autoPlay: 3000, //Set AutoPlay to 3 seconds
 
      items : 2,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 
  });
 
});

 

Comments

Konsola coś podpowiada?

Prosto z dokumentacji:

Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

Nadaj dla drugiej karuzeli odpowiednie klasy, dla pierwszej jakieś id/unikalną klasę i pobieraj element przez ustawione id lub unikalną klasę.

---

Niestety to nie zadziałało, co więcej mam wrażenie, że podane przeze mnie parametry dla kauzel się nie wczytują, a jedynie zostaje stworzona jakaś domyślna karuzela.

---

Konsola jakieś błędy wyrzuca?

---

Tak

Uncaught TypeError: $(...).owlCarousel is not a function at Obiekt.js:15

---

Pokaz cały plik HTML

---

Tylko nie wiem czy się połapiesz, bo wcześniej uprościlam problem.

W każdym razie 3 id używałam do karuzeli #content1, #content2, #owl-carousel. Podaję też js.

 

https://drive.google.com/file/d/0B5MzxXcCgcycbkpMdUxuT3lqN3c/view?usp=sharing

 

$(document).ready(function(){
    $('#content1').owlCarousel();
});
 $('#content1').owlCarousel({
     nav: true,
    pagination: false,
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
});
$(document).ready(function(){
    $('#content2').owlCarousel();
});
 $('#content2').owlCarousel({
     nav: true,
    pagination: false,
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
});


$(document).ready(function() {
  $("#owl-demo").owlCarousel({

    items : 1,
  });

});

 

---

Dwa razy podpinasz jQuery - w sekcji head i przed </body>(usuń tą wersję, która jest w headzie).

Skrypt obiekt.js przenieś pod skrypty, które znajdują się właśni na końcu ciała.

Uporządkuj swój skrypt,

$(document).ready(function(){
    
});

Wystarczy jeden taki event, bo wywołujesz go aż 3 razy, ale jeżeli kod jest na końcu ciała to nie potrzebujesz tego.

Dodatkowo dwa razy podpinasz karuzele dla #content1 i #content2.

$('#content1').owlCarousel({
     nav: true,
    pagination: false,
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
});
 $('#content2').owlCarousel({
     nav: true,
    pagination: false,
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
});
$("#owl-demo").owlCarousel({
 items : 1,
});

Tak będzie okej

---

Wow, dziękuję! Poprawiłam i działa :) Jestem zielona w te rzeczy mógłbyś mi powiedzieć co było główną przyczyną błędu? Tak, żeby móc się ustrzec tego na przyszłość. Aha i czy skrypt nie może być w zewnętrznym źródle?

---

Próba podpięcia 2 karuzel przez załadowaniem skryptu z ową karuzelą.

A czemu nie mógłby być, raczej może.