Custom arrows and pagination

Hello, is it possible to customize arrows and pagination dots, yet?

For the arrows, following the instructions here https://splidejs.com/arrows/, I tried adding an splide__arrows with nested splide__arrow splide__arrow--prev and splide__arrow splide__arrow--next directly under the <Splide /> component but they are not being picked up by the library.

Couldn’t find any guides to customize pagination though.

Issue Analytics

State:
Created 2 years ago
Comments:7

Top GitHub Comments

8reactions

descythercommented, Aug 13, 2021

Thanks alvaro. Here’s an example for future reference.

          <Splide
                                            renderControls={() => (
                                                <div className="splide__arrows">
                                                    <div className=" splide__arrow--prev" role="button">
                                                   <---
                                                    </div>
                                                    <div className="splide__arrow--next" role="button">
                                                        --->
                                                    </div>
                                                </div>
                                            )}
                                            options={{
                                                type: 'loop',
                                                perPage: 1,
                                                lazyLoad: 'nearby',
                                                pagination: 0,
                                                arrows: 2,
                                            }}
                                        >

2reactions

alvaro-cuestacommented, May 14, 2021

@aymenha I managed to do this leveraging renderControls.