Owlcarousel2: Nav not showing on second carousel when it is synced to another carousel

[jhig85]

I have two synced carousels, one is the main slide and the second is the thumbnails. I have nav set to true on both, but the nav shows as disabled on the second/thumbnails. I have tried to search but have not came across the same problem. Here is my JS:

`var $sync1 = $("#detailsSlider"),
$sync2 = $("#thumbnails"),
flag = false,
duration = 300;

$sync1
    .owlCarousel({
        items: 1,
        singleItem: true,
        slideSpeed: 2000,
        margin: 10,
        theme: 'owl-theme',
        nav: true,
        autoplay: false,
        dots: false,
        loop: false,
        responsiveClass: true,
        responsiveRefreshRate: 200,
        navText:false,
    })
    .on('changed.owl.carousel', function (e) {
        if (!flag) {
            flag = true;
            $sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
            flag = false;
        }
    });

$sync2
    .owlCarousel({
        items: 8,
        dots: false,
        theme: 'owl-theme',
        nav: true,
        navText: false,
        smartSpeed: 200,
        slideSpeed: 500,
        responsiveRefreshRate: 100,
        margin: 5,
        responsiveClass: true,
        responsive: {
            0: {
                items: 2
            },
            600: {
                items: 2
            },
            768: {
                items: 3
            },
            1024: {
                items: 8
            }
        }
    })
    .on('click', '.owl-item', function () {
        $sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);

    })
    .on('changed.owl.carousel', function (e) {
        if (!flag) {
            flag = true;
            $sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
            flag = false;
        }
    });`

and here is my HTML

            <div id="detailsSlider" class="owl-carousel owl-theme">
                <div class="item" style="background: url(../../Content/images/our-homes/details/exterior-slide-1.jpg);">
                </div>
                <div class="item" style="background: url(../../Content/images/our-homes/details/exterior-slide-1.jpg);">
                </div>
                <div class="item" style="background: url(../../Content/images/our-homes/details/exterior-slide-1.jpg);">
                </div>
            </div>
            <div id="thumbnails" class="owl-carousel owl-theme">
                <div class="item">
                    <img src="~/Content/images/our-homes/details/exterior-slide-1.jpg" />
                </div>
                <div class="item">
                    <img src="~/Content/images/our-homes/details/exterior-slide-1.jpg" />
                </div>
                <div class="item">
                    <img src="~/Content/images/our-homes/details/exterior-slide-1.jpg" />
                </div>
            </div>

Any help is appreciated. Thanks!

[jhig85]

Nevermind. I realized the second carousel did not have enough items for the nav to show up. Once I added more items, the nav was no longer disabled.

[kiwiant]

I had a similar issue where the carousel repeated the same item wen only one item was loaded and loop: true..

[pascalporedda]

Seems like this one is solved.