Есть страница с двумя слайдерами. Проблема в том, что они абсолютно разные. Первый слайдер: это карусель из разных плейлистов, между которыми можно переключаться. Второй слайдер: это карусель из авторов, где есть изображение и текст. Как мне задать эти двум слайдерам разные размеры, да и вообще разные css-свойства. Код первого swiper:
<div class="swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide slider__playlist"
<p class="playlist__swiper_text">Постпанк </p>
</div>
<div class="swiper-slide">
<p class="playlist__swiper_text"> Хардкор</p>
</div>
<div class="swiper-slide">
<p class="playlist__swiper_text">Панк-рок </p>
</div>
<div class="swiper-slide">
<p class="playlist__swiper_text">Рок</p>
</div>
<div class="swiper-slide">
<p class="playlist__swiper_text">Прогрессивный рок </p>
</div>
<div class="swiper-slide">
<p class="playlist__swiper_text">Электронная музыка </p>
</div>
<div class="swiper-slide">
<p class="playlist__swiper_text"> Классическая музыка </p>
</div>
<div class="swiper-slide">
<p class="playlist__swiper_text">Звуки природы и шум города</p>
</div>
</div>
</div>
Второй swiper:
<div class="swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture>
<source media="(max-width: 670px)" srcset="img/mobile/AB1.png"/>
<source media="(max-width: 830px)" srcset="img/768/about1.png"/>
<source media="(max-width: 1200px)" srcset="img/1024/about1.png"/>
<img src="img/about1.png" class="about__slider_img" alt="Дмитрий Гутенберг"/>
</picture>
<h3 class="about__slider_author">
Дмитрий Гутенберг
</h3>
<p class="about__slider_text">
Эксперт (ну, почти) по всем вопросам (почти)
</p>
</div>
<div class="swiper-slide">
<picture>
<source media="(max-width: 670px)" srcset="img/mobile/ab2.png"/>
<source media="(max-width: 830px)" srcset="img/768/about2.png"/>
<source media="(max-width: 1200px)" srcset="img/1024/about2.png"/>
<img src="img/about2.png" class="about__slider_img" alt="Анна Васильева"/>
</picture>
<h3 class="about__slider_author">
Анна Васильева
</h3>
<p class="about__slider_text">
Как я здесь оказалась? А главное — зачем?
</p>
</div>
<div class="swiper-slide">
<picture>
<source media="(max-width: 670px)" srcset="img/768/about3.png" style="width: 112px;"/>
<source media="(max-width: 830px)" srcset="img/768/about3.png"/>
<source media="(max-width: 1200px)" srcset="img/1024/about3.png"/>
<img src="img/about3.png" class="about__slider_img" alt="Пётр Дмитриевский"/>
</picture>
<h3 class="about__slider_author">
Пётр Дмитриевский
</h3>
<p class="about__slider_text">
Господа! Внимание! Благодарю за внимание!
</p>
</div>
<div class="swiper-slide">
<picture>
<source media="(max-width: 670px)" srcset="img/mobile/ab4.png"/>
<source media="(max-width: 830px)" srcset="img/768/about4.png"/>
<source media="(max-width: 1200px)" srcset="img/1024/about4.png"/>
<img src="img/about4.png" class="about__slider_img" alt="Татьяна Флеганова"/>
</picture>
<h3 class="about__slider_author">
Татьяна Флеганова
</h3>
<p class="about__slider_text">
Одна я в пальто стою красивая, а вокруг…
</p>
</div>
<div class="swiper-slide">
<picture>
<source media="(max-width: 670px)" srcset="img/mobile/ab5.png"/>
<source media="(max-width: 830px)" srcset="img/768/about5.png"/>
<source media="(max-width: 1200px)" srcset="img/1024/about5.png"/>
<img src="img/about5.png" class="about__slider_img" alt="Фёдор Прокопьев"/>
</picture>
<h3 class="about__slider_author">
Фёдор Прокопьев
</h3>
<p class="about__slider_text">
Привет! Я фотограф, музыкант, ведущий
</p>
</div>
<div class="swiper-slide">
<picture>
<source media="(max-width: 670px)" srcset="img/mobile/ab6.png"/>
<source media="(max-width: 830px)" srcset="img/768/about6.png"/>
<source media="(max-width: 1200px)" srcset="img/1024/about6.png"/>
<img src="img/about6.png" class="about__slider_img" alt="Светлана Кортнева"/>
</picture>
<h3 class="about__slider_author">
Светлана Кортнева
</h3>
<p class="about__slider_text">
Художник-оформитель. Оформляю
</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Вот JS-код:
var swiper1 = new Swiper(".swiper1", {
// speed: 100, //500
// spaceBetween: 30,
direction: "horizontal",
loop: true,
slidesPerView: 2,
breakpoints: {
1260: {
slidesPerView: 4,
}
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
// pagination: {
// clickable: true,
// el: '.site-hero__swiper-pagination',
// },
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
});
var swiper1 = new Swiper(".swiper2", {
// speed: 500,
spaceBetween: 15,
// pagination: {
// clickable: true,
// el: '.site-hero__swiper-pagination',
// },
direction: "horizontal",
loop: true,
slidesPerView: 2.15,
// autoplay: {
// delay: 1000,
// stopOnLastSlide: false,
// disableOnInteraction: false,
// },
});
Я начинающий верстальщик, всю голову сломала себе. Помогите, пожалуйста. Так как первый swiper цепляет все css стили второго. И при попытке дописать к нему класс, ничего не происходит.
CSS-свойства первого swiper:
.swiper2 {
display: flex;
width: 256px !important;
}
.swiper-slide .slider__playlist {
width: 113px; /*это свойство не работает, его перекрывает свойство из второго swiper.*/
}
CSS второго swiper:
media (max-width:670px) {
.swiper-button-prev, .swiper-rtl .swiper-button-next {
display: none;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
display: none;
}
.about__article::after {
display: none
}
.about__article::before {
display: none;
}
.about__slider_img {
height: 170px;
width: 170px;
}
.swiper1 {
width: 480px;
}
.swiper-slide {
width: 255px !important;
}
.about__form_input {
width: 98%;
}
.about__form_input_1 {
margin-right: 0;
}
}
media (max-width: 480px) {
.swiper-slide {
width: 113px !important; /*без important размер не срабатывает почему-то*/
}
}.
Первый swiper (с плейлистами) появляется только на мобильной версии странички.
