自定义 jquery/js 滑块动画

Question

正在寻找构建自定义 jquery/js 滑块的方法：从左到右的示例方向：

<div id="slider">
   <div class="item"> Left fade in 1</div>
   <div class="item"> Left fade in 2</div>
   <div class="item"> At center 1</div>
   <div class="item"> At center 2</div>
   <div class="item"> At center 3</div>
   <div class="item"> Right fade out 1</div>
   <div class="item"> Right fade out 2</div>
</div>

中间有 3 个元素，每侧有 2 个元素使动画具有淡入淡出 in/out..

也许有人可以提供一些示例如何编写？问候。

Answer 1

尝试使用 slickslider 并使用变换来变换边缘。我做了一个 jsFiddle 来说明我的意思。也许它可以帮助你走上正轨。

.item.left
{
    -webkit-transform: perspective(600px) rotateY(45deg) scale(0.8);
}

.item.right
{
    -webkit-transform: perspective(600px) rotateY(-45deg) scale(0.8);
}

自定义 jquery/js 滑块动画

Custom jquery/js slider animation

html

javascript

css

jquery

slider