Dfrnhjy

I'm trying to convert html template to Magento 2.1.3. I started my conversion using blank-sass from Snowdog. Some CSS was sucessfully implemented but I can't figure out many points. One of them is how to implement Idangero.us Swiper to show some promotions in frontend.

Here is what I did:

I created a swiper.phtml file in /Magento_Theme/templates

He is how it looks like:

<my_theme_root>/Magento_Theme/templates/swiper.phtml
------------
<section id="home" class="home section image-slider">
 <div class= "home-slider text-center swiper-container-horizontal">
 <!-- Additional required wrapper -->
 <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px)$
 <!-- Slides -->
 <div class="swiper-slide swiper-slide-active" (...)
 <img src='<?php echo $this->getViewFileUrl('images/slider/slide1.jp
 </div>
 <div class="swiper-slide swiper-slide-active" (...) same as above for slide 2
 </div>
 </div>
 <!-- If we need pagination -->
 <div class="swiper-pagination"></div>

 <!-- If we need navigation buttons -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>

 <!-- If we need scrollbar -->
 <div class="swiper-scrollbar"></div> 
</div>
</section>

<script>
 require([
 'js/main.js',
        ‘js/vendor',
    ], function ($) {
        jQuery(document).ready(function () 
 var swiper = new Swiper ('.home.slider', 
 pagination: '.home-pagination',
 paginationClickable: true,
 nextButton: '.home-slider-next',
 prevButton: '.home-slider-prev'
            );
        );
</script>
---------------

I also provided a requirejs-config.js in the root of my theme:

/requirejs-config-js

He is how it looks like:

-----------------
var config = 

 deps:[
 "js/main",
 ],
 paths: 
 "home-slider": 
 “swiper”: "Magento_Theme/js/vendor”,
 
 ,
 shim: 
 'home-slider': 
 deps: ['jquery']
 
 
;
-----------------

I edited main.js in my web/js/main.js like this:

require(['jquery', 'home-slider'],function($)
 $(document).ready(function() 
 $("after.body.starts").addClass("home.slider").Swiper(items: 1);
 );
)
------------------

Inside default.xml I placed this code:

--------------
<referenceContainer name="home.slider">
 <block class="MagentoFrameworkViewElementTemplate" name="swiper.js" template="Magento_Theme::swiper.phtml" />
 </referenceContainer>
------------------

And in 1column.xml inside Magento_Theme/page_layout/1column.xml I wrote:

--------------------
<?xml version="1.0"?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Mag$
 <update handle="empty"/>
 <referenceContainer name="page.wrapper">
 <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-h$
 <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
 <container name="home.slider" as="Swiper" label="Slider box container" after="page.top" htmlTag="div" htmlClass="home-slid$
 <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htm$
 </referenceContainer>

</layout>
------------------

In web/js I have main.js and vendor folder containing:

bootstrap.js 
jquery-1.11.2.min.js 
jquery.countdown.min.js 
jquery.inview.js 
swiper.min.js
bootstrap.min.js 
jquery.countdown.js 
jquery.countTo.js 
swiper.js 
wow.js

I aditionally checked pub/static/frontend/vendor/theme/en_US and my struture there is as follow:

Magento_modules
jquery
js
images
fonts
web

In web folder, I can only find css folder. My js are in the root of en_US folder.

I don't know what I'm possibly doing wrong. I used gulp deploy to deploy the theme after adding all the files in source folder as instructions on blank-sass.

If someone can help me to achieve that, I read the documents about requirejs but I'm not sure I totally understand it.

Thank you,
Gabriela

You can check this solution, I implemented it for own project.
https://drive.google.com/open?id=0B0RPgoCrwp8tdTZnSzJZdC1QWkE

and template example

<div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide">
 SLIDE 1
 </div>

 <div class="swiper-slide">
 SLIDE 2
 </div>

 <div class="swiper-slide">
 SLIDE 3
 </div>
 </div>
 <div class="swiper-pagination"></div>

 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div>

<script type="text/x-magento-init">
 
 ".swiper-container": 
 "IdangerousSwiper": 
 "nextButton": ".swiper-button-next",
 "prevButton": ".swiper-button-prev",
 "pagination": ".swiper-pagination"
 
 
 
 </script>