How include the Swiper slider in Magento2?Magento 2: How to upload a banner slider on magento homepage?Magento 1: Banner slider not showing?slider getting stucked after refreshMagento 2.1 creating a slider / CarousalMagento add Image Slider getting unserialize(): Errorhow to add home page banner slider programmatically using js code not extension magento 2?How to make Owl Carousel slider fully responsive for all devices magento 2?How include the Swiper slider html in Magento2.2.6?Magento 1.9 Banner Slider is not displayed on the frontendScript is not calling on Homepage Banner slider
What force enables us to walk? Friction or normal reaction?
Efficiently finding furthest two nodes in a graph
Applications of pure mathematics in operations research
Why does one get the wrong value when printing counters together?
What clothes would flying-people wear?
When encrypting twice with two separate keys, can a single key decrypt both steps?
How close to the Sun would you have to be to hear it?
Should I put my name first, or last in the team members list
Prepare a user to perform an action before proceeding to the next step
How to have poached eggs in "sphere form"?
How do I make my photos have more impact?
How should I quote American English speakers in a British English essay?
What is my clock telling me to do?
Why are we moving in circles with a tandem kayak?
How does Asimov's second law deal with contradictory orders from different people?
What is this kind of symbol meant to be?
What would the United Kingdom's "optimal" Brexit deal look like?
Exploiting the delay when a festival ticket is scanned
Would it take any sort of amendment to make DC a state?
Can living where Earth magnet ore is abundent provide any protection?
Did Vladimir Lenin have a cat?
How to efficiently shred a lot of cabbage?
Should I intervene when a colleague in a different department makes students run laps as part of their grade?
May a hotel provide accommodation for fewer people than booked?
How include the Swiper slider in Magento2?
Magento 2: How to upload a banner slider on magento homepage?Magento 1: Banner slider not showing?slider getting stucked after refreshMagento 2.1 creating a slider / CarousalMagento add Image Slider getting unserialize(): Errorhow to add home page banner slider programmatically using js code not extension magento 2?How to make Owl Carousel slider fully responsive for all devices magento 2?How include the Swiper slider html in Magento2.2.6?Magento 1.9 Banner Slider is not displayed on the frontendScript is not calling on Homepage Banner slider
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom: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".
magento2 banner-slider slideshow
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
|
show 9 more comments
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".
magento2 banner-slider slideshow
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
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
|
show 9 more comments
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".
magento2 banner-slider slideshow
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
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".
magento2 banner-slider slideshow
magento2 banner-slider slideshow
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
edited Jun 15 '18 at 8:54
Chirag Patel
3,7527 silver badges28 bronze badges
3,7527 silver badges28 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
asked Jun 15 '18 at 7:53
RatRat
5597 silver badges25 bronze badges
5597 silver badges25 bronze badges
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
|
show 9 more comments
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
Check the swiper.min.js is loaded or not on your page?
– Sukumar Gorai
Jun 15 '18 at 8:28
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
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
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
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
Is it loaded on require config Js?
– Sukumar Gorai
Jun 15 '18 at 9:22
|
show 9 more comments
3 Answers
3
active
oldest
votes
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
appdesignfrontendVendorsSampleMagento_Themewebjsswiper.min.js
and requirejs-config.js to
appdesignfrontendVendorsSampleMagento_Themerequirejs-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>
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
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
|
show 4 more comments
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
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
add a comment |
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
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f230070%2fhow-include-the-swiper-slider-in-magento2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
appdesignfrontendVendorsSampleMagento_Themewebjsswiper.min.js
and requirejs-config.js to
appdesignfrontendVendorsSampleMagento_Themerequirejs-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>
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
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
|
show 4 more comments
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
appdesignfrontendVendorsSampleMagento_Themewebjsswiper.min.js
and requirejs-config.js to
appdesignfrontendVendorsSampleMagento_Themerequirejs-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>
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
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
|
show 4 more comments
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
appdesignfrontendVendorsSampleMagento_Themewebjsswiper.min.js
and requirejs-config.js to
appdesignfrontendVendorsSampleMagento_Themerequirejs-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>
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
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
appdesignfrontendVendorsSampleMagento_Themewebjsswiper.min.js
and requirejs-config.js to
appdesignfrontendVendorsSampleMagento_Themerequirejs-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>
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
edited Jun 15 '18 at 13:15
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
answered Jun 15 '18 at 10:54
Sukumar GoraiSukumar Gorai
7,6843 gold badges8 silver badges32 bronze badges
7,6843 gold badges8 silver badges32 bronze badges
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
|
show 4 more comments
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
Still i have same issues. Is anything changes in swiper.min.js?
– Rat
Jun 15 '18 at 11:35
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
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
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 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
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
|
show 4 more comments
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
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
add a comment |
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
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
add a comment |
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
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
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
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
edited Nov 2 '18 at 20:12
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
answered Nov 2 '18 at 17:15
Ezequiel AlbaEzequiel Alba
1169 bronze badges
1169 bronze badges
add a comment |
add a comment |
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
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
add a comment |
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
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
add a comment |
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
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
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
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
answered Jul 21 at 12:29
Mano MMano M
1,1804 silver badges25 bronze badges
1,1804 silver badges25 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- 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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f230070%2fhow-include-the-swiper-slider-in-magento2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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