Почему в слайдере показывает криво изоражение?
На одной странице показывает нормально, а на этой плохо
<section class="container"> <div class="slider-wrapper"> <div class="slider"> <img id="slide-1" src="img/самойбийц.png" alt="Aokigahara" /> <img id="slide-2" src="img/лес.png" alt="Aokigahara" /> </div> <div class="slider-nav"> <a href="#slide-1"></a> <a href="#slide-2"></a> </div> </section> |
<section class="container"> <div class="slider-wrapper"> <div class="slider"> <img id="slide-1" src="img/самойбийц.png" alt="Aokigahara" /> <img id="slide-2" src="img/лес.png" alt="Aokigahara" /> </div> <div class="slider-nav"> <a href="#slide-1"></a> <a href="#slide-2"></a> </div> </section>
body { background-color: #f8fafc00; } .container { padding: 0px; } .slider-wrapper { position: relative; top: 200px; max-width: 786px; margin: 0; } .slider { display: flex; aspect-ratio: 16/9; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25); border-radius: 8px; } .slider::-webkit-scrollbar { display: none; } .slider img { width: 100%; scroll-snap-align: start; object-fit: cover; } .slider-nav { display: flex; column-gap: 16px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1; } .slider-nav a { width: 8px; height: 8px; border-radius: 50%; background-color: #000000; opacity: 1; transition: opacity ease 500ms; } .slider-nav a:hover { opacity: 1; background-color: #464545; } |
body { background-color: #f8fafc00; } .container { padding: 0px; } .slider-wrapper { position: relative; top: 200px; max-width: 786px; margin: 0; } .slider { display: flex; aspect-ratio: 16/9; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25); border-radius: 8px; } .slider::-webkit-scrollbar { display: none; } .slider img { width: 100%; scroll-snap-align: start; object-fit: cover; } .slider-nav { display: flex; column-gap: 16px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1; } .slider-nav a { width: 8px; height: 8px; border-radius: 50%; background-color: #000000; opacity: 1; transition: opacity ease 500ms; } .slider-nav a:hover { opacity: 1; background-color: #464545; }
Дополнительно:
сделай демонстрацию, иначе как ответить на твой вопрос, если я например - не вижу картинки там в помине, потому что она у тебя локально на твоём компе, от того что ты указал пути к ней в коде в вопросе, она у меня перед глазами не отобразиться
Ответы:
Точно я вам сказать не могу, но проверьте:
Размер изображений.
Убедитесь, что все изображения имеют одинаковый размер и соотношение сторон, чтобы они хорошо вписывались в слайдер.
Атрибуты изображений.
Убедитесь, что атрибуты width и height установлены в соответствующие значения для каждого изображения. Например:
<img id="slide-1" src="img/самойбийц.png" alt="Aokigahara" width="786" height="442" /> |
<img id="slide-1" src="img/самойбийц.png" alt="Aokigahara" width="786" height="442" />
Кэширование изображений.
Изменения в изображениях могут не отображаться из-за кэширования. Попробуйте очистить кэш браузера или обновить страницу, можно использовать сочетание клавиш Ctrl + F5.
Пути к изображениям.
Проверьте, что пути к изображениям (src атрибуты) указаны правильно и ведут к нужным изображениям.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разобраться, почему изображение в слайдере показывается криво, необходимо рассмотреть несколько возможных причин и попробовать их исправить.
1. Размер изображений: Убедитесь, что все изображения, которые вы используете в слайдере, имеют одинаковые размеры. Если изображения имеют разные размеры, это может привести к искажению отображения в слайдере. Вы можете использовать CSS для установки фиксированного размера для изображений или обрезать изображения до нужного размера.
.slider img { width: 100%; height: auto; }
2. CSS стили: Проверьте CSS стили, которые применяются к слайдеру и изображениям внутри него. Возможно, некорректные стили могут вызывать искажение изображений. Проверьте, нет ли лишних свойств CSS, которые могут влиять на отображение изображений.
3. JavaScript: Если вы используете JavaScript для работы со слайдером, убедитесь, что скрипт правильно обрабатывает изображения и не вызывает искажения. Проверьте, нет ли ошибок в скрипте, которые могут привести к неправильному отображению изображений.
4. Формат изображений: Убедитесь, что форматы изображений подходят для использования в слайдере. Некоторые форматы изображений могут быть не поддерживаемыми или вызывать проблемы с отображением.
Если после выполнения всех этих шагов проблема с искаженным отображением изображений в слайдере все еще остается, попробуйте обратиться к документации или поддержке плагина или библиотеки, которую вы используете для слайдера. Возможно, существует специфическое решение для вашего случая.