如何解决光滑的滑块保留默认点并添加其他点
我们可以使自定义元素具有与点相同的行为吗?我想要的是保留默认的点,但还要让其他一些元素充当点。例如,如果幻灯片2是活动的,则元素 dot-2 应该具有类 active 。单击行为也是如此,如果我单击元素.dot-3,则幻灯片3应该处于活动状态。
<div id="carousel" class="slider">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="extra-dots-Box">
<div class="dot-1 extra-dot">
<span>1</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-2 extra-dot">
<span>2</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-3 extra-dot">
<span>3</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
css
.slider-item {
border: 5px solid #333;
background: #ccc;
height: 200px;
font-size: 72px;
text-align: center;
line-height: 200px;
}
/* Slider arrows */
.slick-arrow {
z-index: 9;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
/* extra dots */
.extra-dots-Box{
display: flex;
margin-top: 100px;
margin-bottom: 100px;
}
.extra-dots-Box .extra-dot{
width: 350px;
height: 250px;
background: #111111;
color: #ffffff;
font-size: 18px;
margin-right: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.extra-dots-Box .extra-dot:hover{
cursor: pointer;
}
.extra-dots-Box .extra-dot:hover,.extra-dots-Box .extra-dot.active {
background: red;
}
jQuery
$(document).ready(function() {
var slickOpts = {
slidesToShow: 1,slidesToScroll: 1,//centerMode: true,easing: 'swing',// see http://api.jquery.com/animate/
speed: 700,dots: true,customPaging: function(slick,index) {
return '<a>' + (index + 1) + '</a>';
}
};
// Init slick carousel
$('#carousel').slick(slickOpts);
});
解决方法
jQuery(document).ready(function($) {
$('.slider-for').slick({
slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: true,dots: true,customPaging: function(slick,index) {
return '<a>' + (index + 1) + '</a>';
},asNavFor: '.slider-nav'
});
//set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
$('.slider-nav').slick({
slidesToShow: 6,asNavFor: '.slider-for',dots: false,focusOnSelect: true,responsive: [{
breakpoint: 992,settings: {
vertical: false,}
},{
breakpoint: 768,{
breakpoint: 580,slidesToShow: 3,{
breakpoint: 380,slidesToShow: 2,}
}
]
});
$('.slider-nav').on('mouseover','.slick-slide',function (e) {
var $currTarget = $(e.currentTarget),index = $currTarget.data('slick-index'),slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
});
});
.slider-item {
border: 5px solid #333;
background: #ccc;
height: 200px;
font-size: 72px;
text-align: center;
line-height: 200px;
}
/* Slider arrows */
.slick-arrow {
z-index: 9;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
/* extra dots */
.extra-dots-box{
display: flex;
margin-top: 100px;
margin-bottom: 100px;
}
.extra-dots-box .extra-dot{
width: 350px;
height: 250px;
background: #111111;
color: #ffffff;
font-size: 18px;
margin-right: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.extra-dots-box .extra-dot:hover{
cursor: pointer;
}
.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {
background: red;
}
/*For dots*/
.slick-dots {
position: absolute;
bottom: -45px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slider-nav .slick-slide.slick-current.slick-active .extra-dot {
border: 1px solid #80D6CF;
border-radius: 2px;
background-color: red;
box-shadow: 0 0 2px 0 rgba(0,0.1),0 2px 4px 0 rgba(0,0.1);
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="carousel" class="slider slider-for">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="extra-dots-box slider-nav thumb-image">
<div class="dot-1 extra-dot">
<span>1</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-2 extra-dot">
<span>2</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-3 extra-dot">
<span>3</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。