Custom Paging with text instead of dots

Hi,

I’m wondering if there is a way to create a custom pagination section, similar to what is being done here on the non-React version of Slick: https://codepen.io/norman_pixelkings/pen/NNbqgG

I’ve tried what’s being done in that Pen and only get slider x as a result of logging slider.

I’ve tried logging props as well and it doesn’t seem like any props are passed to the customPaging.

[kieckhafer]

@davidprae I don’t know if this helps, but what I ended up doing was this:

The settings, which populate the custom paging:

const settings = {
      dots: dots,
      draggable: draggable,
      infinite: infinite,
      speed: 500,
      autoplay: false,
      customPaging: function (i) {
        return (
          <a>{pagination[i]}</a>
        );
      },
      prevArrow: prevArrow,
      nextArrow: nextArrow
    };

And then I loop through the data that I pass into the slider anyway, and create a new Array of ‘Labels’ to pass specifically to the customPagination setting:

  const cards = this.state.data;

    const pagination = [];

    if (Array.isArray(cards)) {
      cards.map((card) => {
        pagination.push(card.label);
      });
    }

    return pagination;

[ayepRahman]

@paschalidi

` const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, arrows: false, appendDots: dots => { const customDots = React.Children.map(dots, dot => { if (dot.props[‘className’] === ‘slick-active’) { return React.cloneElement(dot, { className: classnames(styles.slickActive), }); } else { return React.cloneElement(dot, { className: classnames(styles.slickNon), }); } });

    return (
      <div>
        <ul className={classnames(styles.slickDots)}> {customDots} </ul>
      </div>
    );
  },
};`

I’ve manage to customise the active classes by using children props classname and the i add my own active classes