Блог

 import React, { useState, Fragment } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, {
  Navigation,
  Pagination,
  EffectFade,
  EffectCoverflow,
  EffectCube,
} from "swiper";
import "swiper/swiper-bundle.css";
import "./App.css";

SwiperCore.use([
  EffectCoverflow,
  EffectCube,
  EffectFade,
  Navigation,
  Pagination,
]);

const slides = [];
for (let i = 0; i < 5; i  = 1) {
  slides.push(
    <SwiperSlide key={`slide-${i}`}>
      <img
        src={`https://picsum.photos/id/${i   1}/500/300`}
        style={{ listStyle: "none" }}
        alt={`Slide ${i}`}
      />
    </SwiperSlide>
  );
}

function App() {
  return (
    <Fragment>
      <Swiper
        initialSlide="2"
        effect="coverflow"
        navigation
        grabCursor={true}
        centeredSlides={true}
        slidesPerView="3"
        coverflowEffect={{
          rotate: 50,
          stretch: 0,
          depth: 300,
          modifier: 3,
        }}
      >
        {slides}
      </Swiper>
    </Fragment>
  );
}

export default App;
  

Код CSS

 body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

img {
  width: 100%;
}

.swiper-slide {
  border-radius: 50% !important;
}

  

Я хочу сделать все слайды похожими на закругленный круг. Я не могу сделать это в swiperjs. Кто-нибудь может мне помочь в этом. Вот ссылка на то, что я делал до сих пор.

Я попытался сделать это с помощью border-radius и применил его ко многим классам, а также использовал !important, но не смог этого добиться.

https://nifty-rosalind-68dc39.netlify.app/

Я думаю, вы должны добавить div внутреннюю .swiper-slide часть и присвоить ей равную ширину и высоту, тогда вы сможете использовать border-radius: 100% . в этом случае вы должны использовать автоматические слайды для каждого просмотра в опции swiper.

 <div class="swiper-slide">
 <div class="round-item">
  <img src="..." alt="..." />
 </div>
</div>
  

 .swiper-slide .round-item {
 width: 200px;
 height: 200px;
 border-radius: 100%;

 overflow: hidden;
}

.swiper-slide .round-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}