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".

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

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>
  • Still i have same issues. Is anything changes in swiper.min.js? – Rat Jun 15 '18 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. – Sukumar Gorai Jun 15 '18 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 Jun 15 '18 at 12:03
  • Can you check the pub path if its added to that particular directoy or not? – Sukumar Gorai Jun 15 '18 at 12:43
  • Can you add swiper.min.js.map to the same js directory and also to pub/static......Magento_Theme/js? – Sukumar Gorai Jun 15 '18 at 12:45
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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