javascript - 从功能外部控制 BX slider

Question

我在一个页面上有多个 BX slider 。我不想在 JavaScript 中为每个 slider 提供一个显式 ID ( as the documentation suggests )，因为可能存在未知数量的 slider 。每个轮播在标记中都有一个 ID。

slider 还会在某些断点处更改配置。

我希望能够告诉 slider 在页面加载时转到某个幻灯片(例如 $('#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 之前进入循环，然后您就可以引用每个 slider ，从而允许您选择一个 slider 并访问其 API。请参阅此示例:http://jsfiddle.net/wosszb0w/3/