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.

swiper-pagination-bullets position needs to be customizable

See original GitHub issue

Bug Report

Ionic Info

@ionic/core@4.0.0-beta.6

Describe the Bug I have a full screen slider, when it appears on iPhone X, the pagination bullets are too close to the bottom. I’d like to move them up using env(safe-area-inset-bottom). Note: If you don’t have a full screen slider, you probably won’t need to move the bullets.

Steps to Reproduce

Create slider
swiper-pagination-bullets are part of shadow dom so you can’t style

Expected Behavior css var available to customize bottom positioning of bullets.

Additional Context

Issue Analytics

State:
Created 5 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

malwattecommented, Apr 24, 2019

I faced the same issue and I use global.scss for the moment global.scss .swiper-pagination { bottom: 20px !important; bottom: calc(env(safe-area-inset-bottom) + 20px) !important; }

1reaction

corysmccommented, Aug 30, 2018

@mhartington

Top Results From Across the Web

PaginationOptions | Swiper - v8.4.5

This parameter allows totally customize pagination bullets, you need to pass here a function that accepts index number of pagination bullet and required...

SwiperJS - How do you style the Pagination Bullets?

To style pagination bullets simply add this line to your global CSS .swiper-pagination-bullet-active { background-color: #000 !important; }.

Swiper custom pagination - CodePen

URL Extension Required. When linking another Pen as a resource, make sure you use a URL Extension of the type of code you...

SwiperJS - Tips and Good Practice - OXYGEN4FUN

Useful tips to customize SwiperJS properly. ... const swiper = new Swiper('.swiper', { // If we need pagination pagination: { el: ...

How to Build a Responsive Slider With Swiper.js - Web Design

Have you ever built an advanced slider for a project? ... I'll introduce another well-known one: Swiper. ... Customize Dot Navigation.