Owl Carousel Not Working!!

Excursionist
35 1 1

My owl carousel is not working on Shopify. It works perfectly fine on my html but not on shopify. Here is the code 

This is my HTML : 

 

 

<section>
    <div class="la-related-product">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <div class="product-detail-head">
                        <h2> Related Product </h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="product-slide" class="product-carousel owl-carousel owl-theme">
                    <div class="item">
                        <div class="product-indv-slide">
                            <figure>
                                <div class="p-image">
                                    <div class="product-overlay"> </div>
                                    <img src="images/jacket.jpg" alt="jacket" class="img-responsive">
                                    <div class="hover-btn">
                                        <button class="btn btn-white"> Add to cart</button>
                                        <button class="btn btn-white margin-top-md"> View Detail</button>
                                    </div>
                                </div>
                            </figure>
                            <div class="la-caption">
                                <h4> Bicker Jacket </h4>
                                <div class="price-wish-wrap">
                                    <span class="price"> $299 </span>
                                    <span class="wishlist"> <i class="fa fa-heart-o" aria-hidden="true"></i> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="product-indv-slide">
                            <figure>
                                <div class="p-image">
                                    <div class="product-overlay"> </div>
                                    <img src="images/jacket.jpg" alt="jacket" class="img-responsive">
                                    <div class="hover-btn">
                                        <button class="btn btn-white"> Add to cart</button>
                                        <button class="btn btn-white margin-top-md"> View Detail</button>
                                    </div>
                                </div>
                            </figure>
                            <div class="la-caption">
                                <h4> Bicker Jacket </h4>
                                <div class="price-wish-wrap">
                                    <span class="price"> $299 </span>
                                    <span class="wishlist"> <i class="fa fa-heart-o" aria-hidden="true"></i> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="product-indv-slide">
                            <figure>
                                <div class="p-image">
                                    <div class="product-overlay"> </div>
                                    <img src="images/jacket.jpg" alt="jacket" class="img-responsive">
                                    <div class="hover-btn">
                                        <button class="btn btn-white"> Add to cart</button>
                                        <button class="btn btn-white margin-top-md"> View Detail</button>
                                    </div>
                                </div>
                            </figure>
                            <div class="la-caption">
                                <h4> Bicker Jacket </h4>
                                <div class="price-wish-wrap">
                                    <span class="price"> $299 </span>
                                    <span class="wishlist"> <i class="fa fa-heart-o" aria-hidden="true"></i> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="product-indv-slide">
                            <figure>
                                <div class="p-image">
                                    <div class="product-overlay"> </div>
                                    <img src="images/jacket.jpg" alt="jacket" class="img-responsive">
                                    <div class="hover-btn">
                                        <button class="btn btn-white"> Add to cart</button>
                                        <button class="btn btn-white margin-top-md"> View Detail</button>
                                    </div>
                                </div>
                            </figure>
                            <div class="la-caption">
                                <h4> Bicker Jacket </h4>
                                <div class="price-wish-wrap">
                                    <span class="price"> $299 </span>
                                    <span class="wishlist"> <i class="fa fa-heart-o" aria-hidden="true"></i> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="product-indv-slide">
                            <figure>
                                <div class="p-image">
                                    <div class="product-overlay"> </div>
                                    <img src="images/jacket.jpg" alt="jacket" class="img-responsive">
                                    <div class="hover-btn">
                                        <button class="btn btn-white"> Add to cart</button>
                                        <button class="btn btn-white margin-top-md"> View Detail</button>
                                    </div>
                                </div>
                            </figure>
                            <div class="la-caption">
                                <h4> Bicker Jacket </h4>
                                <div class="price-wish-wrap">
                                    <span class="price"> $299 </span>
                                    <span class="wishlist"> <i class="fa fa-heart-o" aria-hidden="true"></i> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="product-indv-slide">
                            <figure>
                                <div class="p-image">
                                    <div class="product-overlay"> </div>
                                    <img src="images/jacket.jpg" alt="jacket" class="img-responsive">
                                    <div class="hover-btn">
                                        <button class="btn btn-white"> Add to cart</button>
                                        <button class="btn btn-white margin-top-md"> View Detail</button>
                                    </div>
                                </div>
                            </figure>
                            <div class="la-caption">
                                <h4> Bicker Jacket </h4>
                                <div class="price-wish-wrap">
                                    <span class="price"> $299 </span>
                                    <span class="wishlist"> <i class="fa fa-heart-o" aria-hidden="true"></i> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

I have already included owl-carousel in the theme.liquid

 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css"/>

Then i have initialized it on my script.js which is in my assets folder like this

 

var $productSlide = $('#product-slide');
    $productSlide.owlCarousel({
        loop: true,
        margin: 20,
        nav: true,
        responsiveClass: true,
        navText: [
            "<i class='fa fa-chevron-left'></i>",
            "<i class='fa fa-chevron-right'></i>"
        ],

        responsive: {
            0: {
                items: 1,
                nav: true,
                dots: false
            },
            600: {
                items: 2,
                nav: true,
                dots: false
            },
            1000: {
                items: 4,
                nav: true,
                loop: true,
                dots: false
            }
        }
    });

But it is still not working. 

0 Likes
Explorer
63 13 17

@SubitTimalsina Can you share your store url?

Thanks for reading, don’t forget to like and subscribe!
Wrong outro - Click Like and Accept as Solution if it was helpful and help other to find the answer ?
0 Likes
New Member
6 0 0

Any news here? 

I'm facing the same problem with my shop.

 

URL: okaese.myshopify.com

Password: mauro

0 Likes