Почему слайды прижимаются друг к другу?

Ссылка скопирована
CSS HTML Slick
25 февраля 2026 1 ответ

Нужно задать расстояние между слайдами так,чтоб слайды выходили из контейнера. Игрался с абсолютами, все ломается. Какие есть варианты?
snippet

Дополнительно:

обычный margin на слайд.

  • Не совсем понимаю чего именно вы хотите добиться, но в любом случае, если хотите чтобы слайдер работал правильно, не меняйте его свойства, а работаете только с элементами внутри слайдов и конфигом

    вот так например можно сделать отступы внутри слайда при этом, слайды прижат к краям:
    snippet

    Вот пример центральным слайдом, в котором по краям выглядывают соседние слайды:
    snippet

  • Виталий Першин,

    Почему слайды прижимаются друг к другу?

    нужно чтоб было как на этом фото. Тоесть боковые слайды выходят из контейнера и обрезаются.

  • Overlord934, Во втором примере увеличьте centerPadding как вам нужно. А для того чтобы были отступы вам даже не нужно отступы делать, просто ограничьте содержимое слайда по ширине, поставьте 70% для photo__card
  • Виталий Першин, К сожалению, ваш второй пример отображается неккоректно.

    Почему слайды прижимаются друг к другу?

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Роман IT Ответ

    Проблема с прижатием слайдов друг к другу на веб-странице может возникать по разным причинам. Вот несколько возможных причин и способы их решения:

    1. **CSS свойства**: Проверьте CSS свойства, которые могут влиять на расположение слайдов. Например, могут быть установлены отступы (margin) или внутренние отступы (padding), которые могут приводить к прижатию слайдов друг к другу. Убедитесь, что эти свойства правильно настроены.

    2. **Размеры слайдов**: Если размеры слайдов заданы неправильно, это также может привести к их прижатию друг к другу. Убедитесь, что размеры слайдов правильно настроены и что нет ненужных отступов между ними.

    3. **Flexbox или Grid**: Если для размещения слайдов используется Flexbox или Grid, убедитесь, что правильно настроены свойства этих моделей раскладки. Например, установите правильные значения для свойств flex-grow, flex-shrink, flex-basis (для Flexbox) или grid-gap (для Grid).

    Приведу пример кода на языке PHP для создания слайдов с помощью Flexbox:

    <div class="slider">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
</div>
 
 
.slider {
    display: flex;
    flex-wrap: nowrap;
}
 
.slide {
    flex: 0 0 100%; /* Устанавливаем равную ширину для каждого слайда */
}

    <div class="slider"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> </div> .slider { display: flex; flex-wrap: nowrap; } .slide { flex: 0 0 100%; /* Устанавливаем равную ширину для каждого слайда */ }

    Если после проверки и исправления вышеуказанных причин проблема с прижатием слайдов друг к другу все еще остается, возможно, есть другие CSS или JavaScript конфликты на странице, которые могут влиять на расположение элементов. В таком случае рекомендуется провести дополнительный анализ кода и исключить возможные конфликты.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ