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.

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.

I'm trying to convert a 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:

<my_theme_root>/Magento_Theme/templates/swiper.phtml

  <!-- 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>                           

He is how it looks like:

var config = {

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

};

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

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Mag$ <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-h$ <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$

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///en_US and my struture there is as follow:

Magento_modules jquery js images fonts web

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

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:

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

He is how it looks like:

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

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

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

--------------
<referenceContainer name="home.slider">
            <block class="Magento\Framework\View\Element\Template" name="swiper.js" template="Magento_Theme::swiper.phtml" />
      </referenceContainer>
------------------

--------------------
<?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>
------------------

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.