我们正在使用slick carousel,使得只有
<div class='item__wrapper'>
一次只显示1个幻灯片。下面有三个items
,点击item
时,应更新slick carousel。
问题
- 当将
item__boxes
作为slick
轮播时,所有的样式都错了,所以我们不能这么做:$('.item__boxes).slick({});
- 在单击
item__boxes
中的第一个、第二个或第三个item
时,item__wrapper
总是设置为slide 3
- 如何设置
item__boxes
,使得在点击该item
时它符合我们的目标?例如,在item__boxes
中点击第二个item
,将item__wrapper
设置为第二个幻灯片。
- 在点击第一个
item
时,在item__wrapper
中设置第一张幻灯片为活动幻灯片 - 在点击第二个
item
时,在item__wrapper
中设置第二张幻灯片为活动幻灯片 - 在点击第三个
item
时,在item__wrapper
中设置第三张幻灯片为活动幻灯片 - 实现所有目标,即1-3,而不执行
$('.item__boxes).slick({});
$('.item__wrapper').slick({
infinite: true,
speed: 1500,
dots: false,
prevArrow: false,
nextArrow: false
});
$('.item__boxes').on('click', function() {
var slickIndex = $(this).attr('data-slick-index');
$('.item__wrapper').slick('slickGoTo', slickIndex);
});
.filter {
width: 100%;
height: 100%;
padding: 45px;
margin-right: -45px;
}
.item {
display: none;
position: relative;
}
.item.active {
display: block;
}
.item1 {
background-image: url("https://placeimg.com/1000/480/nature");
}
.item2 {
background-image: url("https://placeimg.com/640/480/arch");
}
.item3 {
background-image: url("https://placeimg.com/640/480/tech");
}
.item__wrapper {
max-width: 60%;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(238, 238, 238, 0.5);
}
.item__img img {
top: 0px;
position: absolute;
width: 100% !important;
opacity: 0.5;
}
.item__text {
top: 0px;
position: relative;
min-height: 100%;
line-height: 1.4;
padding-right: 70px;
z-index: 5;
display: flex;
flex-direction: column;
align-items: top;
justify-content: center;
}
.item__boxes {
display: flex;
position: relative;
opacity: 0.9;
}
.item__boxes > div {
border: 1px solid;
}
.col-padding {
padding: 16px 16px 5px 16px;
}
.col-m-12 {
width: 100%;
}
@media (min-width: 1024px) {
.col-t-6 {
width: 50%;
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="item__wrapper">
<div class="item active" id='item1'>
<div class="item__text">
<div class="filter">
<h3>Some title 1</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
<div class="item active" id="item2" >
<div class="item__text">
<div class="filter">
<h3>Some title 2</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
<div class="item active" id="item3" >
<div class="item__text">
<div class="filter">
<h3>Some title 3</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
</div>
<div class="item__boxes">
<div class="box col-m-12 col-t-6 col-padding" data-slick-index="-1">
<div>Some Title</div>
<div>Enthusiastically incubate diverse initiatives without multifunctional strategic theme areas.</div>
</div>
<div class="box col-m-12 col-t-6 col-padding" data-slick-index="0">
<div>Globally Title</div>
<div>Globally impact integrated infomediaries via seamless mindshare. </div>
</div>
<div class="box col-m-12 col-t-6 col-padding" data-slick-index="1">
<div>Distinctively Title</div>
<div>Distinctively strategize long-term high-impact ideas whereas client-centered leadership skills.</div>
</div>
</div>
item__boxes
,而应该使用单独的<div class="box col-m-12 col-t-6 col-padding">
元素。 - usernameabc