question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom arrows and pagination

See original GitHub issue

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:closed
  • Created 2 years ago
  • Comments:7

github_iconTop 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

slick slider custom pagination and arrows - CodePen
slick slider custom pagination and arrows ... <div class="news__arrow news__arrow_dir_right" onclick="slideGo('+')"></div>.
Read more >
Arrows - Splide
Learn how to customize arrows of the slider. ... By default, Splide renders arrows by the following SVG: You can replace the path...
Read more >
I would like to get custom arrows for my pagination like <<,<,>,>>
Hi ,i am using input.js for getting pagiation in text input.How to get custom arrows instead of the First ,last ,next and previous....
Read more >
[Resolved] left and right pagination arrows - Toolset
We're using the toolset views (slide style) with pagination arrows. I've noticed that the 'previous' pagination arrow doesn't.
Read more >
jquery - custom pagination, arrows instead of Next Previous
You can customize the pagination button labels through language.paginate.next and language.paginate.previous . $('#the_table').
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found