控制BX滑块从外部的功能

我在一个页面上有多个BX滑块。我不想在JavaScript中给每个滑动条一个显式的ID(如文档所建议的)，因为可能有未知数量的滑动条。每个旋转木马在标记中都有一个ID。

滑块也会在某个断点处改变配置。

我希望能够告诉滑块在页面加载时转到某个幻灯片(如$('#slider1').goToSlide(2))。

然而，.goToSlide()方法并没有像那样暴露，因为它没有被分配给那个ID(只有.js-carousel类)。

那么我怎么才能做到这一点呢?

$ ->
  $('.js-carousel').each ->
    # 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 ) ->
      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 = ->
      # 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 ) ->
      if $slider.data('carousel-type') == type
        return true
      else
        return false
    # Init or reload the slider
    slider = ( option, reload ) ->
      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: ->
        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: ->
        if sliderType( 'multi' )
          $slider.destroySlider()
    # Load different sliders for large screens
    enquire.register "screen and (min-width:768px)",
      match: ->
        if !sliderType( 'multi' )
          if !sliderLoaded
            slider('large')
          else
            slider('large', true)
    # Custom slider controls
    $wrapper.on 'click', '.js-carousel-control', (e) ->
      # Prevent normal behaviour in case it's a link
      # Although it should be a <button>
      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