Swiper js不会刷卡,分页不显示正确的页码

7vux5j2d 于 2022-10-02 发布在 Java

关注(0)|答案(1)|浏览(187)

对快手来说是个新手。

I want to make slide like this

but it comes out like this (overflow: hidden;)

我有两个问题。

我关注了文档和一些参考网站，但分页碎片消失了，箭头也不起作用。当光标移动到上一个或下一个按钮并单击时，不会有任何React。当我初始化Swiper时，如果它只是‘.mySwiper’或‘.swper’，如下所示

Var Swiper=新Swiper(‘.mySwiper’，{

Var Swiper=新Swiper(‘.swper’，{

result becomes like this分页工作正常，但元素混乱。我试着修，但想不出怎么修。

当我设置Overflow：Visible；时，每个元素都变得可见，但超出了浏览器的宽度。当我设置OVERFLOW：HIDDED；，result is like this时，如何设置集合元素like this？

我有分页问题和元素溢出问题。先谢谢你。

以下是我的代码

var swiper = new Swiper('.swiper .mySwiper', {
  loop: true,
  slidesPerView: 1.5,
  spaceBetween: 62.5,
  centeredSlides: true,
  breakpoints: {
    768: {
      slidesPerView: 3,
      spaceBetween: 80,
      centeredSlides: true,
    },
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
    formatFractionCurrent: function (n) {
      return '0' + n;
    },
    formatFractionTotal: function (n) {
      return '0' + n;
    },
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

.swiper {
  padding-top:calc(10/ 1366 * 100vw);
  overflow: visible;
  max-width: calc( 552.14/ 1366 * 100vw);
}

.swiper-wrapper {
  padding-bottom: calc(178/ 1366 * 100vw);
}

.swiper-slide {
  height: calc( 240/ 1366 * 100vw);
  background:#fff;
  border-radius:calc( 30/ 1366 * 100vw);
  border: 6px solid #B5E9EE;
  margin-right: calc( 62.5/ 1366 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: calc(8/ 1366 * 100vw) calc(8/ 1366 * 100vw) calc(9/ 1366 * 100vw) rgb(0 0 0 / 16%);
}

.slide_text {
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(51/ 1366 * 100vw);
    padding-right: calc(6/ 1366 * 100vw);
    gap: calc(40/ 1366 * 100vw);

}

.num {
  font-family: NotoSansJP-Black;
  font-size: calc(36/ 1366 * 100vw);
  line-height: calc(43.2/ 1366 * 100vw);
  color: #1F2774;
  border-bottom: 3px solid #1F2774;
}

.text {
  font-family: NotoSansJP-Regular;
  font-size: calc(36/ 1366 * 100vw);
  line-height: calc(43.2/ 1366 * 100vw);
}

.swiper-pagination{
  position: absolute;
    font-family: NotoSansJP-Bold;
    font-size: calc( 28/ 1366 * 100vw);
    line-height: calc( 40/ 1366 * 100vw);
    top: calc( 37/ 1366 * 100vw);
    text-align: center;
    display: block;
}

.swiper-button-prev {
  width: calc( 60/ 1366 * 100vw);
  height: calc( 61/ 1366 * 100vw);
  background-color: #F6F3DC;
  border-radius: calc( 100/ 1366 * 100vw);
  color: transparent;
}

.swiper-button-next {
  width: calc( 60/ 1366 * 100vw);
  height: calc( 61/ 1366 * 100vw);
  background-color: #F6F3DC;
  border-radius: calc( 100/ 1366 * 100vw);
  color: transparent;
}

.gallery_navigation .fa-chevron-left:before {
    content: "\f053";
    font-size: calc( 28/ 1366 * 100vw);
    position: absolute;
    top: calc( 17/ 1366 * 100vw);
    left: calc( 21/ 1366 * 100vw);
    color: black;
    font-weight: 900;
}

.gallery_navigation .fa-chevron-right:before {
    content: "\f054";
    font-size: calc( 28/ 1366 * 100vw);
    position: absolute;
    top: calc( 17/ 1366 * 100vw);
    left: calc( 21/ 1366 * 100vw);
    color: black;
    font-weight: 900;
}

.gallery_navigation {
  display: flex;
    justify-content: center;
    align-items: center;
    padding: calc( 52/ 1366 * 100vw) 0;
    position: absolute;
    width: calc( 276/ 1366 * 100vw);
    left: calc( 137/ 1366 * 100vw);
    text-align: center;
    top: calc( 254/ 1366 * 100vw);
}

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kirameki-card</title>
  <link rel="stylesheet" href="css/ress.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> 
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://kit.fontawesome.com/800c1ef51d.js" crossorigin="anonymous"></script>
</head>

<body>

<div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">01</div>
            <div class="text">カードお申し込み</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">02</div>
            <div class="text">入会審査・カード発行</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">03</div>
            <div class="text">カード到着行</div>
          </div></div>
        <div class="swiper-slide">
        <div class="slide_text">
            <div class="num">04</div>
            <div class="text">アプリをダウンロード</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">05</div>
            <div class="text">アプリでカード番号を確認</div>
          </div>
        </div>
      </div>
      <div class="gallery_navigation">
        <div class="swiper-button-prev"><i class="far fa-chevron-left"></i></div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"><i class="far fa-chevron-right"></i></div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>  

</body>

</html>

JavaScript

来源：https://stackoverflow.com/questions/73922387/swiper-js-dont-swipe-pagination-not-showing-hte-right-page-number

1条答案

按热度按时间

ubof19bj1#

您必须将Swiper称为(更改您的JS)

var swiper = new Swiper('.swiper-container',

您更改了Swiper HTML结构，这就是JS代码不能工作的原因。

我建议https://codesandbox.io/s/6mu6ve?file=/index.html:2163-2206首先只需添加默认的Swiper即可运行。然后编辑您的HTML。这是一种简单的方法。

赞(0）回复(0）举报 2022-10-02

我来回答

Swiper js不会刷卡,分页不显示正确的页码

1条答案

相关问题

热门标签

最新问答