Install Swiper on Grav

Archive
1

Hi, It’s been awhile since I try to add Swiper (http://idangero.us/swiper/get-started) to my Grav website,

They say to add this html code
— html

... ... ``` So I added this one to the user hemes\antimatter emplates\home.html.twig --- {% block stylesheets %} {% do assets.addCss('theme://css/swiper.min.css') %} 
{% endblock %}
{{ assets.css() }}

{% block javascripts %}

    {% do assets.addJs('theme://js/swiper.min.js') %}                                                                           
{% endblock %} 
{{ assets.js() }}

{% endblock head %}

Then they say to add this code to html layout
--- html
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</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>

So I added this one to the user hemes\antimatter emplates\home.html.twig just before the {% endblock %} and .

I also added what is necessary on the user hemes\mytheme\css\home.css
— css
.swiper-container {
width: 600px;
height: 300px;
}

Then they say: 
--- 
Finally, we need to initialize Swiper in JS. There are few options/places to do that:

The best option will be in inline script or in script file that is included in the very end of body (right before closing </body> tag):
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
    
    // If we need pagination
    pagination: '.swiper-pagination',
    
    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })        
  </script>
</body>

But I don’t know where I need to place that and actually the slideshow looks like this:
Capture30
I can’t click anywhere on the slideshow and slide doesn’t slide.
Thank so much in advance for who can help me :slight_smile:

2

Hi
I don’t know anything about this this plugin specifically but in general you can add that script code into your twig template file or if it’s going to be used over multiple templates it might be easier to create a .js file and call that from the twig template(s).

You would add those lines within the {% block %} commands - probably at the end of the file between the end of the HTML and the block tags like this:

</div>

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
    
    // If we need pagination
    pagination: '.swiper-pagination',
    
    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev', 
    
    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })        
  </script>

{% endblock %}
3

Hello,

You can also put all your javascript that you’ll need on every pages in a file (ie: script.js) and then, add it in your template :

    {% block javascripts %}

        {% do assets.addJs('theme://js/swiper.min.js') %}
         {% do assets.addJs('theme://js/script.js') %}                                                                           
    {% endblock %} 
    {{ assets.js() }}
---
4

Thank you so much for your time guys,
I try as you say but it still doesn’t work, I do not succeed for find where the problem is originated.

I show you where I put my codes. You may see where my problems come from,
→ → → I added arrows where I added code. ← ← ←
Here is in my twig template file (user/themes/antimatter/templates/home.html.twig) :
— twig

{% block head %} {% if header.title %},{{ header.title|e('html') }} | {% endif %},{{ site.title|e('html') }} {% include 'partials/metadata.html.twig' %} 
{% block stylesheets %}
    {% do assets.addCss('theme://css/pure-0.5.0/grids-min .css', 103) %}
    {% do assets.addCss('theme://css-compiled/nucleus.css', 102) %}
    {% do assets.addCss('theme://css-compiled/template.css', 101) %}
    {% do assets.addCss('theme://css/custom.css', 100) %}
    {% do assets.addCss('theme://css/home.css', 100) %}

→ → → {% do assets.addCss(‘theme://css/swiper.min.css’) %} ← ← ←
{% do assets.addCss(‘theme://css/font-awesome.min.css’, 100) %}
{% do assets.addCss(‘theme://css/slidebars.min.css’) %}

    {% if browser.getBrowser == 'msie' and browser.getVersion == 10 %}
        {% do assets.addCss('theme://css/nucleus-ie10.css') %}
    {% endif %}
    {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
        {% do assets.addCss('theme://css/nucleus-ie9.css') %}
        {% do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}
    {% endif %}
{% endblock %}
{{ assets.css() }}

{% block javascripts %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %}
    {% do assets.addJs('theme://js/antimatter.js') %}

→ → → {% do assets.addJs(‘theme://js/swiper.min.js’) %} ← ← ←
{% do assets.addJs(‘theme://js/slidebars.min.js’) %}
{% endblock %}
{{ assets.js() }}

{% endblock head %}

``` And this is between the end of the HTML and the block tags : --- twig {% block bottom %} {{ assets.js('bottom') }}

→ → → ← ← ←

{% endblock %}
``` Here is the code on the page where I want to add the slider (user/pages/05.home/article1/home.md) : --- html

→ → →

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
← ← ←

→ → → ← ← ←

``` And there is the .css (user/themes/mytheme/css/home.css) : --- css /* Flexbox gallery */ gallery { padding: .5vw; display: -ms-flexbox; -ms-flex-wrap: wrap; -ms-flex-direction: column; -webkit-flex-flow: row wrap; flex-flow: row wrap; display: -webkit-box; display: flex; max-width: 1000px; margin: 0 auto; } gallery div { -webkit-box-flex: auto; -ms-flex: auto; flex: auto; width: 400px; margin: .5vw; } gallery div img { width: 100%; height: auto; } @media screen and (max-width: 400px) { gallery div { margin: 0; } gallery { padding: 0; }

}
↓ ↓ ↓
/* Slider */
.swiper-container {
width: 300px;
height: 300px;
}
↑ ↑ ↑

Let me know if you see what causes this.

The Grav community is really superb :)
5

Hello

Is there a link where we could see it live ?

For now, my first guess would be that you create two objects Swiper().
You could probably delete :

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        grabCursor: true
        direction: 'horizontal'
    });

Do you have any js error in your console when you are on your homepage ?