大佬教程收集整理的这篇文章主要介绍了jquery – Slick Slider自定义HTML分页，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Bootstrap分页示例
<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>
我知道你可以像这样创建自定义点;
customPaging : function(slider,i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img src="'+thumb+'"></a>';
}
但是这种方法不适用于我想要实现的目标.这是我希望能够用作分页导航的内容.
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,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,15,33.56A34.07,34.07,8.27,55.92l0,2.33,2.41,0L32.52,81.14,54.38,58.4l0,0L56.73,56l0,0A34.07,65,33.56C65,50.48,32.52,0Zm0,60.16C18.25,60.16,6.69,48.22,33.5S18.25,6.83,58.36,18.77,33.5,46.79,60.16Z" style="fill: #2daae2;"/><path d="M57.71,55.92l-.05,.05,0Z" style="fill: #2daae2;"/><path d="M52.56,33.5Z" style="fill: #fff;"/><path d="M52.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.68S43.59,54.17,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,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>
.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指针作为外部文件.
这是一个codepen.
https://codepen.io/anon/pen/PLJMvN
使用这些.如果它们不起作用,请在私人/隐身窗口中打开.您不应该使用AdBlocker.
https://codepen.io/anon/pen/pYdovB
https://codepen.io/anon/pen/VRrYMg
保持在minde中你需要调整:: before和:: after元素的位置和大小.
以上是大佬教程为你收集整理的jquery – Slick Slider自定义HTML分页全部内容，希望文章能够帮你解决jquery – Slick Slider自定义HTML分页所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。