• Whats the right way to use third party libraries?

    I tried to do it descriped in the docs:

    But it doenst work.

    I want to use Swiper in my Theme:

    I tried it with

    "modules": {
       "swiper.js": "node_modules/swiper/swiper-bundle.min.js"
    }
    

    in client.js i used:

    require(['swiper'], function (Swiper) {
    	
    	
    	var mySwiper = new Swiper('.swiper-container', {
    		// Optional parameters
    		direction: 'vertical',
    		loop: true,
    	  
    		// If we need pagination
    		pagination: {
    		  el: '.swiper-pagination',
    		},
    	  
    		// Navigation arrows
    		navigation: {
    		  nextEl: '.swiper-button-next',
    		  prevEl: '.swiper-button-prev',
    		},
    	  
    		// And if we need scrollbar
    		scrollbar: {
    		  el: '.swiper-scrollbar',
    		},
    	  })
    
    });
    

    The Javascript from Swiper does not load.

    Can you help me?

    I also treid to import it directly via html

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    

    and I also copied the contents of:
    https://unpkg.com/swiper@6.4.5/swiper-bundle.js

    and createt a file unter /lib/swiper-bundle.min.js. Nothing worked for me. The JS is still not loading...

    Looking forward to your answers! 🙂


    I fixed it.

    I am sorry. In my development I use grunt. But it seems that I doesnt load new libraries if installen. So I determinated the process Ctrl+C and restarted it using grunt. The librariers are loaded and the third party library works well now using:

    "modules": {
       "swiper.js": "node_modules/swiper/swiper-bundle.min.js"
    }
    
    require(['swiper'], function (Swiper) {
    
       var mySwiper = new Swiper('.swiper-container', {
          ...
          ...
          ...
       })
    }
    

Suggested Topics

  • 17
  • 7
  • 3
  • 3
  • 5
| |