多个flexsliders不工作

Question

在我的rails应用程序中，我在主页上有一个Flexslider，然后在一个about页面上有一个我希望自定义的不同于主页上的那个。现在，about页面上的那个行为与主页上的行为完全相同。我按照flexsliders info page上的说明进行操作，但似乎仍无法使其正常工作。

ERB：

<div id="collection-slider" class="flexslider"> 
  <ul class="slides">
    <% if @collection_images.present? %>
      <% @collection_images.each do |image| %>
        <li>
            <%= image_tag(image.image(:large), rel: @collection.name) %>
        </li>
    <% end %>
<% end %>

jQuery

$(window).load(function() {
  $('.flexslider').flexslider({
  animation: "slide"
});

$('#collection-slider').flexslider({
  animation: "slide"
  directionNav: true,
});