Почему первый слайд не отображается? Я понимаю, что он скрыт, но не могу понять, как сделать его видимым. Вот ссылка на сайт: <a href="https://castplast.ru/" rel="nofollow">https://castplast.ru/</a> <br/> <pre><code class="javascript">const PrintSwiper = new Swiper('.swiper__print', { slidesPerView: 3, centeredSlides: true, spaceBetween: 30, loop: true, pagination: { el: ".swiper-pagination", type: "fraction", }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); const heroEl = document.querySelector(".hero"); const fullSizeWrapEl = heroEl.querySelector(".hero__fullsize"); const contentEls = heroEl.querySelectorAll(".swiper .content"); const contentFullsizeEls = Array.from(contentEls, (el) => { const clone = el.cloneNode(true); Splitting({ target: clone, by: "words" }); clone.classList.add( "hero__content", "hero__content--hidden", "content--hero" ); clone.classList.remove("content--slide"); return clone; }); contentFullsizeEls.forEach((el) => fullSizeWrapEl.appendChild(el)); const state = { topContent: null, bottomContent: null }; function slideChange(swiper) { const activeSlide = swiper.slides[swiper.activeIndex]; const contentIndex = activeSlide.getAttribute('data-swiper-slide-index'); const content = contentFullsizeEls[contentIndex]; if (!content) return; if (state.bottomContent) { state.bottomContent.classList.remove("hero__content--bottom"); state.bottomContent.classList.add("hero__content--hidden"); } if (state.topContent) { state.topContent.classList.remove("hero__content--top"); state.topContent.classList.add("hero_
Судя по вашему описанию и приведенному коду, проблема с отображением первого слайда может быть связана с несколькими факторами. Первое, что нужно проверить — это как слайды обрабатываются и отображаются во время инициализации Swiper. Вот несколько рекомендаций, которые могут помочь вам решить проблему: 1. **Проверка CSS-стилей**: Убедитесь, что у вас нет стилей, которые скрывают первый слайд. Например, если у вас есть правило CSS, которое делает его непрозрачным (opacity: 0) или имеет display: none. Вы можете использовать инструменты разработчика в браузере, чтобы проверить, действительно ли первый слайд отображается или скрыт. 2. **Класс 'hidden'**: В вашем коде вы добавляете класс "hero__content--hidden" к каждому клонированному элементу. Убедитесь, что данный класс не применяется к первому слайду либо удалите его, если это неправильно. 3. **Проверка логики переключения слайдов**: Убедитесь, что функция `slideChange`, которая, судя по вашему коду, отвечает за отображение контента при смене слайдов, правильно обрабатывает первый слайд. Например, стоит проверить, правильно ли используется `activeIndex` для получения контента. 4. **Инициализация слайдера**: Посмотрите, правильно ли вы инициализировали Swiper. Возможно, стоит добавить слушатель события `init`, где можно сделать дополнительные действия после полной инициализации слайдера. 5. **Консольные логи**: Добавьте `console.log` в различных местах вашего кода, чтобы проверить, какие элементы выбираются и ведет ли логика к ожидаемому результату. Это поможет вам понять, происходит ли что-то неожиданное. 6. **Проверка на отсутствие JS-ошибок**: Открыть консоль разработчика и посмотреть, нет ли ошибок JavaScript, которые могут мешать корректной работе вашего кода. Чтобы упростить отладку, вы можете попробовать временно отключить некоторые части кода, чтобы увидеть, влияет ли это на отображение первого слайда. Это может помочь сузить круг поиска проблемы.
Привет
1. Прозвучит смешно, но нужно проверить подключение библиотеки.
2. Потом проверить вложенность HTML и CSS классов, бывало, что опечатка и все.
3. Попробуйте отключить loop и проверить, отображается ли первый слайд.
4. Проверьте кастомную логику (slideChange и swiperInit).
5. Используйте DevTools для диагностики.