如何使slick.js工作？

Question

我有很多带导航栏的滑块：

// default slider. user see that after reloading page
.col-md-12.default-view
    .single-item
      - item_images(@item, :medium).each do |img|
        %div
          = image_tag img
    .col-md-12.images-nav
      - item_images(@item, :thumb).each do |img|
        .preview
          = image_tag img
// hidden sliders
- @item.colors.each do |c|
    .col-md-12.selected-view{class: "selected_preview_#{c.id}"}
      .single-item
        - c.images.each do |img|
          %div
            = image_tag img.pic.url(:medium)
        %div
          = image_tag @item.main_pic.url

      .col-md-12.images-nav
        - c.images.each do |img|
          .preview
            = image_tag img.pic.url(:thumb)
        .preview
          = image_tag @item.main_pic.url(:thumb)

我的目标是只显示一个滑块，可以通过选择标签选择（实际上这部分工作正常）。当用户试图选择所需的滑块时，问题就是一种奇怪的行为。

例如：

• 用户使用这些滑块进入页面
• 他/她可以看到滑块和导航栏的正常工作
• 选择颜色后（通过选择标签），用户可以看到滑块和损坏的导航栏的正常工作

默认滑块： 和破碎的滑块：

为了初始化slick.js我使用这个代码（是的，我知道DRY）：

  $(document).ready(function(){
   $('.default-view .single-item').slick({
    fade: true,
    prevArrow: '<i class="fa fa-arrow-left col-md-1"></i>',
    nextArrow: '<i class="fa fa-arrow-right col-md-offset-12"></i>',
    asNavFor: '.default-view .images-nav'
  });
  $('.default-view .images-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.default-view .single-item',
    arrows: false,
    centerMode: true,
    focusOnSelect: true
  })
  $('.selected-view').each(function(){
    console.log(this);
    $(this).children('.single-item').slick({
      fade: true,
      prevArrow: '<i class="fa fa-arrow-left col-md-1"></i>',
      nextArrow: '<i class="fa fa-arrow-right col-md-offset-12"></i>',
      asNavFor: $(this).children('.images-nav')
    });
    $(this).children('.images-nav').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: $(this).children('.single-item'),
      arrows: false,
      centerMode: true,
      focusOnSelect: true
    })
  })
});