Question

我有一个carousel_helper.rb文件，应该允许我通过一次调用<%= carousel_for(images) %>功能将轮播放入视图中。（取自https://www.toptal.com/ruby-on-rails/rails-helper-bootstrap-carousel）

module CarouselHelper
  def carousel_for(images)
    Carousel.new(self, images).html
  end

  class Carousel
    def initialize(view, images)
      @view, @images = view, images
      @uid = SecureRandom.hex(6)
    end

    def html
      content = safe_join([indicators, slides, controls])
      content_tag(:div, content, id: uid, class: 'carousel slide', data_ride: 'carousel')
    end

    private

    attr_accessor :view, :images, :uid
    delegate :link_to, :content_tag, :image_tag, :safe_join, to: :view

    def indicators
      items = images.count.times.map { |index| indicator_tag(index) }
      content_tag(:ol, safe_join(items), class: 'carousel-indicators')
    end

    def indicator_tag(index)
      options = {
        class: (index.zero? ? 'active' : ''),
        data: { 
          target: uid, 
          slide_to: index
        }
      }

      content_tag(:li, '', options)
    end

    def slides
      items = images.map.with_index { |image, index| slide_tag(image, index.zero?) }
      content_tag(:div, safe_join(items), class: 'carousel-inner')
    end

    def slide_tag(image, is_active)
      options = {
        class: (is_active ? 'item active' : 'item'),
      }

      content_tag(:div, image_tag(image), options)
    end

    def controls
      safe_join([control_tag('left'), control_tag('right')])
    end

    def control_tag(direction)
      options = {
        class: "#{direction} carousel-control",
        data: { slide: direction == 'left' ? 'prev' : 'next' }
      }

      icon = content_tag(:i, '', class: "glyphicon glyphicon-chevron-#{direction}")
      control = link_to(icon, "##{uid}", options)
    end
  end
end

这产生的HTML似乎与我在bootstrap网站和其他来源的基本示例中找到的完全匹配。一切顺利，除了指标没有链接到任何幻灯片。然而，他们循环播放旋转木马。如果我在视图中使用纯HTML添加轮播，指标工作正常。任何想法为什么会发生这种行为？

Answer 1

我有完全相同的问题:-)既然没有人回答，我花了一点时间才弄明白，这里的解决方案对我有用。

轮播指示器中的问题似乎是我们需要将数据目标属性传递给选择器，这意味着ID必须以＃为前缀

所以基本上只需改变这个

def indicator_tag(index)
  options = {
    class: (index.zero? ? 'active' : ''),
    data: { 
      target: uid, 
      slide_to: index
    }
  }

到这个

def indicator_tag(index)
  options = {
    class: (index.zero? ? 'active' : ''),
    data: {
      target: "##{uid}",
      slide_to: index
    }
  }

欢呼声

Bootstrap轮播指示器循环但不链接

1 个答案: