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:

I created a swiper.phtml file in <my_theme_root>/Magento_Theme/templates

He is how it looks like:

<my_theme_root>/Magento_Theme/templates/swiper.phtml

getViewFileUrl('images/slider/slide1.jp

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

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'             });         });

---

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

<my_theme_root>/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:

---

------------------

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

---

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

------------------

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