主页 / 问题 / 1542444
Accepted
The__Tip учусь
Asked:2023-09-25 11:09:41 +0000 UTC2023-09-25 11:09:41 +0000 UTC

如何将颜色从标准黑色更改为白色并删除 min.css 中滑动器的不透明度？

  • 772

const swiper = new Swiper('.swiper-container', {
  // Цикличность
  loop: true,
  // Пагинация
  pagination: {
      el: '.swiper-pagination',
      clickable: true
  },
  a11y: {
      paginationBulletMessage: 'Тут название слайда {{index}}',
  }
});
.swiper__box{
position: relative;
height: 600px;
overflow: hidden;

}

.swiper-container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: aqua;

}

.swiper-slide{
height: 100%;

}



.slide-img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}


.swiper-pagination{
padding-bottom: 70px;
color: #fff;
} 

.swiper-pagination-bullet{
opacity: 1;

}
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.3.0/swiper-bundle.min.js" integrity="sha512-QokzG/B/9i5X3BYbmuyNn2ah9EiApK5KY4saOYZRCQINuB+X52ED0L3RCc/1x7YUA85qaFZ9uoB4x5SmkLGCJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.3.0/swiper-bundle.min.css" integrity="sha512-ryx4QW6sYyQthh6MIGW1cDEfNuIwTsvWtORXg5t3sqmh3TSNmqMr+VBN5N0T+z0GqqsiDJ5O8YhP4diuBGmcrw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>


<div class="swiper__box">
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image/slider__bg.jpg" alt="">
      </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

  
</div>



</body>
</html>

在此输入图像描述

javascript

2 个回答

  1. Best Answer

    .swiper__box如果问题涉及点，那么通过添加额外的父类并定义所需的所有内容来提高它们的样式优先级就足够了。

    .swiper__box .swiper-pagination-bullet {
  opacity: 1;
  background: #fff;
}


    const swiper = new Swiper('.swiper-container', {
  // Цикличность
  loop: true,
  // Пагинация
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  a11y: {
    paginationBulletMessage: 'Тут название слайда {{index}}',
  }
});
    .swiper__box {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.swiper-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: aqua;
}

.swiper-slide {
  height: 100%;
}

.slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination {
  padding-bottom: 70px;
  color: #fff;
}

.swiper__box .swiper-pagination-bullet {
  opacity: 1;
  background: #fff;
}

.swiper__box .swiper-pagination-bullet-active {
  background: blue;
}
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.3.0/swiper-bundle.min.js" integrity="sha512-QokzG/B/9i5X3BYbmuyNn2ah9EiApK5KY4saOYZRCQINuB+X52ED0L3RCc/1x7YUA85qaFZ9uoB4x5SmkLGCJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.3.0/swiper-bundle.min.css" integrity="sha512-ryx4QW6sYyQthh6MIGW1cDEfNuIwTsvWtORXg5t3sqmh3TSNmqMr+VBN5N0T+z0GqqsiDJ5O8YhP4diuBGmcrw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>

<body>
  <div class="swiper__box">
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class="slide-img" src="image/slider__bg.jpg" alt="">
        </div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
    </div>
</body>

</html>

    • 1

  2. 上面的选项当然是有效的，但是要在Swiper中编辑某些值，有时可以使用变量，Swiper 本身在文档中提供了这些变量，例如用于分页模块。

    const swiper = new Swiper('.swiper', {
  spaceBetween: 10,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
});
    @import url(https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css);

.swiper {
  width: 600px;
  height: 300px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
  color: #fff;
}

.swiper-pagination {
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 1;
}
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

    这个解决方案可能更干净，特别是如果您计划使用不同的主题。

    • 0

相关问题