Owl Carousel 2 Custom Dots Not Clickable

Question

I'm using Owl Carousel 2 and trying to make custom dots with text. The custom dots show up but nothing happens when you click them. I.e. when you click a dot it doesn't jump back to the appropriate slide, it just does nothing. How can I get the carousel the go to the appropriate slide when the custom dots are clicked?

The full code is here: https://codepen.io/anon/pen/ZqKaEZ

HTML:

<div class="owl-carousel owl-theme">
<div class="item" data-dot="<span>1</span>">
  <img src="https://placehold.it/100">
</div>
<div class="item" data-dot="<span>2</span>">
  <img src="https://placehold.it/100">
</div>
<div class="item" data-dot="<span>3</span>">
  <img src="https://placehold.it/100">
</div>
<div class="item" data-dot="<span>4</span>">
  <img src="https://placehold.it/100">
</div>

JS:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
        autoplay: true,
        autoplayTimeout: 4000,
        dots: true,
        dotsData:true,
        loop: true,
        margin: 30,
        nav: false,
        center: false,
        items: 1
    });
});

i am guessing you can try binding the plugin's event handlers to the appropriate elements — korwalskiy, Oct 10 '18 at 21:47

score 3 · Answer 1 · answered Oct 12 '18 at 03:38

Here is the code that worked:

$(document).ready(function(){
    let owl = $(".owl-carousel").owlCarousel({
        autoplay: false,
        autoplayTimeout: 2000,
        dots: true,
        dotsData:true,
        loop: true,
        margin: 30,
        nav: false,
        center: false,
        items: 1
    });

    $('.owl-dot').click(function() {
        owl.trigger('to.owl.carousel', [$(this).index(), 1000]);
    })
});

score 0 · Answer 2 · edited Aug 27 '20 at 03:07

<div class="testimonial_slider owl-carousel owl-theme">
    <div class="item" data-dot="<img src='images/testimonial-1.jpg' alt='' class='img-fluid' />">
        <div class="testimonial-content text-center">
            <div class="testimonial-dec">
                <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
            </div>
            <div class="testimonial-name mt-4">
                <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
            </div>
        </div>
    </div>
    <div class="item" data-dot="<img src='images/testimonial-1.jpg' alt='' class='img-fluid' />">
        <div class="testimonial-content text-center">
            <div class="testimonial-dec">
                <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
            </div>
            <div class="testimonial-name mt-4">
                <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
            </div>
        </div>
    </div>
</div>

<script>

    $('.testimonial_slider').owlCarousel({
        loop:false,
        margin:32,
        nav:false,
        dots: true,
        items:1,
        mouseDrag: false,
        dotsData: true,
    })

</script>

score 0 · Answer 3 · answered Aug 26 '20 at 13:55

<div class="testimonial_slider owl-carousel owl-theme">
<div class="item" data-dot="<button><img src='images/testimonial-8.jpg' alt='' class='img-fluid' /></button>">
    <div class="testimonial-content text-center">
        <div class="testimonial-dec">
            <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
        </div>
        <div class="testimonial-name mt-4">
            <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
        </div>
    </div>
</div>

    $('.testimonial_slider').owlCarousel({
    loop:false,
    margin:32,
    nav:false,
    dots: true,
    items:1,
    mouseDrag: false,
    dotsData: true,
})

score 0 · Answer 4 · answered Oct 27 '20 at 15:02

0

Remove dotsData: true, in js and width: inherit; height: inherit; from .owl-theme .owl-dots .owl-dot span in this codepen https://codepen.io/anon/pen/ZqKaEZ . It will work.

answered Oct 27 '20 at 15:02

Rafee Shaik

681
4
10

score 0 · Answer 5 · answered Apr 21 '21 at 08:37

0

this is answer

$(document).ready(function(){
let owl = $(".owl-carousel").owlCarousel({
    autoplay: false,
    autoplayTimeout: 2000,
    dots: true,
    dotsData:true,
    loop: true,
    margin: 30,
    nav: false,
    center: false,
    items: 1
});

$('.owl-dot').click(function() {
    $('.owl-dot').trigger('to.owl.carousel', [$(this).index(), 1000]);
})

});

answered Apr 21 '21 at 08:37

Hossein kabeh nozari

55
10

1

duplicate - same answer, accepted as answer for this question. – Lakshman Kambam Apr 21 '21 at 08:56

score 0 · Answer 6 · answered Jan 11 '22 at 12:18

The solution:

I found it does work without adding extra jQuery code. You just need to follow the original HTML structure for the custom dot navigation. When using dotsData: true the script is working for a button tag, so simply re-insert the button tag in the data-dot.

For example:

<div class="item" data-dot="<button>Name</button>"><h4>Name</h4></div>

This renders your custom dot content as a button, and you are able to navigate these dots as you normally would.

Owl Carousel 2 Custom Dots Not Clickable

6 Answers6

Linked