Slider in a Webflow rich text - advanced function

Here you can see a rather ridiculously large code for a small effect. This is what sometimes happens when you combine 2 scripts. Just too much, for too little.

(Still under development as of March 15th 2023)

Here you can see a rather ridiculously large code for a small effect. This is what sometimes happens when you combine 2 scripts. Just too much, for too little.

‍
The code below is just ... I mean it looks beautiful (It is based on my "Custom Webflow Slider Starter Kit" article):

‍

<script>
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_ARROW_WRAPPERS = '.splide__arrows'
  const S_LEFT_ARROWS = '.splide__arrow--prev'
  const S_RIGHT_ARROWS = '.splide__arrow--next'

  // Animation css
  const CSS_OUT = {
    'opacity': '0.5'
  }
  const CSS_IN = {
    'opacity': '1.0'
  }


  // Main function
  $( S_WRAPPERS + ':visible' ).each(function() {

    // Local elements
    let $_this_list = $(this).find( S_LIST )
    let $_these_slides = $_this_list.find( S_SLIDES )
    let $_this_arrow_wrapper = (this).find( S_ARROW_WRAPPERS )
    let $_left_arrow = $(this).find( S_LEFT_ARROWS )
    let $_right_arrow = $(this).find( S_RIGHT_ARROWS )

    // Local variables
    let n_of_slides = $_these_slides.length
    let w_of_slide, x_position_min, x_position_max
      
    function update_local_variables() {

      w_of_slide = parseFloat( parseFloat( $_these_slides.outerWidth(true) ).toFixed(3) )
      x_position_min = w_of_slide * .35
      x_position_max = w_of_slide * (n_of_slides - 1) - w_of_slide * .35
        
    }
    update_local_variables()
    $( window ).resize( update_local_variables )
    
      
    // Local function
    if ( n_of_slides == 1 ) {

      $_this_arrow_wrapper.hide()

    } else {

      $(this).on('touchstart mousedown', function(e) {

        setTimeout(function() {

          let x = element_x_position({ $_element: $_this_list })

          if ( x <= x_position_min ) {
   
            $_left_arrow.animate(CSS_OUT, 350)
            $_right_arrow.animate(CSS_IN, 350)
     
          } else if ( x >= x_position_max ) {
   
            $_right_arrow.animate(CSS_OUT, 350)
            $_left_arrow.animate(CSS_IN, 350)
     
          } else { 
   
            $_left_arrow.animate(CSS_IN, 350)
            $_right_arrow.animate(CSS_IN, 350)
     
          }
            
        }, 250)
        
      })
      $_left_arrow.animate(CSS_OUT, 0)

    }

  })


  // Helper function
  function element_x_position({ $_element } = {}) {

    return parseFloat( Math.abs( $_element.css("transform").split(",")[4].trim() ).toFixed(3) )
   
  }


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

FAQs

You still have an open question about BMG.studio 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

Book a Call Email >