title: Control BX Slider from outside of function
body: <p>I have multiple BX Sliders on a page. I don't want to have to give each one an explicit ID in the JavaScript (<a href="http://bxslider.com/examples/multiple-slideshows" rel="nofollow">as the documentation suggests</a>) as there could be an unknown number of sliders. Each carousel has an ID in the markup.</p>
  
  <p>The slider also changes configuration at a certain breakpoints.</p>
  
  <p><strong>I want to be able to tell a slider to go to a certain slide on page load (something like <code>$('#slider1').goToSlide(2)</code> ).</strong></p>
  
  <p>However the <code>.goToSlide()</code> method is not exposed like that as it hasn't been assigned to that ID (only the class <code>.js-carousel</code>).</p>
  
  <p>So how can I achieve this?</p>
  
  <pre><code>$ -&gt;
  
    $('.js-carousel').each -&gt;
  
      # Flags and selector cachine
      id = '#' + $(this).attr('id')
      sliderLoaded = false
      $slider = $( id )
      $wrapper = $slider.closest('.js-carousel-wrapper')
      $body = $('body')
  
      # Load different options based on the breakpoint
      sliderOptions = ( breakpoint ) -&gt;
        switch breakpoint
          when 'large'
            bxLargeOptions =
              mode: 'fade'
              pagerCustom: id + '_pager'
              controls: false
              video: true
              adaptiveHeight: true
              # captions: true
              onSliderLoad: onSliderLoad
  
          when 'multi'
            bxMultiSmallOptions =
              controls: false
              minSlides: 2
              maxSlides: 6
              slideWidth: 128
              slideMargin: 0
              onSliderLoad: onSliderLoad
              infiniteLoop: false
              pager: false
  
          else
            bxSmallOptions =
              pagerCustom: '#pager'
              controls: false
              easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
              video: true
              adaptiveHeight: true
              # captions: true
              onSliderLoad: onSliderLoad
  
      # Call on every slider load event
      onSliderLoad = -&gt;
  
        # Set a flag
        sliderLoaded = true
  
        # get the custom next control
        sliderNext =
          $wrapper.find('.js-carousel-next')
  
        # Get the custom prev control
        sliderPrev =
          $wrapper.find('.js-carousel-prev')
  
        # Add active class to show controls
        $wrapper.addClass('is-active')
  
      # Return the slider type or false
      sliderType = ( type ) -&gt;
        if $slider.data('carousel-type') == type
          return true
        else
          return false
  
      # Init or reload the slider
      slider = ( option, reload ) -&gt;
        if reload
          $slider.reloadSlider sliderOptions( option )
        else
          $slider.bxSlider sliderOptions( option )
  
      # Load different sliders for small screens
      enquire.register "screen and (max-width:767px)",
        match: -&gt;
          if !sliderType( 'multi' )
            if !sliderLoaded
              slider()
            else
              slider( false, true )
          else
            if !sliderLoaded
              slider( 'multi' )
            else
              slider( 'multi', true )
  
        # Destroy multi sliders at larger screen sizes
        unmatch: -&gt;
          if sliderType( 'multi' )
            $slider.destroySlider()
  
      # Load different sliders for large screens
      enquire.register "screen and (min-width:768px)",
        match: -&gt;
          if !sliderType( 'multi' )
            if !sliderLoaded
              slider('large')
            else
              slider('large', true)
  
      # Custom slider controls
      $wrapper.on 'click', '.js-carousel-control', (e) -&gt;
  
        # Prevent normal behaviour in case it's a link
        # Although it should be a &lt;button&gt;
        e.preventDefault()
  
        # Get the direction stored in the data attribute
        slide = $(this).data().slide
  
        # Move the carousel
        # Default is to move to a specific slide number
        switch slide
          when 'prev' then $slider.goToPrevSlide()
          when 'next' then $slider.goToNextSlide()
          else $slider.goToSlide slide
  </code></pre>