I am using swiperjs to make a slideshow section for dawn but it won't work...Any suggestions?

[gthegreat]

<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<!-- Slider main container -->

<div class="swiper">

    <!-- Additional required wrapper -->

     <div class="swiper-wrapper">

        {%- if section.settings.image != blank -%}

            <img srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%} {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%} {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%} {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%} {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%} {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}" src="{{ section.settings.image | img_url: '1500x' }}" sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)" alt="{{ section.settings.image.alt | escape }}" loading="lazy" width="{{ section.settings.image.width }}" height="{{ section.settings.image.height }}">

        {%- else -%}

            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}

        {%- endif -%}

        <!-- Slides -->

        {% for block in section.blocks %}

  {% case block.type %}

    {% when 'slide' %}

      <div class="swiper-slide" {{ block.shopify_attributes }}>

        {{ block.settings.image | img_url: '2048x' | img_tag }}

      </div>

   {% endcase %}

{% endfor %}

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

<script>

    const swiper = new Swiper(".swiper", { // Optional parameters

        direction: "vertical",

        loop: true,

        // If we need pagination

        pagination: {

            el: ".swiper-pagination"

        },

        // Navigation arrows

        navigation: {

            nextEl: ".swiper-button-next",

            prevEl: ".swiper-button-prev"

        },

        // And if we need scrollbar

        scrollbar: {

            el: ".swiper-scrollbar"

        }

    });

</script>

<style>

    .swiper {

        width: 100%;

        height: 100%;

    }

</style>

{% schema %}

{

    "name": "Slideshow",

    "tag": "section",

    "class": "slideshow",

    "settings": [

        {

            "type": "text",

            "id": "title",

            "label": "Slideshow"

        }

    ],

    "blocks": [

        {

            "name": "Slide",

            "type": "slide",

            "settings": [

                {

                    "type": "image_picker",

                    "id": "image",

                    "label": "Image"

                }

            ]

        }

    ]

}

{% endschema %}

THANK U

Also here is a link to the swiperjs website if that helps : https://swiperjs.com/

🙂 Ase

[made4Uo]

@gthegreat 

Hi, 

No need for external library for slideshow. Just copy paste the code  - link the video description. No app needed as well. Buttons were updated

[CarlosPinedo]

Use this one

https://www.youtube.com/watch?v=zGL2sBgBLoI&t=333s&ab_channel=Made4uo

[BenjB]

Just put your Swiper initialisation code in the window load event and it should work.

{% javascript %}

window.addEventListener('load', function() {

    const swiper = new Swiper(".swiper", {

    loop: true

  });

});

{% endjavascript %}

Also our .swiper div should not have a parent div with using css flex display to avoid troubles.

[BenEIGHT]

Did you ever get Swiper.js to work in the Dawn theme? I'm trying to build a slider in Dawn and the markup comes out perfectly but Swiper isn't working like it should.

I'm wondering if I should try a different solution?

[aramtch]

Having the exact same issue as BenEight (above) - the script is being loaded correctly, the markup is valid, and Swiper is being initialized successfully, yet all placing all of my slides are being bundled into one slide.

Note: this happens even when I copy/paste the exact demo code from swiperjs.com, so I know it's not an unclosed div or something.

[BenjB]

Yes I did in Dawn theme no problem. 

If you import Swiper CSS and JS in theme.liquid, if the parent div of your Swiper slider html code doesnt have a CSS flex position, and if you initialize a new Swiper instance in a JS load event, then it should work without any issues. 

If you're still facing issues, that means that something is wrong in your code, but not related to Shopify (check markup, differents swipers having the same classname, css, js code, etc.).

Hope I helped 🙂

[aramtch]

Got it - thanks BenjB!

[PinguinoLetal]

Hi BenjB !
Are you part of Swiper team? Thanks so much! its such a great tool 🙂
I suceeded in creating a customizable section with it! But my issue is that the script would require extra identificators when trying to use more than one swiper per page. I tried using {{section.id}}, but no luck... thought my JS level is quite basic, so maybe I didnt did it properly. Any Idea?  Many, many thanks!