使用 angular slick carousel 组件的分层幻灯片实现

Posted 2023-05-07

【中文标题】使用 angular slick carousel 组件的分层幻灯片实现

【英文标题】：Layered slides implementation using angular slick carousel component

【发布时间】：2015-07-17 14:07:18

【问题描述】：

我正在使用angular-slick（基于jquery的slick）来实现轮播控制。我有实现分层幻灯片的要求，即一次应该显示一张幻灯片，并且应该在左侧和右侧半隐藏地显示两张幻灯片。在单击 prev/nex 时，underneeth 幻灯片应位于顶部，顶部的幻灯片应位于 underneeth。

我尝试使用 css/code 对其进行自定义，但不知道该怎么做。以下是满足我要求的模型。我还查看了http://vasyabigi.github.io/angular-slick/ 提供的样本

请指教。

【参考方案1】：

您应该能够通过 CSS 转换来做到这一点。基本上，缩小非活动幻灯片并给它们适当的 z-index 会产生这种效果。例如：

$('.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>

例子中没有使用angular-slick，但原理应该是一样的。

【讨论】：

太棒了，有时我觉得我需要学习很多关于 css 的东西:-) 有什么建议来学习高级 css 吗？