Slick - 名称为 prev/next 幻灯片的箭头
Slick - arrows with name of prev/next slide
我正在尝试制作带有 prev/next 幻灯片标题的箭头(使用数据 att "data-slide-name")。我通过互联网搜索,但没有找到我需要的任何东西。我有一张幻灯片(名称 1),上一张幻灯片(猫),下一张幻灯片(狗)。我想在箭头中显示幻灯片名称。例如,我附上codepen(带scss):
https://codepen.io/michal-gajda/pen/MWwzvvp
HTML
<div class="slide">
<div class="slide__title">
<h2>Lorem ipsum</h2>
</div>
<div class="slide__items">
<div class="slide__item" data-slide-name="Cat">
<div class="slide__box">
<div class="slide__inner">
<div class="slide__content">
<h3>Cat</h3>
<p>Lorem ipsum ..</p>
</div>
</div>
</div>
</div>
<div class="slide__item" data-slide-name="Name1">
<div class="slide__box">
<div class="slide__inner">
<div class="slide__content">
<h3>Name1</h3>
<p>Lorem ipsum.. </p>
</div>
</div>
</div>
</div>
<div class="slide__item" data-slide-name="Dog">
<div class="slide__box">
<div class="slide__inner">
<div class="slide__content">
<h3>Dog</h3>
<p>Lorem ipsum... </p>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$('.slide__items').slick({
dots: false,
arrows: true,
infinite: true,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
});
SCSS
.slide {
padding: 0 20px;
background-color: #EEE8E2;
&__title {
text-align: center;
position: relative;
padding-top: 70px;
h1,
h2,
h3 {
font-size: 30px;
color: #7A6857;
margin: 0;
line-height: 1;
letter-spacing: 0.1em;
}
}
&__watermark-text {
display: none;
position: absolute;
left: 0;
top: 0;
margin: 4% 0 0 -5%;
svg {}
}
&__items {}
&__item {
padding: 70px 20px 70px+20px+70px 20px;
outline: transparent;
}
&__box {
width: 100%;
max-width: 800px;
margin: 0 auto;
box-shadow: 0px 13px 16px 6px rgba(149, 135, 121, 0.25);
}
&__inner {
display: flex;
flex-wrap: wrap;
background-color: white;
position: relative;
z-index: 10;
}
&__content {
width: 43%;
padding: 90px 60px;
h1,h2,h3 {
font-size: 24px;
text-transform: uppercase;
margin: 0 0 1em 0;
letter-spacing: 0.1em;
line-height: 1;
}
p {
line-height: 1.4;
}
}
&__img {
width: 57%;
background-position: 50%;
background-size: cover;
}
&__buttons {
font-size: 24px;
margin-top: 0.7em;
}
&__btn {
display: inline-block;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.75em 0;
color: #B19777;
transition: 0.3s;
cursor: pointer;
position: relative;
}
.slick-arrow {
height: 100px;
width: 200px;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
color: white;
font-size: 22px;
padding: 1em;
font-weight: 600;
text-transform: uppercase;
background-color: #CEBDAD;
outline: transparent;
transition: 0.3s;
position: absolute;
top: calc(50% - 50px);
z-index: 50;
cursor: pointer;
&:hover {
background-color: #B19777;
}
}
.slick-prev {
left: -20px;
}
.slick-next {
right: -20px;
}
}
使用 init afterChange
个事件
$('.slide__items').on('init afterChange', function(e, slick){
let currentSlick = $('.slick-current.slick-active', slick.$slideTrack)
let prevName = currentSlick.prev().data('slide-name')
let nextName = currentSlick.next().data('slide-name')
slick.$prevArrow.text(prevName)
slick.$nextArrow.text(nextName)
});
工作演示
我正在尝试制作带有 prev/next 幻灯片标题的箭头(使用数据 att "data-slide-name")。我通过互联网搜索,但没有找到我需要的任何东西。我有一张幻灯片(名称 1),上一张幻灯片(猫),下一张幻灯片(狗)。我想在箭头中显示幻灯片名称。例如,我附上codepen(带scss):
https://codepen.io/michal-gajda/pen/MWwzvvp
HTML
<div class="slide">
<div class="slide__title">
<h2>Lorem ipsum</h2>
</div>
<div class="slide__items">
<div class="slide__item" data-slide-name="Cat">
<div class="slide__box">
<div class="slide__inner">
<div class="slide__content">
<h3>Cat</h3>
<p>Lorem ipsum ..</p>
</div>
</div>
</div>
</div>
<div class="slide__item" data-slide-name="Name1">
<div class="slide__box">
<div class="slide__inner">
<div class="slide__content">
<h3>Name1</h3>
<p>Lorem ipsum.. </p>
</div>
</div>
</div>
</div>
<div class="slide__item" data-slide-name="Dog">
<div class="slide__box">
<div class="slide__inner">
<div class="slide__content">
<h3>Dog</h3>
<p>Lorem ipsum... </p>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$('.slide__items').slick({
dots: false,
arrows: true,
infinite: true,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
});
SCSS
.slide {
padding: 0 20px;
background-color: #EEE8E2;
&__title {
text-align: center;
position: relative;
padding-top: 70px;
h1,
h2,
h3 {
font-size: 30px;
color: #7A6857;
margin: 0;
line-height: 1;
letter-spacing: 0.1em;
}
}
&__watermark-text {
display: none;
position: absolute;
left: 0;
top: 0;
margin: 4% 0 0 -5%;
svg {}
}
&__items {}
&__item {
padding: 70px 20px 70px+20px+70px 20px;
outline: transparent;
}
&__box {
width: 100%;
max-width: 800px;
margin: 0 auto;
box-shadow: 0px 13px 16px 6px rgba(149, 135, 121, 0.25);
}
&__inner {
display: flex;
flex-wrap: wrap;
background-color: white;
position: relative;
z-index: 10;
}
&__content {
width: 43%;
padding: 90px 60px;
h1,h2,h3 {
font-size: 24px;
text-transform: uppercase;
margin: 0 0 1em 0;
letter-spacing: 0.1em;
line-height: 1;
}
p {
line-height: 1.4;
}
}
&__img {
width: 57%;
background-position: 50%;
background-size: cover;
}
&__buttons {
font-size: 24px;
margin-top: 0.7em;
}
&__btn {
display: inline-block;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.75em 0;
color: #B19777;
transition: 0.3s;
cursor: pointer;
position: relative;
}
.slick-arrow {
height: 100px;
width: 200px;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
color: white;
font-size: 22px;
padding: 1em;
font-weight: 600;
text-transform: uppercase;
background-color: #CEBDAD;
outline: transparent;
transition: 0.3s;
position: absolute;
top: calc(50% - 50px);
z-index: 50;
cursor: pointer;
&:hover {
background-color: #B19777;
}
}
.slick-prev {
left: -20px;
}
.slick-next {
right: -20px;
}
}
使用 init afterChange
个事件
$('.slide__items').on('init afterChange', function(e, slick){
let currentSlick = $('.slick-current.slick-active', slick.$slideTrack)
let prevName = currentSlick.prev().data('slide-name')
let nextName = currentSlick.next().data('slide-name')
slick.$prevArrow.text(prevName)
slick.$nextArrow.text(nextName)
});
工作演示