jquery - 複数のフレックススライダーが機能しない

Question

私のRailsアプリでは、ホームページに1つのFlexsliderがあり、次に、ホームページのものとは異なる方法でカスタマイズしたいaboutページに1つあります。現在、about ページの動作は、ホームページの動作とまったく同じです。flexsliders の情報ページの指示に従いましたが、まだ正しく動作していないようです。

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,
});