0

I tried to include the swiper slider js. but not working.

Step1:

I have placed the css and js in my theme folder and add the below code in requirejs-config.js

var config = { 
    map: {
        '*': {
            'swipeslider':'js/swiper.min'
        }
    }
};

Step2: add the template file banner.phtml in my theme folder

<div class="banner">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url('images/banner_img.jpg');"></div>
    </div>
</div>
</div>          
<script>
require([
    'jquery',
    'swipeslider',
], function ($) {       
         var swiper = new Swiper('.banner .swiper-container', {
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          loop:true,
          autoplay: {
            delay:5000,
          },
          simulateTouch:false,

        });        
});

But we got error message in browser console as "Swiper is not defined".

14
  • Check the swiper.min.js is loaded or not on your page? Commented Jun 15, 2018 at 8:28
  • swiper.min.js not loaded in pagesource
    – Rat
    Commented Jun 15, 2018 at 8:56
  • Did you check any other console error? Commented Jun 15, 2018 at 9:20
  • i got only one error. Swiper is not defined
    – Rat
    Commented Jun 15, 2018 at 9:21
  • Is it loaded on require config Js? Commented Jun 15, 2018 at 9:22

4 Answers 4

2

Below is my working code. Add this to your requirejs-config.js file:

var config = {
    paths: {            
            'swipeslider': "Magento_Theme/js/swiper"
        },   
    shim: {
        'swipeslider': {
            deps: ['jquery']
        }
    }
};

Then add your swiper.min.js to

app\design\frontend\Vendors\Sample\Magento_Theme\web\js\swiper.min.js

and requirejs-config.js to

app\design\frontend\Vendors\Sample\Magento_Theme\requirejs-config.js

Use the below js on your phtml instead of yours:

 <script>
    (function  () {
        require(["jquery","swipeslider"],function($) {
            $(document).ready(function() {
                var swiper = new Swiper('.banner .swiper-container', {
                                  pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true,
                                  },
                                  loop:true,
                                  autoplay: {
                                    delay:5000,
                                  },
                                  simulateTouch:false
                                });       
            });
        });
    })();
</script>
9
  • Still i have same issues. Is anything changes in swiper.min.js?
    – Rat
    Commented Jun 15, 2018 at 11:35
  • I have updated the answer. Also what is magento 2 version? If its 2.1.x then delete the _requirejs folder from pub/static/_requirejs and then deploy the contents again and try. Commented Jun 15, 2018 at 11:43
  • Hi, i have used the Magento 2.2.4. Already i deleted the pub and var folders also deploy the content. There is no folder and file (_requirejs ) under pub/static. In my console error as "ReferenceError: Swiper is not defined Source map error: request failed with status 404 Resource URL: 192.168.1.24:8080/demo/ver1/pub/static/version1529063287/… Source Map URL: swiper.min.js.map"
    – Rat
    Commented Jun 15, 2018 at 12:03
  • Can you check the pub path if its added to that particular directoy or not? Commented Jun 15, 2018 at 12:43
  • Can you add swiper.min.js.map to the same js directory and also to pub/static......Magento_Theme/js? Commented Jun 15, 2018 at 12:45
2

Did you try with adding 'Swiper' in the Require call?

For example for Vimeo api use in Magento 2, you have to do something like this:

define([
'jquery',
'vimeo-sdk',
'domReady!'
], function($, Player) {
    let vimeoInst = new Player('iframe');
});

Probably with Swiper is the same. If you check the lib/dist/src of them has a return Swiper; at the end of it.

Update: I tested and works.

define([
'jquery',
'swiper',
'domReady!'
], function($, Swiper) {
    let carousel = new Swiper('.element',{/*your parameters*/});
});

Don't put the lib/dist/src of the Swiper JavaScript inside a require/define the structure. Include it straightforward and just map it in requirejs-config.js

0

In require js:

var config = {
 map: {
            '*': {
                swiper: 'js/swiper.min',
                viewPageSwiper :  'js/viewpage-swiper',
            }
        },
        shim: {
            swiper: {
                deps: ['jquery']
            }
        }
};

In js file :

define([
        "jquery",
        "swiper"
    ],
    function ($, Swiper) {
        "use strict";

        //complete look
        var swiper = new Swiper('.complete-look-product .swiper-container', {
            slidesPerView: 'auto',
            spaceBetween: 10,
            freeMode: true,
            breakpoints: {
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 40,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 30,
                },
                470: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                }
            }
        });

In /Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/swiper.min.css" />
    </head>
</page>

Css: https://github.com/nolimits4web/swiper/tree/master/dist/css JS: https://github.com/nolimits4web/swiper/tree/master/dist/js

0

Add an argument for Requier and try again

<script>
require([
    'jquery',
    'swipeslider',
], function ($, Swiper) {       
         var swiper = new Swiper('.banner .swiper-container', {
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          loop:true,
          autoplay: {
            delay:5000,
          },
          simulateTouch:false,

        });        
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.