從功能外部控制BX滑塊

Question

我在一個頁面上有多個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

Answer 1

因此，我玩過一次游戲，使其發揮作用只需要一點樂趣 。 說這是您的HTML：

<h3>Slideshow 1</h3>
<ul id="slider1" class="slider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
</ul>

<h3>Slideshow 2</h3>
<ul id="slider2" class="slider">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
</ul>

<h3>Slideshow 3</h3>
<ul id="slider3" class="slider">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
</ul>

這是您的JS：

var sliders = [];

$('.slider').each(function () {
    sliders.push($(this).bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: true,
      pause: 2000
    }));
});

sliders[1].goToSlide(1);

訣竅是在初始化每個滑塊之前進入循環，然后對每個slider都有一個引用，使您可以選擇其中一個並訪問其API。 請參見以下示例： http : //jsfiddle.net/wosszb0w/3/