New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a new part(s) or element(s) for customizing navigation buttons #7467
Comments
What is wrong with
Even with these extra parts it won’t cover all necessary use cases |
@nolimits4web, I wouldn't say that anything is wrong with these approaches but what I'm noticing is that in a particular application that I'm upgrading from an old version that used jQuery to now use the Swiper element is that almost every instance of The main issue that I have with the custom button approach is positioning. Once you have custom elements for navigation buttons then the developer is on the hook to position these elements as well as to style them completely when all they may wanted to do is to provide a different svg or other content or simply change some of the basic appearance of the button in a way that is not exposed through the limited set of custom style properties. Additionally, what I'm finding is that so far I've been able to implement all necessary customizations as CSS or HTML and have not needed to do anything beyond calling the After working further with Swiper and tweaking the project to behave exactly like the old jQuery version I'm wondering if a |
Clear and concise description of the problem
As a developer using Swiper element I want to have a simpler way to override the icon and visualization of the included navigation buttons so that I do not have to create custom next and previous buttons.
Suggested solution
Introduce a new part or set of two parts to the parts supported for Swiper Element.
Single part for both:
navigation-svg
or
Two separate parts:
button-prev-svg
button-next-svg
Alternative
Pseudo selectors and attribute selectors on existing parts
Alternative approaches attempted do not suffice apparently due to how
::part
works.Additional custom elements for navigation buttons
Another alternative solution could be to introduce separate child elements
<swiper-button-prev>
and<swiper-button-next>
which could be similar to how<swiper-slide>
works in that the developer can provide their own implementations as children of theswiper-component
element in order to provide the markup for the buttons to be used. While this may be the more extensible and elegant option I'm not sure of the limitations of web components myself and whether it is possible to have multiple custom components as children in the same what thatswiper-slide
currently works so my preferred proposal would be to expose the additional parts for overriding styles as a simpler initial approach.Additional context
See discussion linked below. There are at least five examples that I've come across so far of developers running into the limits of what can be done with the built in Navigation CSS properties and the Navigation button parts and I think that improving this area of the component will help to reduce how much custom code is needed when adopting Swiper in many cases.
#4348
Validations
Would you like to open a PR for this feature?
The text was updated successfully, but these errors were encountered: