Javascript 如何使slick.js工作？

我有许多带导航栏的滑块，如下所示：

// 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）：

$（文档）.ready（函数（）{
$（'.default view.single item'）.slick({
是的，
前箭头：“”，
下一行：''，
asNavFor:'。默认视图。图像导航'
});
$（'.default view.images nav'）.slick({
幻灯片放映：3，
幻灯片滚动：1，
asNavFor:'。默认视图。单个项'，
箭头：错，
centerMode：对，
焦点选择：正确
})
$（'.selected view'）。每个（函数（）{
console.log（this）；
$（此）.children（'.single item'）.slick({
是的，
前箭头：“”，
下一行：''，
asNavFor:$（this）.children（'.images-nav'）
});
$（此）.children（'.images nav'）.slick({
幻灯片放映：3，
幻灯片滚动：1，
asNavFor:$（this）.children（'.single item'），
箭头：错，
centerMode：对，
焦点选择：正确
})
})
});

请添加您的代码..nvmd。我不再使用前端了：）

  $(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
    })
  })
});