光滑的滑块自定义HTML分页 [英] Slick Slider Custom HTML Paging
问题描述
是否可以像Bootstrap Carousel一样使用Slick Slider的HTML来创建自定义分页点.
Is it possible to create custom paging dots just using HTML for Slick Slider just like Bootstrap Carousel allows you to.
引导程序分页示例
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
我知道您可以像这样创建自定义点;
I know you can create custom dots like so;
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img src="'+thumb+'"></a>';
}
但是这种方法不适用于我要实现的目标.这就是我希望能够用作我的分页导航的地方.
But this method doesn't work for what I'm trying to achieve. Here's what I want to be able to use as my paging nav.
jQuery(document).ready(function($){
$('.step').click(function(){
var elem = $(this);
var pointer = $('#pointer');
if( elem.hasClass('one') ){
pointer.css('left', '0');
}else if( elem.hasClass('two') ){
pointer.css('left', '20%');
}else if( elem.hasClass('three') ){
pointer.css('left', '40%');
}else if( elem.hasClass('four') ){
pointer.css('left', '60%');
}else{
pointer.css('left', '80%');
}
$('.step').removeClass('active');
elem.addClass('active');
});
});
.steps {
position: relative;
margin-top: 4rem;
padding-top: 14rem;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.steps #pointer {
position: absolute;
top: 0;
left: 0;
width: 20%;
text-align: center;
-webkit-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;
}
.steps #pointer svg {
width: 10rem;
height: auto;
}
.steps .step {
width: 20%;
text-align: center;
}
.steps .step svg circle {
fill: blue;
-webkit-transition: fill 0.3s ease;
-o-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.steps .step p {
font-size: 1.8rem;
font-weight: 600;
color: blue;
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0s, opacity 0.3s ease;
-o-transition: max-height 0s, opacity 0.3s ease;
transition: max-height 0s, opacity 0.3s ease;
}
.steps .step.active svg circle {
fill: lightblue;
}
.steps .step.active p {
opacity: 1;
max-height: unset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>slider here</div>
<div class="steps">
<div id="pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68.01 81.14"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M56.73,56a33.13,33.13,0,0,1-2.33,2.41Z" style="fill: #2daae2;"/><path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill: #2daae2;"/><path d="M32.52,0C14.56,0,0,15,0,33.56A34.07,34.07,0,0,0,8.27,55.92l0,0,2.33,2.41,0,0L32.52,81.14,54.38,58.4l0,0L56.73,56l0,0A34.07,34.07,0,0,0,65,33.56C65,15,50.48,0,32.52,0Zm0,60.16C18.25,60.16,6.69,48.22,6.69,33.5S18.25,6.83,32.52,6.83,58.36,18.77,58.36,33.5,46.79,60.16,32.52,60.16Z" style="fill: #2daae2;"/><path d="M57.71,55.92l-.05,0,.05,0Z" style="fill: #2daae2;"/><path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill: #fff;"/><path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill:#8dd2f3;"/><path class="cls-4" d="M32.52,54.17c-11.06,0-20-9.26-20-20.67s9-20.68,20-20.68,20,9.26,20,20.68S43.59,54.17,32.52,54.17Z" style="fill: none;"/><path class="cls-4" d="M0,0V81.14H68V0ZM6.69,33.5c0-14.73,11.56-26.67,25.83-26.67S58.36,18.77,58.36,33.5,46.79,60.16,32.52,60.16,6.69,48.22,6.69,33.5Z" style="fill: none;"/></g></g></svg>
</div>
<div class="step one active">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step two">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step three">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step four">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step five">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
</div>
推荐答案
您可以使用纯CSS/HTML进行操作.滑动滑块在活动幻灯片上使用slick-active
.将指针与CSS 伪元素 ::before
和Sign up
与::after
.
You can do so with pure CSS/HTML. Slick-slider use slick-active
on the active slide. Use the pointer with CSS pseudoe element ::before
and Sign up
with ::after
.
.slick-dots {
padding-top: 100px;
}
.slick-dots .slick-active {
position:relative;
}
.slick-dots .slick-active::before {
content: "";
/* use the ppointer instead of this link */
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png) top center no-repeat;
position:absolute;
top: -70px;
left: -25px;
width: 50px;
height: 50px;
border: 1px solid red;
}
.slick-dots .slick-active::after {
content: "Sign Up ";
position:absolute;
top: 30px;
left: -50px;
width: 100px;
border: 1px solid red;
}
$().ready(function(){
$('.slick-carousel').slick({
arrows: true,
centerPadding: "0px",
dots: true,
slidesToShow: 1,
infinite: false
});
});
body {
background: #333;
font-family: sans-serif;
margin: 0;
padding: 0;
}
body .slick-slide .slide-content {
margin: 0 10%;
padding: 50px 100px;
background: #fff;
}
body .slick-list {
margin: 20px 0px;
}
body .slick-prev,
body .slick-next {
position: absolute;
right: 10%;
background: #777;
border: none;
color: transparent;
width: 30px;
height: 30px;
}
body .slick-prev:before,
body .slick-next:before {
content: ">";
color: #fff;
font-size: 25px;
}
body .slick-prev {
left: 10%;
}
body .slick-prev:before {
content: "<";
}
body .slick-dots {
list-style: none;
margin: 0 auto;
text-align: center;
}
body .slick-dots li {
display: inline-block;
}
body .slick-dots li button {
transition: 0.2s background-color ease-in-out 0s;
border: none;
padding: 0;
color: transparent;
width: 10px;
height: 10px;
background-color: #777;
margin-right: 10px;
border-radius: 50%;
}
body .slick-dots li.slick-active button {
background-color: #fff;
}
.slick-dots {
padding-top: 100px;
}
.slick-dots .slick-active {
position: relative;
}
.slick-dots .slick-active::before {
content: "";
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png)
top center no-repeat;
position: absolute;
top: -70px;
left: -25px;
width: 50px;
height: 50px;
border: 1px solid red;
}
.slick-dots .slick-active::after {
content: "Sign Up ";
position: absolute;
top: 30px;
left: -50px;
width: 100px;
border: 1px solid red;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<div class="slick-carousel">
<div><div class="slide-content">1 your content</div></div>
<div><div class="slide-content">2 your content</div></div>
<div><div class="slide-content">3 your content</div></div>
<div><div class="slide-content">4 your content</div></div>
<div><div class="slide-content">5 your content</div></div>
<div><div class="slide-content">6 your content</div></div>
<div><div class="slide-content">7 your content</div></div>
<div><div class="slide-content">8 your content</div></div>
<div><div class="slide-content">9 your content</div></div>
<div><div class="slide-content">10 your content</div></div>
</div>
使用SVG指针作为外部文件.
Use the SVG pointer as an external file.
这里是一个Codepen.
Here is a codepen.
使用这些.如果它们不起作用,请在私人/隐身"窗口中打开.并且您不应该使用AdBlocker.
Use these. If they do not work, open in Private/Incognito Window.And you should not be using AdBlocker.
请记住,您需要调整::before
和::after
元素的位置和大小.
Keep in minde you need to adjust the position and size of ::before
and ::after
elements.
这篇关于光滑的滑块自定义HTML分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!