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

admin管理员组

文章数量:1326304

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.

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="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="/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

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

• javascript
• css
• reactjs
• swiper.js

Share Improve this question Follow asked Oct 29, 2020 at 8:34 Sohit kumarSohit kumar 7311 gold badge11 silver badge44 bronze badges 2

• 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 Commented Oct 29, 2020 at 8:49
• Check this stackoverflow.com/questions/64099383/… – Vitor Martins Commented May 19, 2021 at 16:19

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 19

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.

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

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.

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

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'

本文标签：