How do I make a slideshow section for dawn2.0?

Solved
gthegreat
Excursionist
21 1 3

Here is my attempt but it won't upload....any tips are greatly appreciated.

{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'swiper-bundle.min.js' | asset_url | script_tag }}

<!-- Slider main container -->
<div class="swiper">
    <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">
        {%- 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 }}
      </div>
  {% endcase %}
{% endfor %}

      I have a schema and all of that good stuff but nothing is wrong in it.
 
 
Replies 40 (40)
Bluish
Shopify Partner
646 92 115
Hi @San21,
 
Fixed your issue, the code was working fine, there is an issue with your base.css theme, it wasn't getting all the classes for some reason.
 
To solve the issue I created a seperate css class called flickity-slideshow.css and included it in your theme.liquid. This should be easier for you. I will update the blog aswell so no one else experiences this issue.
 
ALSO please fix your logo, there is so much white space causing the header to be enormously big.
Bluish_1-1633996247691.png
 
If there is any other further functionality you want me to add please let me know.
 
 

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

San21
Excursionist
23 0 9

@Bluish Thank you so much

made4Uo
Navigator
210 11 77

Hi, 

Just want to share this slideshow with multiple designs and work with Debut and Dawn theme. Video shows the previous buttons but I update the buttons to show below. No need for app or external library. No coding experience needed

slide.jpg

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
SDBdigital
Shopify Partner
46 0 11

Hi

I tried this. Thank you.

However, the text and buttons appear below the image. See attached.

 

Store URL: spitfire-furniture.myshopify.com

password: aluminium

Screenshot 2021-10-21 at 09.37.35.png

Bluish
Shopify Partner
646 92 115

Hi @SDBdigital 

I created one for flickity, and keep it updated. You can find it here https://www.bluish.io/shopify/how-to-create-a-slideshow-on-shopfiy. Works on any theme.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

SDBdigital
Shopify Partner
46 0 11

Hi

I did try your slideshow - but couldn't figure out how to make the text larger - or to style the buttons.

 

 

Bluish
Shopify Partner
646 92 115

Hey @SDBdigital 

 

I'll add functionality to change text size, what do you mean by style button? Currently you are able to change the border and inner background 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

made4Uo
Navigator
210 11 77

Hi @SDBdigital ,

I just fix the code

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
SDBdigital
Shopify Partner
46 0 11

Hi

 

I updated the code from your site. Thank you.

URL: https://spitfire-furniture.myshopify.com/

password: aluminium

 

 

j1419
Excursionist
34 0 10

@Bluish Your slideshow has worked great for me. Would it be possible to add an image position function as well? Top, middle, bottom, center, right, etc