swiper jsで作成したスライドの大きさを変更できない問題を解決したい。

ボタンが押されている時のスライド1枚とそうではないスライド3枚にwidthとheightを適用したい。

ボタンが押されている時のスライド
width600px,height300px

そうではないスライド
width400px,height200px

検証ツールで確認した時になぜか横線で適用したいスタイルが打ち消されてしまう。

widthに対してのみスタイルが打ち消されている。
heightに関しては適用されている。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
10    <link rel="stylesheet" href="css/style.css">
11</head>
12
13<body>
14    <div class="slide-wrap">
15        <div class="swiper-container">
16            <!-- Additional required wrapper -->
17            <div class="swiper-wrapper">
18                <!-- Slides -->
19                <div class="swiper-slide">
20                    <img src="img/sample02.jpg" alt="">
21                </div>
22                <div class="swiper-slide">
23                    <img src="img/sample02.jpg" alt="">
24                </div>
25                <div class="swiper-slide">
26                    <img src="img/sample02.jpg" alt="">
27                </div>
28                <div class="swiper-slide">
29                    <img src="img/sample02.jpg" alt="">
30                </div>
31            </div>
32        </div>
33        <!-- If we need pagination -->
34        <div class="swiper-pagination swiper-pagination-white"></div>
35
36        <!-- If we need navigation buttons -->
37        <!-- <div class="swiper-button-prev swiper-button-white"></div> -->
38        <div class="swiper-button-next swiper-button-white"></div>
39    </div>
40
41    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
42    <script src="js/script.js"></script>
43</body>
44
45</html>

CSS
1.swiper-slide img {
2  width: 100%;
3  border-radius: 12px;
4}
5
6.swiper-pagination {
7  width: 100%;
8  display: -webkit-box;
9  display: -ms-flexbox;
10  display: flex;
11  -webkit-box-pack: center;
12      -ms-flex-pack: center;
13          justify-content: center;
14  gap: 2.4rem;
15}
16
17.swiper-pagination-bullet {
18  background: #9aa5aa;
19  opacity: unset;
20  outline: unset;
21}
22
23.swiper-pagination-bullet-active {
24  background: #5d79f4;
25}
26
27.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
28  margin: unset;
29}
30
31.slide-wrap {
32  position: relative;
33}
34
35.swiper-container {
36  width: calc(100% - 10rem);
37}
38
39.swiper-button-prev,
40.swiper-button-next {
41  outline: unset;
42}
43
44.swiper-button-next.swiper-button-white,
45.swiper-button-prev.swiper-button-white {
46  --swiper-navigation-color: #5d79f4;
47}
48
49.swiper-slide:not(.swiper-slide-active) {
50  width: 400px;
51  height: 200px;
52  -webkit-transform: scale(0.8);
53          transform: scale(0.8);
54  opacity: 0.8;
55  -webkit-filter: grayscale(30%);
56          filter: grayscale(30%);
57}
58
59.swiper-slide-active {
60  width: 600px;
61  height: 300px;
62}
63/*# sourceMappingURL=style.css.map */

JavaScript
1const changeSlideSpeed = 1000;
2const swiper = new Swiper('.swiper-container', {
3    // Optional parameters
4    speed: changeSlideSpeed,
5    loop: true,
6    slidesPerView: 4,
7    // centeredSlides: true,
8
9    autoplay: {
10        delay: 2500
11    },
12
13    // If we need pagination
14    pagination: {
15        el: '.swiper-pagination',
16        clickable: true
17    },
18
19    // Navigation arrows
20    navigation: {
21        nextEl: '.swiper-button-next',
22        // prevEl: '.swiper-button-prev',
23    },
24
25    on: {
26        init: function () {
27            const self = this;
28            setTimeout(() => {
29                const slideElement = self.slides;
30                for (let i = 0; i < slideElement.length; i++) {
31                    slideElement[i].style.transition = (changeSlideSpeed / 1000) + 's';
32                }
33            }, 10);
34        }
35    }
36});
37

試したこと

.swiper-slide:not(.swiper-slide-active),.swiper-slide-activeにスライドの大きさを変えるスタイルを適用した。

行動規範の内容に同意します

回答1件

ベストアンサー

CSSで指定するより、style属性で指定したものの方が優先されます。

!importantをつければ、優先順位を変えることができますが、望んでいるような表現にはならないかもしれません。

css
1
2.swiper-slide:not(.swiper-slide-active) {
3    width: 400px !important;
4    height: 200px;
5    -webkit-transform: scale(0.8);
6    transform: scale(0.8);
7    opacity: 0.8;
8    -webkit-filter: grayscale(30%);
9    filter: grayscale(30%);
10}
11
12.swiper-slide-active {
13    width: 600px !important;
14    height: 300px;
15}