Question

我目前正在开发一个在大多数网页上使用Carousels的 Angular ， jQuery 网站，我有一个图库页面，目前让用户选择他们想要的图库查看。我正在使用此页面上的Slick同步滑块，我正在使用ng-show/hide来显示用户已选择的相应图库。

html和js如下：

$(document).ready(function() {
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });


  $('.slider-nav').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true
  });

});

<div ng-repeat="gallery in galleries">
  <div ng-show="gallery.showGallery">
    <div class="row">
      <div class="slider-for">
        <div ng-repeat="path in gallery.galleryImages">
          <img src="images/{{path}}" style="width:200px;">
        </div>
      </div>
    </div>
    <div class="row">
      &nbsp;
    </div>
    <div class="slider-nav">
      <div ng-repeat="path in gallery.galleryImages">
        <img src="images/{{path}}" style="width:200px;">
      </div>
    </div>
  </div>
</div>

当用户单击该按钮时，它会将对象的show Gallery属性更改为true，所有其他属性为false，所有这些属性最初都设置为true，但在页面加载时，除了一个库的showGallery属性之外的所有属性都设置为false

目前显示和隐藏有效，但如果您使用旋转木马的导航部分然后选择其他图库，则在您再次开始使用导航之前，主要部分不会显示图片。我已经发现，由于 jQuery 部分在准备好初始化轮播时运行，所有的画廊都在共享同一个监听器，所以当你使用它的导航时，它会循环通过其他画廊的图像也在后台。

我需要知道是否有人在一个页面上使用多个同步滑块并找到修复或遇到类似问题。理想情况下，我想避免不得不忘记使用angular去除DOM元素，然后重建它并运行光滑的函数，还希望避免使用cookie或会话对象来重新加载用户新的页面选择作为主要选择。

如何使用具有角度的多个光滑同步滑块以避免在同步滑块之间切换时不显示图像？

0 个答案: