CODEWITHSUNDEEP
javascriptcssreactjsswiper.js
Sohit kumar
Sohit kumar

Reputation: 73

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

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

Upvotes: 7

Views: 14652

Answers (5)

Taner &#220;Z&#220;M
Taner &#220;Z&#220;M

Reputation: 1

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'

Upvotes: 0

dmudro
dmudro

Reputation: 3104

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.

Upvotes: 19

Anas
Anas

Reputation: 1835

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

Upvotes: 0

A Haworth
A Haworth

Reputation: 36664

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.

Upvotes: 0

Jon Jones
Jon Jones

Reputation: 1084

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

Upvotes: 0

Related Questions