0

I have used owl carousel in my shopify store on mobile devices. Data Of owl Carousel is coming from my private app usin ajax request. My owl carousel is not loaded and data is listed as list on mobile and face this error:

enter image description here

Here Is code which i have used:-

function owl_slider(){
          var owl = $('#shoppinglistDetailMobile .owl-carousel');
          owl.owlCarousel({
            margin: 30,
            loop: true,
            navigation : true,
            autoplay:false,
            autoplayTimeout:3000,
            autoplayHoverPause:true,
            responsive: {
              0: {
                items: 2
              },
              400: {
                items: 2
              },
              600: {
                items: 3
              },
              800: {
                items: 3
              },
              1200: {
                items: 4
              },
              1300: {
                items: 4
              },
              1350: {
                items: 6
              },
              1400: {
                items: 6
              },
              1600: {
                items: 6
              }
            }
          });
  }
    
    
  $('#shoppinglistDetailMobile .owl-carousel').html(htmlDataMobile);

                 owl_slider();

This owl_slider function is call at time when my ajax request is success and my data is embeded in div.

Please Help me regarding this. Thanks In advance.

Gurpreet Singh
  • 73
  • 12
  • Add some code here ! – Pedram Nov 25 '17 at 07:15
  • @pedram I have added my code snippet please check – Gurpreet Singh Nov 25 '17 at 07:35
  • This error mostly occurred when you didn't include `owl carousel` library, double check this. and be sure you include this exactly before your script. – Pedram Nov 25 '17 at 07:38
  • @pedram Thanks For reply but i have added owl carousel libaray in my shopify theme.liquid in head. Actually my data comes from another server to shopify in mobile devices so owl carousel is not working in mobile – Gurpreet Singh Nov 25 '17 at 07:42
  • No, i don't think this error belong `ajax load data` the problem is `owl carousel` not defined and that's mean something wrong in calling this library. try to change `owl.owlCarousel({` to `$('#shoppinglistDetailMobile .owl-carousel').owlCarousel` and something important, if you want load carousel data via `ajax` this way not working for sure. – Pedram Nov 25 '17 at 07:46
  • See these https://stackoverflow.com/questions/41106614/how-to-reinitialize-owl-carousel-after-ajax-call | https://stackoverflow.com/questions/38920590/owl-carousel-ajax-load | https://stackoverflow.com/questions/35838983/owl-carousel-2-dynamic-content-json – Pedram Nov 25 '17 at 07:48
  • This mean, you should get `data` first then initialize owl carousel – Pedram Nov 25 '17 at 07:50

0 Answers0