БЛОГ НА HUSL


При использовании slick slider, на первом элементе (в контейнере со слайдами) не видно тень, которая по сути есть на всех слайдах

Автор вопроса: markus

При использовании slick slider, на первом элементе (в контейнере со слайдами) не видно тень, которая по сути есть на всех слайдах, но кроме первого (она уходит за пределы блока). Пробую поставить через код элемента для всех слайдов margin-left и всё нормально. Ставлю уже в самом файле css и всё тоже самое (не видно тень). Пробовал через js добавлять стиль, но тоже самое.

$('.dynamic-cards').slick({
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  dotsClass: "dynamic-dots",
  variableWidth: true,
});
/*Dynamic
============================================*/
.dynamic {
    max-width: 1210px;
    margin: 0 auto;
    margin-top: 200px;
}

.dynamic-title {
    margin-bottom: 80px;

    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 64px;
    color: #000;
}

.dynamic-cards {
    max-width: 1210px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.dynamic-card {
    margin-right: 38px;
    margin-bottom: 3px;
    max-width: 375px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    border-radius: 7px;
}

.dynamic-card-img {
    max-width: 100%;
}

.dynamic-card-content {
    padding: 30px 63px 30px 28px;
}

.dynamic-name-house {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 140%;
    color: #000;
}

.dynamic-subtitle {
    margin-top: 20px;

    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 140%;
    color: #000;
}

.dynamic-date {
    margin-top: 36px;

    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    color: #000;
}

.dynamic-dots {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.dynamic-dots li {
    margin: 0 7.5px;
}

.dynamic-dots li button {
    font-size: 0;
    line-height: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    outline: none;
    background-color: transparent;
    border: 3px solid #c4c4c4;
    padding: 0;
}

.dynamic-dots li[class="slick-active"] button {
    background-color: #d01010;
    border: 0;
    width: 15px;
    height: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic">
    <h6 class="dynamic-title">Динамика строительства</h6>
        <div class="dynamic-cards">

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-1.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-2.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-3.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-1.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-2.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-3.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-1.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-2.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

            <div class="dynamic-card">
                <img class="dynamic-card-img" src="img/dynamic/item-3.png" alt="Участок">
                <div class="dynamic-card-content">
                    <span class="dynamic-name-house">Участок 41 – дом 125 кладка стен</span>
                    <p class="dynamic-subtitle">Публикуем актуальный фото отчет со стройплощадки.</p>
                    <p class="dynamic-date">от 15 декабря</p>
                </div>
            </div>

        </div>
</div>

https://roderen.github.io/onegin/ - не стал создавать новый репозиторий и кинул весь сайт (хоть и могут украсть, ыыы). Проблема почти в самом низу.

Как сейчас:

Как нужно: введите сюда описание изображения


Источник

Ответы (1 шт):

Автор решения: Alexandr

Твой вариант не работает в принципе (margin-left), просто ты не листал слайды когда вводил в режиме отладки.

Любопытно, что слайдер в принципе не позиционирует слайды по центру, а чуть левее прижимает. Но это ладно.

Вот решение:

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 5px;
}

Я просто добавил отступы "внутрь" для слайдов в контейнере.

2 вариант решения (более правильный будет), это как раз центрировать слайды, не уверен что сработает, в отладчике при редактировании JS ничего не происходит прост. Добавил центрирование слайдов из API Slick Slider

$('.dynamic-cards').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  dotsClass: "dynamic-dots",
  variableWidth: true,
  centerMode: true // Добавить центрирование слайдов
});
→ Ссылка

licensed under cc by-sa 3.0 with attribution.