Gsyfuy

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>