How to move the swiper bullet to the bottom of the images instead of "over" the images?

1

i tried overriding the css but it didnt work:

.swiper-pagination {
  position: absolute;
  bottom: 10px; 
  left: 0;
  width: 100%;
  text-align: center;
}
.swiper-pagination span {
  width: 8px; /* Bullet width */
  height: 8px; /* Bullet height */
  display: inline-block;
  background-color: red !important; 
  margin: 0 5px;
  border-radius: 50%; /* Bullet shape */
  cursor: pointer;
}

is there a way?

2

Hi, you can do it with CSS.
Change the following classes.

.swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: clip;
    list-style: none;
    padding: 0px;
    z-index: 1;
    display: block;
    padding-bottom: 30px;  /* <-- added to show to bullets, other way they are hidden */
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px;  /* <-- modified to show under de img */
    top: var(--swiper-pagination-top, auto);
    left: 0px;
    width: 100%;
}
3

it’s not working :confused: i tried overriding it on app.css and even the framework7.min.css
but no luck :frowning:

4

Look to [web]this (https://www.autofarma.net/) I made.
The top slider is made with swiperJS. Check the CSS to see how it’s done.