CODEWITHSUNDEEP
javascriptowl-carousel
goose
goose

Reputation: 74

Get value of slide owl carousel

I have this Owl code

 <script>
        $(document).ready(function() {

            $("#owl-demo").owlCarousel({
                items:1,
                autoplay:true,
                autoplayTimeout:3500,
                loop:true,

            });

        });
    </script>
        <div id="owl-demo" class="owl-carousel owl-theme">
            <div class="item">
                 <img id="city-img" width="100%" class="back-img-city" src="img/city.png" />
 <img id="img-river" width="100%" class="back-img-river" src="img/river.png" />
            </div>
        </div>

Can I somehow write a script like this:

<script>

if(current owl slide is 2){
alert("Your slide is 2. Congrats");
}
</script>
Meaning is to, for example, alert if its 2nd slide on the screen.

Upvotes: 2

Views: 564

Answers (1)

User863
User863

Reputation: 20039

Try using changed.owl.carousel event

$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    items: 1,
    autoplay: true,
    autoplayTimeout: 3500,
    loop: true
  }).on('changed.owl.carousel', function(event) {
    if (event.page.index + 1 == 2) {
      alert("Your slide is 2. Congrats");
    }
  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div> Your Content 1</div>
  <div> Your Content 2</div>
  <div> Your Content 3</div>
</div>

Upvotes: 2

Related Questions