Reactjs,swiperjs,Css-How to move the pagination outside of the slider?Margin,padding is not working

Question

Please help .I tried a lot but it's not working my requirement is to move the pagination outside of wherever i want but when i use padding or margin it's not working ..It always inside the slider if i forced to positioned outside of slider it's got hidden.

https://github.com/Sohit-Kumar/React-swiper-Pagination

import React from "react";


import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Keyboard,
  Mousewheel,
  EffectCoverflow,
} from "swiper";

import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";
import "./Simple.css";

// install Swiper components
SwiperCore.use([
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Keyboard,
  Mousewheel,
  EffectCoverflow,
]);

const SimpleSwiper = () => {
  const params = {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: "auto",
    coverflowEffect: {
      rotate: 40,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
  };
  return (
    <div className="swipebody">
      <Swiper
        {...params}
        spaceBetween={50}
        slidesPerView={5}
        navigation
        pagination={{
          clickable: true,
          renderBullet: (index, className) => {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        }}
        keyboard={true}
        mousewheel={true}
        // scrollbar={{ draggable: true }}
      >
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
      </Swiper>
    </div>
  );
};

export default SimpleSwiper;

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    
    
}

.swipebody{
    margin-top: 50px;
    width: 100%;
      height: 100%;
      position: relative;
    }
.swiper-slide {
  
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
  }
  .swiper-pagination {
    
    bottom: -10px !important;
    color: solid black;
    background-color: black;
    height: 20px;
    
}

.swiper-pagination-bullet{
  background-color: darkorange;
}
  .swiper-pagination-bullet-active {
      
    background-color: rgb(255, 0, 43);
    color: rgb(136, 255, 0);
  }

i try to use bottom:-10px its getting hidden

Transaction

You have box-sizing: border-box; set on everything which means any margin or padding setting you make will be counted inside the element's borders, not outside it. Is that the cause of the problem? – Rink

Check this #64099883 – Constance

Answer 1

In your pagination config prop, you can target a custom container element:

pagination={{
  el: '.my-custom-pagination-div',
  clickable: true,
  renderBullet: (index, className) => {
   return '<span class="' + className + '">' + (index + 1) + "</span>";
  },
}}

Then put <div class="my-custom-pagination-div" /> wherever you want.

Targeting elements this way is not pure react/JSX way of doing things but probably the best solution so far.

Inherence

Indeed, it's probably a good enough compromise. If you are using css modules don't forget to add the leading dot '.'. el: `.${styles.myClass}` – Renowned

Answer 2

If you want to move the pagination out then it would be easier to place it outside of the Swiper container rather than place it inside and hack the CSS to show it outside.

Another option is to make the swipebody height larger so you can put the pagination within the div but under the slides

To set a height explicitly, maybe using height: 60vh instead

I'd recommend trying to avoid using it!important as its a bit hacky.

You could try setting a Z-Index (https://www.w3schools.com/cssref/pr_pos_z-index.asp) on the pagination.

IAs you are using

Canner

Hi @Sohit kumar, which of the options suggested here didn't work, or was it both of them? The idea of putting the pagination outside of the swiper sounds sensible, did you try that (e.g. wrap the swiper in another div and give that div the margins etc) – Rink

If you move pagination outside of the swiper container you lose its functionality – Instrumental

Answer 3

Take the box-sizing: box-border out of the * setting in your CSS and see what happens (you may need to be more refined in where you change this, but start here).

box-sizing: box-border means that any margins or padding you put on an element will be counted within its size - not put outside it and it sounds as though you want them to influence the positioning of the element, not be part of its sizing.

Rink

Did it make any difference to positioning when you add, say, a large margin just for a test? – Rink

Yes it's got hidden sir – Transaction

Answer 4

I'm using react and I figured out the problem. the problem is the bullets are by default position: absolute and they did move it to the bottom using top so the bullets will be above the content if the swiper content reaches the bottom, so the solution is to increase the height of the swiper container, and this will make the bullets move down.

you can achieve this by giving the swiper a class and giving it a height

React

<Swiper className="swiper-container">
    //swiper slides here
</Swiper>

CSS

.swiper-container{
         height: 500px;
    }

Hegumen

Answer 5

Swiper class styles

Custom Styles

If you want to get the swiper bullets out of the swiper, check the images. It can also work for 'Navigation'

Amphoteric