Почему swiper-слайдер ломает Грид-сетку всего блока?
В общем у меня на Декстопе была нормальная сетка, всё было расположено как надо.
Для мобилок(и только) мне эту сетку надо превратить в слайдер. Я сделал брекпойнт768px и переписал сетку так, чтобы на мобилке было 5 колонок, и только один ряд. Соответственно, на мобилке все карточки стали в ряд, потом я добавил Swiper-slider и собственно получился слайдер. Одна карточка на экране, её перелистываешь. (Как экран становится больше 768px - слайдер убираем, должна появиться сетка.)
Но потом оказалось, что на мобилке то всё отображается нормально(хотя конечно ещё вопросик, почему слайдеры стоят кривовато, не по центру). Но вот как экран становится больше 768 - мои карточки почему то перестают подчиняться Грид-сетке, всё ломается.
<section class="projects"> <div class="container"> <div class="body"> <h1 class="section-title">Наши проекты</h1> <div class="swiper" id="slider3"> <div class="swiper-wrapper projects__content"> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/1.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №1</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/2.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №2</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/3.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №3</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/4.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №4</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/5.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №5</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/4.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №6</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> </div> <div class="swiper-pagination"></div> </div> <button class="project__button"> Смотреть еще </button> </div> </div> </section> |
<section class="projects"> <div class="container"> <div class="body"> <h1 class="section-title">Наши проекты</h1> <div class="swiper" id="slider3"> <div class="swiper-wrapper projects__content"> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/1.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №1</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/2.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №2</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/3.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №3</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/4.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №4</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/5.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №5</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> <div class="swiper-slide projects__item"> <img src="images/projects_grid_img/4.jpg" alt=""> <a href="" class="projects__title">Название объекта в две строки №6</a> <p class="projects__subtitle">Описание работ, перечисление проделанной работы</p> </div> </div> <div class="swiper-pagination"></div> </div> <button class="project__button"> Смотреть еще </button> </div> </div> </section>
/* ==========Projects========= */ .projects__content { display: grid; grid-template: repeat(4, auto) / repeat(3, minmax(300px, 388px)); gap: 25px; } .projects__item { border: 1px solid #0A69F9; border-radius: 12px; display: grid; gap: 20px; } .projects__item:nth-child(6){ grid-column: span 3; display: none; } /* Почему если убрать min-height, некоторые картинки "теряют" высоту?*/ .projects__item img{ width: 100%; min-height: 250px; object-fit: cover; border-radius: 12px; } .projects__item:nth-child(2){ grid-column: span 2; grid-row: span 2; } .projects__item:nth-child(4){ grid-column: span 2; } .projects__title { font-size: 30px; font-weight: 700; display: inline-block; text-align: start; color: #000; margin: 0 5px; } .projects__subtitle { font-size: 20px; text-align: start; max-width: 452px; margin: 0 5px 20px 5px; } .project__button{ max-width: 380px; min-width: 300px; padding: 24px 40px; border: 2px solid #0A69F9; background: transparent; color: #0A69F9; font-size: 20px; border-radius: 10px; margin: 40px auto 0 auto; display: block; transition: all 0.3s ease; } .project__button:hover{ opacity: 0.8; } /* Слайдер уходит */ @media(max-width: 992px){ .projects__content { grid-template: repeat(3, auto) / repeat(2, auto); } .projects__item:nth-child(2){ grid-column: span 1; grid-row: span 1; } .projects__item:nth-child(4){ grid-column: span 1; } .projects__item:nth-child(5){ grid-column: span 1; justify-self: center; } .projects__item:nth-child(6){ grid-column: span 2; } } /* Слайдер появляется - стили для грид-сетки */ @media(max-width: 768px){ .projects__content{ display: grid; grid-template: repeat(1, auto) / repeat(5, auto); } .project__button{ display: none; } .projects__item { grid-column: span 1; grid-row: span 1; } .projects__item img{ height: 300px; } } |
/* ==========Projects========= */ .projects__content { display: grid; grid-template: repeat(4, auto) / repeat(3, minmax(300px, 388px)); gap: 25px; } .projects__item { border: 1px solid #0A69F9; border-radius: 12px; display: grid; gap: 20px; } .projects__item:nth-child(6){ grid-column: span 3; display: none; } /* Почему если убрать min-height, некоторые картинки "теряют" высоту?*/ .projects__item img{ width: 100%; min-height: 250px; object-fit: cover; border-radius: 12px; } .projects__item:nth-child(2){ grid-column: span 2; grid-row: span 2; } .projects__item:nth-child(4){ grid-column: span 2; } .projects__title { font-size: 30px; font-weight: 700; display: inline-block; text-align: start; color: #000; margin: 0 5px; } .projects__subtitle { font-size: 20px; text-align: start; max-width: 452px; margin: 0 5px 20px 5px; } .project__button{ max-width: 380px; min-width: 300px; padding: 24px 40px; border: 2px solid #0A69F9; background: transparent; color: #0A69F9; font-size: 20px; border-radius: 10px; margin: 40px auto 0 auto; display: block; transition: all 0.3s ease; } .project__button:hover{ opacity: 0.8; } /* Слайдер уходит */ @media(max-width: 992px){ .projects__content { grid-template: repeat(3, auto) / repeat(2, auto); } .projects__item:nth-child(2){ grid-column: span 1; grid-row: span 1; } .projects__item:nth-child(4){ grid-column: span 1; } .projects__item:nth-child(5){ grid-column: span 1; justify-self: center; } .projects__item:nth-child(6){ grid-column: span 2; } } /* Слайдер появляется - стили для грид-сетки */ @media(max-width: 768px){ .projects__content{ display: grid; grid-template: repeat(1, auto) / repeat(5, auto); } .project__button{ display: none; } .projects__item { grid-column: span 1; grid-row: span 1; } .projects__item img{ height: 300px; } }
const swiper3 = new Swiper('#slider3', { //стрелки navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', enabled: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, slidesPerView: 1, breakpoints: { 768: { enabled: false, slidesPerView: 5, } } }) |
const swiper3 = new Swiper('#slider3', { //стрелки navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', enabled: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, slidesPerView: 1, breakpoints: { 768: { enabled: false, slidesPerView: 5, } } })
Подскажите пожалуйста в чём дело, я не понимаю.
Дополнительно:
Ответы:
Потому что swiper у вас инициализирован с самого начала.
Вы бы хоть доку почитали, она ведь максимально понятная.
768: {
enabled: false,
slidesPerView: 5,
}
Я так понимаю, что этими строчками вы якобы хотели инициировать swiper по бреикпоинту, но это так не работает.
Сделайте так:
let breakpoint_mobile_min = window.matchMedia('(min-width: 768px)'), projectInit = false, projectSlider= Swiper; function projectSliderInit() { if (breakpoint_mobile_min.matches) { if (projectInit) { if ($('#slider3').hasClass('swiper-initialized')) { projectSlider.destroy(); projectInit = false; } } } else { if (!projectInit) { projectInit = true; projectSlider= new Swiper('#slider3', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', enabled: false, //определитесь нужны вам стрелки или нет }, pagination: { el: '.swiper-pagination', clickable: true, }, slidesPerView: 1, }); } } } $(window).on('resize load', function () { projectSliderInit(); }); |
let breakpoint_mobile_min = window.matchMedia('(min-width: 768px)'), projectInit = false, projectSlider= Swiper; function projectSliderInit() { if (breakpoint_mobile_min.matches) { if (projectInit) { if ($('#slider3').hasClass('swiper-initialized')) { projectSlider.destroy(); projectInit = false; } } } else { if (!projectInit) { projectInit = true; projectSlider= new Swiper('#slider3', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', enabled: false, //определитесь нужны вам стрелки или нет }, pagination: { el: '.swiper-pagination', clickable: true, }, slidesPerView: 1, }); } } } $(window).on('resize load', function () { projectSliderInit(); });
- ну я js полноценно ещё не начинал изучать, так что я так сам не смог бы. Учиться надо, ведь пока то, что вы написали для меня непонятно.
- Но как я понял, большинство переменных тут это из доков свайпера? Надо будет их прочитать
- Danila232, дело вовсе не в переменных. А в том, как вы инициализируете swiper. Вы написали, что он нужен только ниже 768px, но при этом инициализируете его сразу, не проверяя ширину экрана. Поэтому к вашим стилям еще приписываются дефолтные стили swiper-а и ломается верстка.
Также например вы указываете селекторы стрелок, но почему-то указываете enabled: false;
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, может быть вызвана различными факторами. Один из возможных вариантов, почему swiper-слайдер ломает грид-сетку всего блока, может быть связан с тем, что swiper-слайдер имеет свои собственные стили, которые могут конфликтовать с вашей грид-сеткой.
Для решения данной проблемы вам следует проверить следующие варианты:
1. Проверьте стили swiper-слайдера: возможно, они переопределяют стили вашей грид-сетки. Убедитесь, что стили swiper-слайдера не пересекаются с вашими собственными стилями.
2. Проверьте структуру разметки: убедитесь, что swiper-слайдер и грид-сетка находятся на одном уровне вложенности и правильно оформлены с точки зрения HTML-кода.
3. Используйте специфичность стилей: если у вас возникают проблемы с переопределением стилей, попробуйте использовать более специфичные селекторы для вашей грид-сетки, чтобы избежать конфликтов.
Приведу пример кода на языке PHP, который может помочь вам решить данную проблему:
.swiper-container { overflow: hidden; } .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } .grid-item { padding: 10px; }
Надеюсь, что эти рекомендации помогут вам решить проблему с swiper-слайдером, который ломает грид-сетку вашего блока. Если у вас остались дополнительные вопросы, не стесняйтесь задавать их.