Slider Images in product.liquid of Shopify

Question

I'm using flexslider.js, but im getting the error when removing the variant for images. Here's the code below of product.liquid of shopify. how to resolve this issue in flexslider?

    <script src="//cdn.shopify.com/s/files/1/2149/4693/t/7/assets/jquery-1.11.2.min.js?18364480765274061922" type="text/javascript"></script>
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
{{ 'jquery.flexslider.js' | asset_url | script_tag }}
{{ 'jquery.flexslider-min.js' | asset_url | script_tag }}
<script>
       $(window).load(function() {
        $('#carousel').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          itemWidth: 130,
          itemMargin: 5,
          item:3,
          asNavFor: '#slider'
        });

        $('#slider').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          sync: "#carousel"
        });
      });
</script>

Please provide more information of the issue. From what I can see only now is that there is no definition of the `featured_image`. Everything else seems ok. — drip, Jul 18 '17 at 08:47
You need to tell us what error you see. Share your store url if possible @Newbie_prog — Dezefy, Jul 18 '17 at 20:39

score 0 · Answer 1 · answered Jul 19 '17 at 08:09

It looks like you have added jQuery library twice.

<script src="//cdn.shopify.com/s/files/1/2149/4693/t/7/assets/jquery-1.11.2.min.js?18364480765274061922" type="text/javascript"></script> {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}

If you load jQuery more than once in a page it may create conflict and your script may not work. jquery-1.11.2.min.js and jquery.min.js is same thing just different version.

Also the shopify theme may have already included jquery. If it has , you donot need to add it anymore.

On the next line i can see you tried to load flexslider plugin twice.

{{ 'jquery.flexslider.js' | asset_url | script_tag }} {{ 'jquery.flexslider-min.js' | asset_url | script_tag }}

both are same thing , the second one is just minified version of the library. So get rid of one of them.

Then try and let me know if your problem is solved or not. Regards

still the same issue, even i get rid of it the redundant @MashR — Newbie_prog, Jul 20 '17 at 03:16
@Newbie_prog, Can you download the theme and upload it on dropbox and share it with me. I will fix the issue and upload it back for you. — Dezefy, Jul 20 '17 at 15:49

Slider Images in product.liquid of Shopify

1 Answers1