Slick: how to Customize own style of dots

[Sssnone]

want to Customize dots like line ,not a circle

[HaciKale]

So what I did was that I made an array/list,
var network = ["Work","School","Family","Something"]
then I used jQuery to make my slick, and under the customPaging section I ran a function that iterates through the array as many times as there are slides ..

remember to make have enough names in array as there are sliders.

 jQuery(".network-slider").slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 8000,
    nextArrow: '<div class="right"><i class="fa fa-angle-right"></i></div>',
    prevArrow: '<div class="left"><i class="fa fa-angle-left"></i></div>',
    dots: true,
    customPaging: function(slider, i) {
      var name = network[i];
      return '<div class="pager__item" id=' + name + "> " + name + " </div>";
    },
    useTransform: true,
    cssEase: "ease-in-out"
  }); 

you could try with this option, didn't check if it works;

 jQuery(".network-slider").slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 8000,
    nextArrow: '<div class="right"><i class="fa fa-angle-right"></i></div>',
    prevArrow: '<div class="left"><i class="fa fa-angle-left"></i></div>',
    dots: true,
    customPaging: function(slider, i) {

      return '<div class="pager__item" id=' + i + "> __ </div>";
    },
    useTransform: true,
    cssEase: "ease-in-out"
  });

[BrunoElo]

Thank you @HaciKale, the second option worked for me.
Also, since I wanted a custom shape, I removed the underscores and styled the div using the class .pager__item then for the active state, I styled the class .slick-active .pager__item