как закастомить pagination в swiper
import React from "react";
import s from "./index.module.scss";
import stars from "assets/vectors/featuredProperties/starts.svg";
import arrow from "assets/vectors/featuredProperties/arrow.svg";
import img1 from "assets/img/featuredProperties/01.png";
import img2 from "assets/img/featuredProperties/02.png";
import img3 from "assets/img/featuredProperties/03.png";
import bed from "assets/vectors/featuredProperties/bed.svg";
import bath from "assets/vectors/featuredProperties/bath.svg";
import house from "assets/vectors/featuredProperties/house.svg";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import SwiperCore from "swiper";
SwiperCore.use([Navigation, Pagination]);
export const FeaturedProperties: React.FC = () => {
return (
<section className={s.featuredPropertiesBg}>
<div className="container">
<div className={s.featuredProperties}>
<img src={stars} alt="stars" />
<div className={s.info}>
<h1 className={s.infoTitle}>Featured Properties</h1>
<div className={s.bottom}>
<p>
Explore our handpicked selection of featured properties. Each listing offers a
glimpse into exceptional homes and investments available through Estatein. Click
"View Details" for more information.
</p>
<button>
<a href="#">View All Properties</a>
</button>
</div>
</div>
<div className={s.carousel}>
<Swiper
pagination={{
type: "fraction",
el: ".custom-pagination",
}}
navigation={{
nextEl: ".customNext",
prevEl: ".customPrev",
}}
modules={[Navigation, Pagination]}
spaceBetween={30}
slidesPerView={1}
className={s.swiperContainer}
>
<SwiperSlide>
<div className={s.cards}>
<div className={s.card}>
<img src={img1} alt="img1" />
<h3>Seaside Serenity Villa</h3>
<p className={s.description}>
A stunning 4-bedroom, 3-bathroom villa in a peaceful suburban neighborhood...
<a href="#">Read More</a>
</p>
<div className={s.details}>
<div className={s.items}>
<img src={bed} alt="bed" />
<p className={s.detailsText}>4-Bedroom</p>
</div>
<div className={s.items}>
<img src={bath} alt="bath" />
<p className={s.detailsText}>3-Bathroom</p>
</div>
<div className={s.items}>
<img src={house} alt="house" />
<p className={s.detailsText}>Villa</p>
</div>
</div>
<div className={s.selling}>
<div className={s.price}>
<p className={s.text}>Price</p>
<p className={s.value}>$550,000</p>
</div>
<button>
<a href="">View Property Details</a>
</button>
</div>
</div>
<div className={s.card}>
<img src={img2} alt="img2" />
<h3>Metropolitan Haven</h3>
<p className={s.description}>
A chic and fully-furnished 2-bedroom apartment with panoramic city views...
<a href="#">Read More</a>
</p>
<div className={s.details}>
<div className={s.items}>
<img src={bed} alt="bed" />
<p className={s.detailsText}>2-Bedroom</p>
</div>
<div className={s.items}>
<img src={bath} alt="bath" />
<p className={s.detailsText}>2-Bathroom</p>
</div>
<div className={s.items}>
<img src={house} alt="house" />
<p className={s.detailsText}>Villa</p>
</div>
</div>
<div className={s.selling}>
<div className={s.price}>
<p className={s.text}>Price</p>
<p className={s.value}>$550,000</p>
</div>
<button>
<a href="">View Property Details</a>
</button>
</div>
</div>
<div className={s.card}>
<img src={img3} alt="img3" />
<h3>Rustic Retreat Cottage</h3>
<p className={s.description}>
An elegant 3-bedroom, 2.5-bathroom townhouse in a gated community...
<a href="#">Read More</a>
</p>
<div className={s.details}>
<div className={s.items}>
<img src={bed} alt="bed" />
<p className={s.detailsText}>3-Bedroom</p>
</div>
<div className={s.items}>
<img src={bath} alt="bath" />
<p className={s.detailsText}>3-Bathroom</p>
</div>
<div className={s.items}>
<img src={house} alt="house" />
<p className={s.detailsText}>Villa</p>
</div>
</div>
<div className={s.selling}>
<div className={s.price}>
<p className={s.text}>Price</p>
<p className={s.value}>$550,000</p>
</div>
<button>
<a href="">View Property Details</a>
</button>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={s.cards}>
<div className={s.card}>
<img src={img1} alt="img1" />
<h3>Seaside Serenity Villa</h3>
<p className={s.description}>
A stunning 4-bedroom, 3-bathroom villa in a peaceful suburban neighborhood...
<a href="#">Read More</a>
</p>
<div className={s.details}>
<div className={s.items}>
<img src={bed} alt="bed" />
<p className={s.detailsText}>4-Bedroom</p>
</div>
<div className={s.items}>
<img src={bath} alt="bath" />
<p className={s.detailsText}>3-Bathroom</p>
</div>
<div className={s.items}>
<img src={house} alt="house" />
<p className={s.detailsText}>Villa</p>
</div>
</div>
<div className={s.selling}>
<div className={s.price}>
<p className={s.text}>Price</p>
<p className={s.value}>$550,000</p>
</div>
<button>
<a href="">View Property Details</a>
</button>
</div>
</div>
<div className={s.card}>
<img src={img2} alt="img2" />
<h3>Metropolitan Haven</h3>
<p className={s.description}>
A chic and fully-furnished 2-bedroom apartment with panoramic city views...
<a href="#">Read More</a>
</p>
<div className={s.details}>
<div className={s.items}>
<img src={bed} alt="bed" />
<p className={s.detailsText}>2-Bedroom</p>
</div>
<div className={s.items}>
<img src={bath} alt="bath" />
<p className={s.detailsText}>2-Bathroom</p>
</div>
<div className={s.items}>
<img src={house} alt="house" />
<p className={s.detailsText}>Villa</p>
</div>
</div>
<div className={s.selling}>
<div className={s.price}>
<p className={s.text}>Price</p>
<p className={s.value}>$550,000</p>
</div>
<button>
<a href="">View Property Details</a>
</button>
</div>
</div>
<div className={s.card}>
<img src={img3} alt="img3" />
<h3>Rustic Retreat Cottage</h3>
<p className={s.description}>
An elegant 3-bedroom, 2.5-bathroom townhouse in a gated community...
<a href="#">Read More</a>
</p>
<div className={s.details}>
<div className={s.items}>
<img src={bed} alt="bed" />
<p className={s.detailsText}>3-Bedroom</p>
</div>
<div className={s.items}>
<img src={bath} alt="bath" />
<p className={s.detailsText}>3-Bathroom</p>
</div>
<div className={s.items}>
<img src={house} alt="house" />
<p className={s.detailsText}>Villa</p>
</div>
</div>
<div className={s.selling}>
<div className={s.price}>
<p className={s.text}>Price</p>
<p className={s.value}>$550,000</p>
</div>
<button>
<a href="">View Property Details</a>
</button>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
</div>
<div className={s.pagination}>
<div className={`custom-pagination ${s.customPagination}`}></div>
<div className={s.arrows}>
<div className={s.customNext}>
<img src={arrow} alt="arrow" />
</div>
<div className={s.customPrev}>
<img src={arrow} alt="arrow" />
</div>
</div>
</div>
</div>
</div>
</section>
);
};в общем как мне сделать то что в дизайне ? а именно сделайть of и сделать его отедльным цветом + как на стрелках переключения сделать так что бы одна была полупрозрачной пока мы находимся на 1 странице ?
Заранее спасибо за ответ ! <3
Ответы (1 шт):
Автор решения: soledar10
→ Ссылка
Пример
const swiper = new Swiper('.swiper', {
pagination: {
el: '.swiper-pagination',
type: "fraction",
bulletActiveClass: 'swiper-pagination-bullet-active',
renderFraction: function(currentClass, totalClass) {
return `<span class="${currentClass}"></span>
<span class="swiper-pagination-divider">off</span>
<span class="${totalClass}"></span>`
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});.swiper {
height: 300px;
border: 2px solid #000;
}
.swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.swiper-pagination-divider {
color: #f00;
}
.swiper:has(.swiper-button-prev.swiper-button-disabled) .swiper-pagination-current,
.swiper:has(.swiper-button-next.swiper-button-disabled) .swiper-pagination-current {
color: #00f;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>https://v9.swiperjs.com/swiper-api#param-pagination-renderFraction