slick.js

      <script>
        $('.slider-for').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: true,
          nextArrow: '<i class="arrow-right"><%= image_tag("/right.gif", :class => "", :alt => "arrow right") %></i>',
          prevArrow: '<i class="arrow-left"><%= image_tag("/left.gif", :class => "", :alt => "arrow left") %></i>',
          fade: true,
          asNavFor: '.slider-nav'
        });
        $('.slider-nav').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          asNavFor: '.slider-for',
          arrows: false,
          centerMode: true,
          focusOnSelect: true,
          variableWidth: true,
        });
      </script>