Menu
Is it possible to create custom paging dots just using HTML for Slick Slider just like Bootstrap Carousel allows you to.
Bootstrap paging example
<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>
523
CodePen Embed - slick-arrows. $(function(){ $("#slider"). slick({ speed: 1000, dots: true, prevArrow: '<button class="slide-arrow prev-arrow"></button>', nextArrow: '<button class="slide-arrow next-arrow"></button>' }); });
Fully responsive. Scales with its container. Uses CSS3 when available. Fully functional when not.
Fully Responsive & Flexible jQuery Carousel Plugin - slick | Free jQuery Plugins.
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>Use the SVG pointer as an external file.
Here is a codepen.
Use these. If they do not work, open in Private/Incognito Window.And you should not be using AdBlocker.
Keep in minde you need to adjust the position and size of ::before and ::after elements.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
