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

gthegreat
Shopify Partner
60 1 13
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>


<!-- 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",
        looptrue,

        // 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
Replies 8 (8)

made4Uo
Shopify Partner
3807 713 1129

@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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

CarlosPinedo
Tourist
5 0 2

BenjB
Shopify Partner
4 0 5

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
Shopify Partner
1 0 1

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
Visitor
2 0 1

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
Shopify Partner
4 0 5

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
Visitor
2 0 1

Got it - thanks BenjB!

PinguinoLetal
New Member
4 0 0

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!