Login/Register
Slick Slider Custom HTML Paging
Asked Answered
Solved jqueryhtmlcssslick.js
T

1

8

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>
Transcend answered 6/3, 2019 at 15:28 Comment(2)
How does your custom dots should look like? – Cambell
@Cambell Sorry I don't understand what you mean. Are you asking what my custom dots should look like? if so I've added a snippet for you to see. Thanks – Transcend
C
8

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.

https://codepen.io/anon/pen/PLJMvN

Use these. If they do not work, open in Private/Incognito Window.And you should not be using AdBlocker.

https://codepen.io/anon/pen/pYdovB

https://codepen.io/anon/pen/VRrYMg

Keep in minde you need to adjust the position and size of ::before and ::after elements.

Cambell answered 12/3, 2019 at 13:28 Comment(1)
The codepen one. The page just constantly refreshes – Transcend

© 2022 - 2024 — McMap. All rights reserved.