unable to override .swiper-pagination in ion-slides components

[utpaul]

Recently i'm converting my ionic older projects to ionic v4. In conversion i need to horizontally scroll with fixed bullets in bottom. Unfortunately fixed bottom bullets not working by overriding .css file.

Code

<ion-slides [options]="slideOpts"
                pager="true">
      <ion-slide>
        <ion-list>
          <ion-item>
            <h2>Some title1</h2>
          </ion-item>
          <ion-item>
            <h2>Some title2</h2>
          </ion-item>
          <ion-item>
            <h2>Some title3</h2>
          </ion-item>
          <ion-item>
            <h2>Some title4</h2>
          </ion-item>
          <ion-item>
            <h2>Some title5</h2>
          </ion-item>
          <ion-item>
            <h2>Some title45</h2>
          </ion-item>
          <ion-item>
            <h2>Some title46</h2>
          </ion-item>
        </ion-list>
      </ion-slide>

      <ion-slide>
        <ion-list>
          <ion-item>
            <h2>Some title1</h2>
          </ion-item>
          <ion-item>
            <h2>Some title2</h2>
          </ion-item>
          <ion-item>
            <h2>Some title3</h2>
          </ion-item>
          <ion-item>
            <h2>Some title4</h2>
          </ion-item>
          <ion-item>
            <h2>Some title5</h2>
          </ion-item>
          <ion-item>
            <h2>Some title45</h2>
          </ion-item>
          <ion-item>
            <h2>Some title46</h2>
          </ion-item>
          <ion-item>
            <h2>Some title1</h2>
          </ion-item>
          <ion-item>
            <h2>Some title2</h2>
          </ion-item>
          <ion-item>
            <h2>Some title3</h2>
          </ion-item>
          <ion-item>
            <h2>Some title4</h2>
          </ion-item>
          <ion-item>
            <h2>Some title5</h2>
          </ion-item>
          <ion-item>
            <h2>Some title45</h2>
          </ion-item>
          <ion-item>
            <h2>Some title46</h2>
          </ion-item>
        </ion-list>
      </ion-slide>
    </ion-slides>

.ts

  slideOpts = {
      initialSlide: 0,
      speed: 600
  };

.scss

ion-slides{
  overflow-y: scroll;
}

Project Version

Ionic:

ionic (Ionic CLI) : 4.12.0 (C:\Users\DEV-2\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.4.2 @angular-devkit/build-angular : 0.13.9 @angular-devkit/schematics : 7.3.9 @angular/cli : 7.3.9 @ionic/angular-toolkit : 1.5.1

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.4 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 5 other plugins)

System:

Android SDK Tools : 26.1.1 (E:\SDK) NodeJS : v11.6.0 (C:\Program Files\nodejs\node.exe) npm : 6.8.0 OS : Windows 10

[liamdebeasi]

Hi there,

Thanks for the issue. I am not sure I fully understand the bug you are experiencing. By default, the ion-slides component has horizontal scrolling/swiping with the pagination at the bottom.

Can you clarify the issue you are trying to report?

Thanks!

[utpaul]

@liamdebeasi if you paste code in any page then you got a result. Suppose you have two ion-slide, one have 4 items and another is 10 items. So pager bullets are shown in the bottom of 10 items . I want to fixed it in page bottom. I try it by overriding pager-container class by position fixed but its working.

[paulstelzer]

Thanks for your issue! If you want to style things inside the slider (like the pager or bullets etc) you have to put it inside your globals.scss and not in your component. Can you try this?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!