PricingBlog

Slider in Toddle - Swiper.js

  • vaughtton-1278394121140305930

    Vaughtton

    1 year ago

    ¡Hey there! We have a project that we're considering migrating to toddle as a learning exercise.

    Our main feature is an infinite slider that right now is made on swiper.js, and the carrousel package is at the moment not customisable enough for what we're trying to create.

    Anyone has any experience on integrating external libraries for sliders? 🙂
  • max.kayr-1278399347826098238

    Max

    1 year ago

    You can add swiper.js to Toddle either via script tag or custom action for a bit more control. Or you could create the functionality in pure Toddle. There is not much to it 😊
  • vaughtton-1278652975861993505

    Vaughtton

    1 year ago

    ¿How could I recreate that in Toddle? That would be interesting 🙂
  • vaughtton-1278654300805005343

    Vaughtton

    1 year ago

    Maaaaybe content for a future video? 🙂
  • max.kayr-1278801843308462133

    Max

    1 year ago

    Well, I don't do videos. Might be a suggestion for the Toddle team 😊
    Basically, a slider is a div with overflow:hidden, which holds multiple divs inside that have the same size (the slides). You can only see one slide at a time, because of the overflow: hidden. Now you can bind events like touchmove or wheel to the outer container and move the slides around based on those events
  • max.kayr-1278802103917084697

    Max

    1 year ago

    The swipe functionally of the Spark Calendar package works that way, if you want to take a look