Flickity.js gallery crashes on load

Multi tool use
Multi tool use












0















I am trying to load a simple js based gallery - Flickity.js



As per mentioned in the example, i tried loading up the gallery which works perfectly fine .



But randomly, the gallery crashes upon page load:



enter image description here



the code that i use to initiate the gallery:



<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
</script>


I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .



 $( document ).ready(function() {
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
});


the outcome of this is, it shows flickity is not a function.



why is this happening?










share|improve this question





























    0















    I am trying to load a simple js based gallery - Flickity.js



    As per mentioned in the example, i tried loading up the gallery which works perfectly fine .



    But randomly, the gallery crashes upon page load:



    enter image description here



    the code that i use to initiate the gallery:



    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    <script>
    $('.main-carousel').flickity({
    // options
    cellAlign: 'left',
    contain: true,
    pageDots: false,
    });
    </script>


    I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .



     $( document ).ready(function() {
    $('.main-carousel').flickity({
    // options
    cellAlign: 'left',
    contain: true,
    pageDots: false,
    });
    });


    the outcome of this is, it shows flickity is not a function.



    why is this happening?










    share|improve this question



























      0












      0








      0








      I am trying to load a simple js based gallery - Flickity.js



      As per mentioned in the example, i tried loading up the gallery which works perfectly fine .



      But randomly, the gallery crashes upon page load:



      enter image description here



      the code that i use to initiate the gallery:



      <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
      <script>
      $('.main-carousel').flickity({
      // options
      cellAlign: 'left',
      contain: true,
      pageDots: false,
      });
      </script>


      I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .



       $( document ).ready(function() {
      $('.main-carousel').flickity({
      // options
      cellAlign: 'left',
      contain: true,
      pageDots: false,
      });
      });


      the outcome of this is, it shows flickity is not a function.



      why is this happening?










      share|improve this question
















      I am trying to load a simple js based gallery - Flickity.js



      As per mentioned in the example, i tried loading up the gallery which works perfectly fine .



      But randomly, the gallery crashes upon page load:



      enter image description here



      the code that i use to initiate the gallery:



      <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
      <script>
      $('.main-carousel').flickity({
      // options
      cellAlign: 'left',
      contain: true,
      pageDots: false,
      });
      </script>


      I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .



       $( document ).ready(function() {
      $('.main-carousel').flickity({
      // options
      cellAlign: 'left',
      contain: true,
      pageDots: false,
      });
      });


      the outcome of this is, it shows flickity is not a function.



      why is this happening?







      javascript jquery html flickity






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 8 at 21:07









      James Z

      11.1k71935




      11.1k71935










      asked Dec 29 '18 at 16:11









      titustitus

      51




      51
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Try using



          $(window).on('load', function() {
          // your code here
          });


          since $(document).ready is fired only when DOM (HTML) is loaded.



          Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):



          <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
          <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
          <script>
          $(window).on('load', function() {
          $('.carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
          adaptiveHeight: true
          });
          });
          </script>


          http://jsfiddle.net/pycfs5e8/



          If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):



          <script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>





          share|improve this answer


























          • tried the same , the issue remains . <script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>

            – titus
            Dec 30 '18 at 4:04













          • Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL

            – Rashomon
            Dec 30 '18 at 11:03











          • Hey there , i found that the issue is with this library - Juicer.io <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script> how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .

            – titus
            Dec 30 '18 at 12:39













          • Have a look at the source code here : [link](www.shadesproperties.ae)

            – titus
            Dec 30 '18 at 12:43













          • You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code

            – Rashomon
            Dec 30 '18 at 13:09











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971172%2fflickity-js-gallery-crashes-on-load%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          Try using



          $(window).on('load', function() {
          // your code here
          });


          since $(document).ready is fired only when DOM (HTML) is loaded.



          Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):



          <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
          <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
          <script>
          $(window).on('load', function() {
          $('.carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
          adaptiveHeight: true
          });
          });
          </script>


          http://jsfiddle.net/pycfs5e8/



          If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):



          <script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>





          share|improve this answer


























          • tried the same , the issue remains . <script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>

            – titus
            Dec 30 '18 at 4:04













          • Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL

            – Rashomon
            Dec 30 '18 at 11:03











          • Hey there , i found that the issue is with this library - Juicer.io <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script> how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .

            – titus
            Dec 30 '18 at 12:39













          • Have a look at the source code here : [link](www.shadesproperties.ae)

            – titus
            Dec 30 '18 at 12:43













          • You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code

            – Rashomon
            Dec 30 '18 at 13:09
















          0














          Try using



          $(window).on('load', function() {
          // your code here
          });


          since $(document).ready is fired only when DOM (HTML) is loaded.



          Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):



          <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
          <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
          <script>
          $(window).on('load', function() {
          $('.carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
          adaptiveHeight: true
          });
          });
          </script>


          http://jsfiddle.net/pycfs5e8/



          If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):



          <script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>





          share|improve this answer


























          • tried the same , the issue remains . <script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>

            – titus
            Dec 30 '18 at 4:04













          • Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL

            – Rashomon
            Dec 30 '18 at 11:03











          • Hey there , i found that the issue is with this library - Juicer.io <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script> how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .

            – titus
            Dec 30 '18 at 12:39













          • Have a look at the source code here : [link](www.shadesproperties.ae)

            – titus
            Dec 30 '18 at 12:43













          • You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code

            – Rashomon
            Dec 30 '18 at 13:09














          0












          0








          0







          Try using



          $(window).on('load', function() {
          // your code here
          });


          since $(document).ready is fired only when DOM (HTML) is loaded.



          Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):



          <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
          <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
          <script>
          $(window).on('load', function() {
          $('.carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
          adaptiveHeight: true
          });
          });
          </script>


          http://jsfiddle.net/pycfs5e8/



          If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):



          <script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>





          share|improve this answer















          Try using



          $(window).on('load', function() {
          // your code here
          });


          since $(document).ready is fired only when DOM (HTML) is loaded.



          Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):



          <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
          <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
          <script>
          $(window).on('load', function() {
          $('.carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
          adaptiveHeight: true
          });
          });
          </script>


          http://jsfiddle.net/pycfs5e8/



          If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):



          <script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Dec 31 '18 at 10:24

























          answered Dec 29 '18 at 19:35









          RashomonRashomon

          367212




          367212













          • tried the same , the issue remains . <script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>

            – titus
            Dec 30 '18 at 4:04













          • Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL

            – Rashomon
            Dec 30 '18 at 11:03











          • Hey there , i found that the issue is with this library - Juicer.io <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script> how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .

            – titus
            Dec 30 '18 at 12:39













          • Have a look at the source code here : [link](www.shadesproperties.ae)

            – titus
            Dec 30 '18 at 12:43













          • You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code

            – Rashomon
            Dec 30 '18 at 13:09



















          • tried the same , the issue remains . <script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>

            – titus
            Dec 30 '18 at 4:04













          • Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL

            – Rashomon
            Dec 30 '18 at 11:03











          • Hey there , i found that the issue is with this library - Juicer.io <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script> how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .

            – titus
            Dec 30 '18 at 12:39













          • Have a look at the source code here : [link](www.shadesproperties.ae)

            – titus
            Dec 30 '18 at 12:43













          • You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code

            – Rashomon
            Dec 30 '18 at 13:09

















          tried the same , the issue remains . <script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>

          – titus
          Dec 30 '18 at 4:04







          tried the same , the issue remains . <script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>

          – titus
          Dec 30 '18 at 4:04















          Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL

          – Rashomon
          Dec 30 '18 at 11:03





          Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL

          – Rashomon
          Dec 30 '18 at 11:03













          Hey there , i found that the issue is with this library - Juicer.io <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script> how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .

          – titus
          Dec 30 '18 at 12:39







          Hey there , i found that the issue is with this library - Juicer.io <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script> how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .

          – titus
          Dec 30 '18 at 12:39















          Have a look at the source code here : [link](www.shadesproperties.ae)

          – titus
          Dec 30 '18 at 12:43







          Have a look at the source code here : [link](www.shadesproperties.ae)

          – titus
          Dec 30 '18 at 12:43















          You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code

          – Rashomon
          Dec 30 '18 at 13:09





          You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code

          – Rashomon
          Dec 30 '18 at 13:09


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971172%2fflickity-js-gallery-crashes-on-load%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          RADxmDzCEjYLNg,JfGy5n8JJB,biM08Jgl38c ti
          zyFE,3J wpCQ2j1LOzWQoyb9FGB6,h Lrb9NlyCYp C PkykAznxSuMV l,Wh674EPy

          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas