使用角度光滑的轮播组件实现分层幻灯片

问题描述

我正在使用

请提供建议。

解决方案

你应该可以通过CSS转换来做到这一点。基本上，缩小非活动幻灯片并为其提供正确的z索引会产生这种效果。例如：

  $（'。center'）。slick（{arrows：true，centerMode：true，infinite：true，centerPadding：' 250px'，slidesToShow：1，speed：500，dots：true，}）;  

  .content {width：800px;保证金：自动; background-color：#EBEBEB;身高：480px;} .slick-slide：not（.slick-center）{z-index：0; transform：scale（0.8）;} .slick-active.slick-center + .slick-slide + .slick-slide {z-index：1;} .slick-active.slick-center + .slick-slide，.slick-center +。 slick-cloned {z-index：2;} .slick-center {z-index：3;} .slick-slide {position：relative;转换：转换80ms;}。slide img {position：relative; transform：translateX（-50％）; left：50％;} .slick-prev {left：10％！important;} .slick-next {right：10％！important;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min。 js>< / script>< link href =http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.cssrel =stylesheet/>< link href = http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick-theme.css =stylesheet/>< script src =http://cdn.jsdelivr.net/jquery .slick / 1.5.5 / slick.min.js>< / script>< div class =content> < div class =center> < DIV> < div class =slide> < img src =http://lorempixel.com/540/303/abstract/> < / DIV> < / DIV> < DIV> < div class =slide> < img src =http://lorempixel.com/540/303/animals/> < / DIV> < / DIV> < DIV> < div class =slide> < img src =http://lorempixel.com/540/303/business/> < / DIV> < / DIV> < DIV> < div class =slide> < img src =http://lorempixel.com/540/303/cats/> < / DIV> < / DIV> < DIV> < div class =slide> < img src =http://lorempixel.com/540/303/city/> < / DIV> < / DIV> < DIV> < div class =slide> < img src =http://lorempixel.com/540/303/food/> < / DIV> < / DIV> < / div>< / div>  

示例是不使用角度光滑，但原则应该是相同的。

I am using angular-slick (which is based on jquery based slick) to implement carousel control. I have requirement to implement the layerd slides i.e. At a time one slide should display and two slides should be shown half hidden at left and right. On click prev/nex the underneeth slide should come at top and top one should go underneeth.

I was trying to customize it using css/code however not able to figure out how to do. Following is mockups for my requirement. I also checked out the sample given at http://vasyabigi.github.io/angular-slick/

Please advice.

解决方案

You should be able to do this via CSS transforms. Basically, scaling down the inactive slides and giving them proper z-indexes results in this effect. For example:

$('.center').slick({
  arrows: true,
  centerMode: true,
  infinite: true,
  centerPadding: '250px',
  slidesToShow: 1,
  speed: 500,
  dots: true,
});

.content {
  width: 800px;
  margin: auto;
  background-color: #EBEBEB;
  height: 480px;
}
.slick-slide:not(.slick-center) {
  z-index: 0;
  transform: scale(0.8);
}
.slick-active.slick-center+.slick-slide+.slick-slide {
  z-index: 1;
}
.slick-active.slick-center+.slick-slide,
.slick-center+.slick-cloned {
  z-index: 2;
}
.slick-center {
  z-index: 3;
}
.slick-slide {
  position: relative;
  transition: transform 80ms;
}
.slide img {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}
.slick-prev {
  left: 10% !important;
}
.slick-next {
  right: 10% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick-theme.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>

<div class="content">
  <div class="center">
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/abstract" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/animals" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/business" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/cats" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/city" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/food" />
      </div>

    </div>
  </div>
</div>

The example is not using angular-slick, but the principle should be the same.

这篇关于使用角度光滑的轮播组件实现分层幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！