CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cage1004
cage1004

Reputation: 1

Owl Carousel - Click image for next

I have an owl carousel and want to get to the next image when I click on the image. No arrows or pagination, etc.

I do not have much experience with owl carousel.

This is what I have in my HTML. I set touchDrag equal to true, however I want a click on the image to advance to the next one.

$(document).ready(function(){
    "use strict";
    //Carousel
    $(".carousel").owlCarousel({
        items : 1,
        autoPlay: true, 
        touchDrag  : true,
        mouseDrag  : true,    
        singleItem:true,
        responsive:true,
        autoHeight : true,
        transitionStyle:"fade"

    });
});

Upvotes: 0

Views: 4759

Answers (1)

dmoo
dmoo

Reputation: 1529

You could attach a click handler to the carousel slides themselves that moves it onto the next one.

$(document).ready(function(){
  //Carousel
  var owl = $(".carousel").owlCarousel({
    items : 1,
    autoPlay: true, 
    touchDrag  : true,
    mouseDrag  : true,    
    singleItem:true,
    responsive:true,
    autoHeight : true,
    transitionStyle:"fade"
  });

  $('.owl-item').click(function() {
    owl.trigger('next.owl.carousel');
  })
});

Upvotes: 2

Related Questions