swiper-pagination-bullets position needs to be customizable

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.