我正在尝试使用slick(centerMode)构建一个特殊的全角轮播:http://kenwheeler.github.io/slick/。
我的问题是,当我想查看全尺寸上的所有滑块和所有图像而没有任何浮动时,图像向左浮动。
喜欢图片
谢谢
我已经实现了滑块:通过screen> 2000px检查,您将理解我的意思。
https://jsfiddle.net/voldemort95/69ucj3zt/9/
$('.slider').slick({
slidesToShow: 4,
autoplaySpeed: 550,
rtl: false,
slidesToScroll: 2,
arrows: false,
infinite: true,
centerMode: true,
variableWidth: true,
infinite: true,
focusOnSelect: true,
touchMove: true,
});
function slickPause() {
$('.slider').slick('slickPause');
}
slickPause();
$('.slider').mouseover(function() {
$('.slider').slick('slickPlay')
});
$('.slider').mouseout(function() {
slickPause();
});
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
[class="slick-active"] {
background: black;
}
.wrap {
position: relative;
z-index: 100;
width: 100%;
height: 100%;
padding: 0 60px;
background-color: #230e2c;
-webkit-background-size: cover;
background-size: cover;
overflow: hidden;
}
.slick-activeafter{
background: red
}
.item.slick-slide.slick-center + .slick-slide {
transform:"";
/* z-index: 10; */
}
.wrap:after {
content:'';
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
}
.slider {
position: relative;
z-index: 200;
padding: 0 0px;
margin: 5rem auto;
max-width: 100%;
width: 100%;
}
.slick-arrow {
position: absolute;
top: 50%;
width: 40px;
height: 50px;
line-height: 50px;
margin-top: -25px;
border: none;
background: transparent;
color: #fff;
font-family: monospace;
font-size: 5rem;
z-index: 300;
outline: none;
}
.slick-prev {
left: -50px;
text-align: left;
}
.slick-next {
right: -50px;
text-align: right;
}
.item.slick-slide {
width: 400px;
height: 400px !important;
transition: transform .4s;
position: relative;
}
.slick-slide:after {
content:'';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid 1px #979797;
background-color: rgba(255, 255, 255, 0.11);
transition: transform .4s;
}
.item.slick-slide {
transform: scale(0.7) translate(640px);
}
.slick-slide.slick-current {
opacity: 1;
}
.item.slick-slide.slick-center + .slick-slide {
transform: scale(0.8) translate(-250px);
z-index: 10;
}
.item.slick-slide.slick-center + .slick-slide + .item.slick-slide {
transform: scale(0.7) translate(-640px);
z-index: 5;
}
.item.slick-slide.slick-active {
transform: scale(0.8) translate(250px);
}
.item.slick-slide.slick-center {
/* margin: 0 -10%; */
transform: scale(1);
z-index: 30;
}
.slick-center{
border: solid 1px #979797;
background-image: linear-gradient(to bottom, #ffffff, #d9d9d9);
}
.slick-center .description{
display: inline-block;
color : #5b1f74;
}
.slick-center .title{
color : #5b1f74;
font-size: 40px;
}
.slick-center .img{
display: inline-block;
}
.slick-slide img {
display: none;
}
p.title{
position: absolute;
text-align: center;
color: #fff;
left: 37%;
font-size: 20px;
top: 50%;
}
p.description{
position: absolute;
text-align: center;
color: #fff;
bottom: 0;
font-size: 20px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<div class="wrap">
<div class="slider">
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<div class="item">
<img src=".." class="img" style=" width: 97px;height: 155px; position: absolute;
left: 36%;" alt="">
<p class="title">TEST</p>
<p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
</div>
</div>
最佳答案
更新以上我的评论,此操作将向前和向后滑动1张幻灯片:https://jsfiddle.net/08vLok1w/
可以对其进行重构以最大程度地减少一些jQuery调用,并且如果您一次跳转多张幻灯片,它将被破坏,但这也可以内置到其中(需要在范围之外跟踪nextSlide
和currentSlide
beforeChange
方法)。
您的HTML应该保持不变,但是在下面您将找到更新的JS:
$('.slider').on('init', function(event, slick){
jQuery(".slider .slick-slide.slick-active.slick-center").next().next().next().css("transform", "scale(0.7) translate(-640px)");
jQuery(".slider .slick-slide.slick-active.slick-center").next().next().next().next().css("transform", "scale(0.7) translate(-640px)");
});
$('.slider').slick({
slidesToShow: 3,
autoplaySpeed: 5000,
rtl: false,
slidesToScroll: 2,
arrows: true,
infinite: true,
centerMode: true,
variableWidth: true,
focusOnSelect: true,
touchMove: true,
draggable: false
});
function slickPause() {
$('.slider').slick('slickPause');
}
slickPause();
$('.slider').mouseover(function() {
$('.slider').slick('slickPlay')
});
$('.slider').mouseout(function() {
slickPause();
});
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
if(nextSlide == currentSlide) { return false; }
if(nextSlide - currentSlide == 1 || nextSlide - currentSlide < -1) {
var slide1 = jQuery(`.slick-slide[data-slick-index=${nextSlide + 3}]`);
var slide2 = jQuery(`.slick-slide[data-slick-index=${nextSlide + 4}]`);
jQuery(".slider .slick-slide").css("transform", "");
jQuery(".slider .slick-slide.slick-active.slick-center").prev().css("transform", "scale(0.7) translate(640px)")
jQuery(".slider .slick-slide.slick-active.slick-center").css("transform", "scale(0.8) translate(250px)");
jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(1).css("transform", "scale(1)");
jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(1).next().css("transform", "scale(0.8) translate(-250px)");
jQuery(slide1).css("transform", "scale(0.7) translate(-640px)");
jQuery(slide2).css("transform", "scale(0.7) translate(-640px)");
console.log("next")
} else {
var slide1 = jQuery(`.slick-slide[data-slick-index=${currentSlide + 2}]`);
var slide2 = jQuery(`.slick-slide[data-slick-index=${currentSlide + 3}]`);
jQuery(".slider .slick-slide").css("transform", "");
jQuery(".slider .slick-slide.slick-active.slick-center").next().css("transform", "scale(0.7) translate(-640px)")
jQuery(".slider .slick-slide.slick-active.slick-center").css("transform", "scale(0.8) translate(-250px)");
jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(0).css("transform", "scale(1)");
jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(0).prev().css("transform", "scale(0.8) translate(250px)");
jQuery(slide1).css("transform", "scale(0.7) translate(-640px)");
jQuery(slide2).css("transform", "scale(0.7) translate(-640px)");
console.log("prev")
}
});
并添加了CSS:
.slick-arrow {
position: absolute;
top: 0;
width: calc(50% - 200px);
height: 100%;
line-height: 50px;
border: none;
background: blue;
color: #fff;
font-family: monospace;
font-size: 5rem;
z-index: 300;
outline: none;
opacity: 0;
cursor: pointer;
}