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

Store Design
1

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

{%- if section.settings.image != blank -%} {{ section.settings.image.alt | escape }} {%- else -%} {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {% for block in section.blocks %} {% case block.type %} {% when 'slide' %}
{{ block.settings.image | img_url }}
{% endcase %} {% endfor %}

I have a schema and all of that good stuff but nothing is wrong in it.

2

Hi @gthegreat

Created a slider using flickity :), you can checkout my blog, this works on any theme.

https://www.bluish.io/shopify/shopify-product-slider

obviously if you want to change the contents, you can code it. You can also click on my example shopify store which has the example slider.

1 Like
3

@JohnFromJotting

HI thank you for your advice& time however do you know how to make an image slideshow? (similar to the one that is on the debut theme and supply theme)

I already made one a product slider

ps your blog is really cool

:confused:

4

Hi @gthegreat ,

Do you mean the thumbnail slider? Can you point me to the correct element

5

@JohnFromJotting

’ Yes a thumbnail slider I attached an example from the supply theme below

gthegreat_0-1633404786300.png
gthegreat_0-1633404786300.png1909×526 59.8 KB

thank you for your help

6

Oh you mean a slideshow for the homepage?

7

@JohnFromJotting

oh my bad yes I meant a slideshow for the home page :slightly_smiling_face:

8

Hi @gthegreat

Might take some time, but If you give me a day, ill make a blog for it. Personally I’ve tried both flickity and swiper. I find flickity much better.

1 Like
9

@JohnFromJotting thank you so much,may your business forever prosper :slightly_smiling_face:

10

Hi @gthegreat

Sorry been busy, checkout what I’ve created so far, anything you want me to add?

Link to slideshow

The below is the current customizations I’ve created, I’ll create the blog tomorrow with all the things you need to do to create it.

Bluish_0-1633524787239.png
Bluish_0-1633524787239.png308×371 3.13 KB

Bluish_1-1633524800335.png
Bluish_1-1633524800335.png321×1064 40 KB

1 Like
11

@JohnFromJotting

Hey, this looks great! Do you mind adding an auto slide option and a fade effect? If those two effects arent available through flickity then don’t worry about it.

Thank you and I look forward to the blog post:)

I appreciate your help.

12

Hi @gthegreat

It currently does have autoplay, but it stops if you hover over it, I’ll add a setting to auto-play even if hovered. What you currently see is fade effect, but what ill do is add another setting to turn it off.

1 Like
13

@JohnFromJotting

Okay thank you so much

14

Blog done, check it out :slightly_smiling_face: https://www.bluish.io/shopify/how-to-create-a-slideshow-on-shopfiy

2 Likes
15

@JohnFromJotting

thank you

16

@Bluish , I did everything from your blog post, But your css is with Debut theme, so I added mine in base.css for Dawn.

With Dawn, no text and button in the middle of image. (just a line under the image), Also the image (Carousel is very big), I tried to change the height without success.

Is it possible to update your blog post for Dawn theme also? Another question do I need a licence to use flickity or is it open source?

Thank you.

If you want to check my shop with the slideshow

https://cbdskincarehk.myshopify.com

PW: fleude

17

Hi @San21

Mind giving me access so I can check it out, I think there may be some conflict with classes.

For me i just tried my code into dawn and works fine

preview of dawn theme below.

https://n2g50zghdx3e9et3-59166949547.shopifypreview.com

18

Yes please send me a request.

https://cbdskincarehk.myshopify.com/

Thank you,

19

If you need to contact me

ecozen88@gmail.com

20

@San21 Sent.