React-slick: Custom Paging with text instead of dots

[kieckhafer]

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.

[akiran]

Check out this example https://github.com/akiran/react-slick/blob/master/examples/CustomPaging.js

[davidprae]

@akiran, is there no way to do something like shown in codepen that @kieckhafer linked to? I need to place titles in the pagination. Your example works for me but it doesn't show how to grab a data attribute from the current slide.

The referenced codepen: https://codepen.io/norman_pixelkings/pen/NNbqgG

[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;

[paschalidi]

This is how you should do it @kieckhafer you are right.
I have a different problem though.
Could you change the styling of the active "custom dot"?

[ayepRahman]

` const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
appendDots: dots => {
const customDots = React.Children.map(dots, dot => {
// console.log(dot.props);
return React.cloneElement(dot, { className: classnames(styles.slickActive) });
});

    console.log(customDots);

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

i tried custom styling on the children props on active class with no luck. Is there anyway that i could custom active class?

[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