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赋值置于超时状态，以便在选项卡式内容有机会为其容器维度提供后，将其置于callstack的底部。光滑需要它们的尺寸。

////

此外，在您的JS中，您说slickConfig3Loaded，但在您说的slickConfig1Loaded的HTML中，这是代码中的拼写错误还是您的堆栈问题？

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

1 个答案: