Swiper JS

  • miles1991-1327595727190228994

    Miles

    3 months ago

    Has anyone installed SwiperJS that is willing to share how to set it up?
    I'm adding the script and stylesheet in the head assets, then running a custom action on load. I have the attributes (data-swiper, data-swiper-wrapper, and data-swiper-slide) attached to the relevant elements, but I can't get it to work.

    Attached some images, including error in console log.

    Any help appreciated πŸ™
    1327595728033419355-image.png
    1327595727358136354-image.png
    1327595727806795919-image.png
  • lucaswillmott-1327643377067491338

    Lucas W

    3 months ago

  • lucaswillmott-1327643771910750341

    Lucas W

    3 months ago

    for my init function I just have this since I've added the classes (.swiper, .swiper-wrapper, .swiper-slide) onto the divs, then I'm using onload lifecycle to trigger the custom action
    1327643772024000612-Screenshot_2025-01-11_at_14.21.34.png
  • lucaswillmott-1327644120034054237

    Lucas W

    3 months ago

    [I have it working](https://fuchsia_sly_moore_verbal_finch.toddle.site/), except the animation, for some reason Toddle is suppressing the native Swiper animations for the effect modules and I haven't figured out why yet, I rebuilt the same in [Webflow](https://preview.webflow.com/preview/test-f9ce3e?utm_medium=preview_link&utm_source=designer&utm_content=test-f9ce3e&preview=45badc9e6a3aaa32202a6272b2c5e18c&workflow=preview) with custom code and [that seems to work fine](https://test-f9ce3e.webflow.io/)
    πŸ”₯1
  • lucaswillmott-1327652386084360364

    Lucas W

    3 months ago

    nvm, [got it working](https://pink_yoda_puzzled_elephant.toddle.site/), I rebuilt it in another project, this project seems to be a little cursed as I had another problem with it in another thread, likely due to me adding other stuff bc I was playing around - heres the [preview](https://toddle.dev/projects/pink_yoda_puzzled_elephant/branches/main/components/HomePage)
    πŸ”₯1
  • miles1991-1327944977287745628

    Miles

    3 months ago

    Thanks @Lucas W . I'll be able to take a look at the preview tomorrow.

    To add the classes, do you just create the class and set the condition to true by default?
  • lucaswillmott-1327945551957725245

    Lucas W

    3 months ago

    I don't believe theres any need to set something to true, I just add the class in the right panel and then you can see it's active on the element on the left panel, seemed to do the trick
    1327945552079618058-Screenshot_2025-01-12_at_10.20.37.png
  • miles1991-1327994362352767008

    Miles

    3 months ago

    Awesome thanks πŸ‘ hopefully I'll get this working tomorrow. Appreciate your help πŸ˜ƒ
    πŸ‘1
  • leonmarseglia-1342970688365137963

    Leon Marseglia

    1 month ago

    this was so helpful @Lucas W thanks! quick question... How do i style the paginations? i can't seem to get it working and i style it on toddle then on the preview in new tab it goes to default blue style bg etc.
  • lucaswillmott-1342973743726592090

    Lucas W

    1 month ago

    Hey @Leon Marseglia, usually when I build custom sliders I either write the custom css to override whatever styles the library puts on the pagination by default, or I build by own pagination (if its got some complex styling), and then bind the clicks to the actual pagination which I hide
  • leonmarseglia-1342999701477130360

    Leon Marseglia

    1 month ago

    thanks @Lucas W . I tried writing my own custom css but still no luck! It's only simple styling
  • leonmarseglia-1343000372154990694

    Leon Marseglia

    1 month ago

    Here's toddle vs on browser:
    white vs blue dot. also the custom action code:
    1343000371425050696-Screenshot_2025-02-22_at_23.23.06.png
    1343000371781435614-Screenshot_2025-02-22_at_23.23.26.png
    1343000372083556393-Screenshot_2025-02-22_at_23.23.53.png
  • lucaswillmott-1343180252288909372

    Lucas W

    1 month ago

    Hm weird, you got a staging link?
  • lucaswillmott-1343265031428767799

    Lucas W

    1 month ago

    I'm just seeing this πŸ˜…
    1343265031256805481-Screenshot_2025-02-23_at_16.54.55.png
  • leonmarseglia-1343280805203411069

    Leon Marseglia

    1 month ago

    that's my auth redirect! just DM'd you login details πŸ™‚ @Lucas W
    πŸ‘1
  • lucaswillmott-1343325171892752424

    Lucas W

    1 month ago

    hm even looking in the staging it's kinda hard to debug, I'm not too familar with swipers pagination technique with the render bullets, I mainly used Slick slider previously so I just used custom CSS to override the libraries generated pagination, not too sure how I can help without being in the project πŸ˜… Strange theres a difference in Toddle vs Browser though, since what's cool about toddle is you can actually render the slider within the app, so there shouldn't be a difference between that and the staging link πŸ€”
  • lucaswillmott-1343325635317203027

    Lucas W

    1 month ago

    It looks like it could be more accessibility focused too, with the numbers being rendered and the blue (usually default colour for focusing), might be some extra settings you can configure in the sswiper init which will hide these
  • sanedealer-1344029038200488007

    Edwin Paul

    1 month ago

    Hey, could it be because the swiper stylesheet is loaded after your custom CSS? Have you tried the !important property?

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.