<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_SLIDER_WRAPPERS = '[bmg_custom-slider = "slider"]'
  const S_SLIDES = '.w-slide'
  const S_LEFT_ARROWS = '[bmg_custom-slider = "left"]'
  const S_RIGHT_ARROWS = '[bmg_custom-slider = "right"]'

  // CSS
  const CSS_SHOW = {
    'opacity': '100%',
    'transition-property': 'opacity',
    'transition-duration': '350ms',
    'transition-timing-function': 'ease'
  }
  const CSS_HIDE = {
    'opacity': '0%',
    'transition-property': 'opacity',
    'transition-duration': '350ms',
    'transition-timing-function': 'ease'
  }


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

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

    // Get correct values
    let slide_width_array = correct_widths({ $_element: $_these_slides })
    $(window).resize(() => {
        slide_width_array = correct_widths({ $_element: $_these_slides })
    }) 
    let n_of_slides = $_these_slides.length

    // Set click values
    let min = 0
    let max = n_of_slides - 1
    let tracker = 0

      
    // Glocal main function
    $_right_arrow.click(function() {

        tracker++
        if ( tracker < max ) {
            $_left_arrow.css( CSS_SHOW )
        } else {
            tracker = max
            $_right_arrow.css( CSS_HIDE )
        }
        move_to_this_position({ $_element: $_these_slides, n: tracker, array: slide_width_array })
        
    })

    $_left_arrow.click(function() {

        tracker--
        if ( tracker > min ) {
            $_right_arrow.css( CSS_SHOW )
        } else {
            tracker = min
            $_left_arrow.css( CSS_HIDE )
        }
        move_to_this_position({ $_element: $_these_slides, n: tracker, array: slide_width_array })
        
    })   

  })


  // Helper functions

  // Move to this position
  function move_to_this_position({ $_element, n, array } = {}) {

    let x = (array[n] * -1) + 'px'
    $_element.css({
        'transform': 'translateX(' + x + ')',
        '-webkit-transition': '-webkit-transform .35s ease'
    })
      
  }


  // Correct width values
  function correct_widths({ $_element } = {}) {

    let array = [0] // Set array
    let x = 0
        
    $_element.each(function() {

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

      // Generate correct values
      x += $_this_slide.outerWidth()
      array.push( x )

    })

    return array

  }


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