CODEWITHSUNDEEP
sliderslick.js
Esport
Esport

Reputation: 41

Slick slider change dots to words

In my project I'm using slick slider plugin ( http://kenwheeler.github.io/slick/) I need change default dots nav for words. Slides should be changed after clicking on the words.

Upvotes: 4

Views: 7137

Answers (1)

Abijith Ajayan
Abijith Ajayan

Reputation: 274

Here is the Updated Code and check my example in CODEPEN

$(".slider").slick({
    autoplay: true,
    dots: true,
    customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data();
    return '<a class="dot">'+i+'</a>';
            },
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});
.frst{
  background: #3a8999;
}
.scnd{
  background: #e84a69;
}
.thrd{
  background: #980505;
}
.frth{
  background: #094602;
}

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black !important;    
}

.slick-dots {
    bottom: -30px;
}
a.dot{
  padding:10px 10px;
}
a.dot:hover{
  
  background:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>

<section class="slider">
    <div class="frst">slide1</div>
    <div class="scnd">slide2</div>
    <div class="thrd">slide3</div>
    <div class="frth">slide4</div>
    <div class="frst">slide5</div>
    <div class="thrd">slide6</div>
</section>

<span class="pagingInfo"></span>

Upvotes: 5

Related Questions