光滑的滑块用角带重叠图像

Question

我在实施角形表带和光滑的旋转木马时遇到问题。我有用于处理标签的角带和用​​于不同标签的每个内容的光滑旋转木马。 问题是，当我更改选项卡时，它会一张一张地显示光滑轮播的图像。 我无法弄清楚问题是什么，有人可以帮助我吗？ 照片中的问题：

我的标签控制器：

app.controller('TabsVinoteca', function($scope, $templateCache) {   

 $scope.tabs = [
    {title:'VINOS', 
    page: 'views/vinoteca/vinos.html'},
    {title:'ESPUMANTES',
    page: 'views/vinoteca/espumantes.html'}
    ];
});

我的光滑轮播控制器代码：

app.controller('SlickWinery', function ($scope, $timeout) {
  $scope.slickConfig3Loaded = true;
  $scope.slickCurrentIndex = 1;
  $scope.slickConfig = {
  autoplay: false,
  dots: false,
  nextArrow: '<span class="right slick-next"><i class="glyphicon glyphicon-chevron-right"></i></span>',
  prevArrow: '<span class="left slick-prev"><i class="glyphicon glyphicon-chevron-left"></i></span>',
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
  {
    breakpoint: 768,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 3
    }
   },
  {
    breakpoint: 480,
    settings: {
       arrows: false,
       centerMode: true,
       centerPadding: '40px',
       slidesToShow: 1
    }
  }
   ],
          method: {},
          event: {}
 };


 });

我的html代码：

<div class="container-fluid" id="sliderBrands" ng-controller="SlickWinery">

<h4>VINOS</h4>

 <div class="col-lg-12 hoverGray">
  <slick class="slider" settings="slickConfig" ng-if="slickConfig3Loaded" dots="true">
    <div>   
      <a href="#" tabindex="1"><img ng-src="img/home/bodegas/1.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="2"><img ng-src="img/home/bodegas/2.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="3"><img ng-src="img/home/bodegas/3.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="4"><img ng-src="img/home/bodegas/4.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="5"><img ng-src="img/home/bodegas/5.png"/></a>
    </div>
   </slick>
  </div>
</div>

Answer 1

$timeout(function () {
    slickConfig1Loaded = true;
});

ng-if 用于防止 Slick 过早初始化。尝试将true 赋值置于超时状态，以便在选项卡式内容有机会为其容器提供尺寸之后，将其置于调用堆栈的底部。 Slick 需要它们的尺寸。

////

另外，在您的 JS 中您说 slickConfig3Loaded，但在 HTML 中您说 slickConfig1Loaded，这是代码中的错字还是您的 Stack 问题？