Return to Solutions Overview <-

"Build your custom Slider in Webflow" Starter Kit

This is the general code structure I would and do use for each of my custom sliders from now on. This can of course be tailored in any way imaginable.

(Still under development as of March 15th 2023)

var Webflow = Webflow || []
Webflow.push(function () { // Run all the code after the site is fully loaded.  

  // * Start of custom slider code *

  // Global strings
  const S_WRAPPERS = '.splide' // Your classes/ attributes come here
  const S_LIST = '.splide__list'
  const S_SLIDES = '.splide__slide'
  const S_ARROWS = '.splide__arrows'

  // Main function
  $( S_WRAPPERS ).each(function() {

    // Glocal elements
    let $_this_list = $(this).find( S_LIST )
    let $_these_arrows = $(this).find( S_ARROWS )

    $_this_list.find( S_SLIDES ).each(function() {

      // Local elements
      let $_this_slide = $(this)

      // Your code here



  // * End of custom slider code *
}) // The end.

You can do cool stuff like that


You still have an open question about and how we operate. Chances are good that you will find what you are looking for here:

Why does this FAQ exist?

Well. As of Wednesday, March 15th 2023, I think this component looks really cool.

Can I clone this FAQ component?

Yes. Yes you can. You can do so -> here <-

Still have questions?

It's okay to reach out. Use either email or our calendar tool