CODEWITHSUNDEEP
jqueryowl-carousel
Simonsays
Simonsays

Reputation: 31

The second owl carousel photo slider is not working

I've been busy on this for a while, asked multiple questions here.
But here is the whole code, it's about the second carousel that won't work, the first one works great.

thanks.

http://pastebin.com/wtPgi4cV

Upvotes: 1

Views: 5396

Answers (2)

M.javid
M.javid

Reputation: 6647

HTML

<div class="crousel-set">
    <div class="item"><img src="slide1.jpg"></div>
    <div class="item"><img src="slide2.jpg"></div>
    <div class="item"><img src="slide3.jpg"></div>
    <div class="item"><img src="slide4.jpg"></div>
    <div class="item"><img src="slide5.jpg"></div>
    <div class="item"><img src="slide6.jpg"></div>
</div>

<div class="crousel-set">
    <div class="item"><img src="slide7.jpg"></div>
    <div class="item"><img src="slide8.jpg"></div>
    <div class="item"><img src="slide9.jpg"></div>
    <div class="item"><img src="slide10.jpg"></div>
    <div class="item"><img src="slide11.jpg"></div>
    <div class="item"><img src="slide12.jpg"></div>
</div>

JavaScript

$(document).ready(function() {
    $(".crousel-set").each(function(index, crousel) {
        crousel.owlCarousel();
    });
});

Upvotes: 0

WhiteLine
WhiteLine

Reputation: 1991

To use more owl-carousel at the same time just use different "id"

javascript

$(document).ready(function() {

  $("#owl-demo1").owlCarousel();
  $("#owl-demo2").owlCarousel();

});

html

<div id="owl-demo1" class="owl-carousel">
    <div class="item"><img src="slide1.jpg"></div>
    <div class="item"><img src="slide2.jpg"></div>
    <div class="item"><img src="slide3.jpg"></div>
    <div class="item"><img src="slide4.jpg"></div>
    <div class="item"><img src="slide5.jpg"></div>
    <div class="item"><img src="slide6.jpg"></div>
</div>

<div id="owl-demo2" class="owl-carousel">
    <div class="item"><img src="slide7.jpg"></div>
    <div class="item"><img src="slide8.jpg"></div>
    <div class="item"><img src="slide9.jpg"></div>
    <div class="item"><img src="slide10.jpg"></div>
    <div class="item"><img src="slide11.jpg"></div>
    <div class="item"><img src="slide12.jpg"></div>
</div>

Upvotes: 2

Related Questions