Неправильное отображение слайда?
Добрый день, столкнулся с проблемой в слайдере:
По началу все выглядит хорошо, но когда листаешь слайдер главный слайд - наполовину залазит за экран:
Слайдер в начале:
Слайдер когда пролистнули:
Вот когда слайдера:
var newsSlider = new Swiper(".news-slider", { slidesPerView: 'auto', slidesPerView: 3, spaceBetween: 35, watchSlidesVisibility: true, effect: 'slide', navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); |
var newsSlider = new Swiper(".news-slider", { slidesPerView: 'auto', slidesPerView: 3, spaceBetween: 35, watchSlidesVisibility: true, effect: 'slide', navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, });
Дополнительно:
Ответы:
Посмотрите классы у слайдов, у первых/активных/последних они уникальны.
Пропишите нужные стили на активный слайд, а также почитайте доку по свайперу.
- А так же уберите slidesPerView: 'auto',
- Суть в том, что мне нужно свойство slidesPerView: 'auto',
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для решения проблемы с неправильным отображением слайда на веб-странице, сначала нужно определить причину этой проблемы. Возможно, проблема связана с CSS стилями, JavaScript кодом или ошибками в HTML разметке.
1. Проверьте CSS стили. Убедитесь, что стили, применяемые к слайду, не перекрывают другие стили или не являются неправильными. Может быть стоит проверить высоту, ширину, позиционирование и другие свойства стилей.
<div class="slide"> <img src="slide1.jpg" alt="Slide 1"> </div>
2. Проверьте JavaScript код. Если слайд реализован с помощью JavaScript, убедитесь, что код написан правильно и не содержит ошибок. Проверьте, что все события и анимации работают корректно.
function showSlide(slideNumber) { // код для показа слайда }
3. Проверьте HTML разметку. Убедитесь, что все теги и атрибуты написаны правильно и не содержат ошибок. Проверьте, что все необходимые элементы на странице присутствуют.
4. Проверьте совместимость. Убедитесь, что слайд отображается корректно в разных браузерах и на различных устройствах. Может потребоваться добавить дополнительные стили или скрипты для обеспечения совместимости.
Если после всех этих шагов проблема с отображением слайда все еще остается, попробуйте обратиться к сообществу разработчиков на специализированных форумах или сайтах для получения дополнительной помощи и советов.