slick slider - custom dots pagination

Question

I need to custom number of pagination dots in slickslider. currently it is having 5 dots as default. But I need 6 dots for pagination. and I need to show half image on the right corner.

  $(document).ready(function(){
    $('.slider-nav').slick({
      slidesToShow: 4,
      slidesToScroll: 3,
      dots: false,
      centerPadding: '30px',
      nextArrow: '<div class="nav-arrow slick-next slick-arrow"><i class="icon-rightarrow-lg"></i></div>',
      prevArrow: '<button class="nav-arrow slick-prev slick-arrow leftarrow"><i class="icon-leftarrow-md" aria-hidden="true"></i></button>',      
      focusOnSelect: true,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true,
            nextArrow: '<button class="nav-arrow slick-next slick-arrow"><i class="icon-rightarrow-md"></i></button>',
            prevArrow: '<button class="nav-arrow slick-prev slick-arrow"><i class="icon-leftarrow-md"></i></button>',
          }
        },
      ]
    });  
   if( $('.slick-prev').hasClass("leftarrow")){
    var currentSlide = $('.slider-nav').slick('slickCurrentSlide');
    $('.slick-prev').toggle(currentSlide != 0);
    $('.slider-nav').one('afterChange', function() {
    $('.slick-prev').show();
     }); 
    }
  });

<div class="sec-nav">
    <div class="sec-nav-title"><h2 class="shop-category">Shop by Category</h2></div>
    <p class="desktop-only">Optional Description</p>
    <div class="slider slider-nav" id="slick-slider-nav">
      <div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image1.png" routerLink="/store/bath-body/cat0004">
        <div class="sec-nav-imgcaption"><span class="img-caption">Bath & Body </span></div></div>
      <div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image2.png" routerLink="/store/hand/catukhand">
        <div class="sec-nav-imgcaption"><span class="img-caption">Hand </span></div></div>
      <div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image3.png" routerLink="/store/gifts/cat0001">
        <div class="sec-nav-imgcaption"><span class="img-caption">Bath & Body Gift Sets</span></div></div>
</div>
</div>