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

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? — A Haworth, Oct 29 '20 at 08:49
Check this https://stackoverflow.com/questions/64099383/swiper-react-how-to-create-custom-navigation-pagination-components-using-react — Vitor Martins, May 19 '21 at 16:19

score 17 · Answer 1 · edited May 22 '22 at 18:59

17

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.

edited May 22 '22 at 18:59

VLAZ

26,331
9
49
67

answered Jun 25 '21 at 15:19

dmudro

2,894
1
21
23

1

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}` ``` – BiasInput Feb 28 '22 at 15:50

score 0 · Answer 2 · answered Oct 29 '20 at 08:45

0

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

answered Oct 29 '20 at 08:45

Jon Jones

1,014
1
9
17

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) – A Haworth Oct 29 '20 at 09:58
If you move pagination outside of the swiper container you lose its functionality – omar Mar 04 '22 at 12:58

score 0 · Answer 3 · answered Oct 29 '20 at 08:53

0

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.

answered Oct 29 '20 at 08:53

A Haworth

30,908
4
11
14

Did it make any difference to positioning when you add, say, a large margin just for a test? – A Haworth Oct 29 '20 at 09:39
Yes it's got hidden sir – Sohit kumar Oct 29 '20 at 09:43

score 0 · Answer 4 · answered Mar 17 '22 at 15:13

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;
    }

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

4 Answers4