0

Как отцентрировать содержимое слайдов в Slick? Тк, в слайдах у меня текст, он всегда в стороне появляется, добавление display: flex ничего не меняет. И единственный вариант, сделать много вложенных div-ов, типо этого

<div class="carousel">
    <div class="slide">
        <div class="inside">
            A
        </div>
    </div>
    <div class="slide">
        <div class="inside">
            B
        </div>
    </div>
</div>

А хотелось бы ограничиться только .carousel и .slide

Вот код

$(document).ready(function(){
    $('.carousel').slick({
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear'
    });
});
.content{
 padding: 50px;
}

.slide{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<div class="content">
    <div class="carousel">
        <div class="slide">
                Ab
        </div>
        <div class="slide">
                Cd
        </div>
    </div>
</div>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

2
  • Оформите пример не работающего кода в снипет
    – doox911
    27 апр 2020 в 6:39
  • @doox911 Вот код, который я бы хотел, но он не рабоает
    – DarkRou
    27 апр 2020 в 6:52

2 ответа 2

1

Ты можешь просто подключить свой файл стилей после стилей библиотеки слика и тогда сможешь переопределить стили, если знаешь как работает специфичность селектора CSS, то получится без труда. Очень не советую бить через !important или лезть исправлять файлы библиотек, очень плохая практика

1
  • Так тоже можно, но когда нужно определить атрибут конкретному блоку не подойдет, также как и мой второй вариант. Но в общем, мне кажется !important более читабельным вариантом
    – DarkRou
    29 апр 2020 в 7:20
0

В ходе моих экспериментов, я нашел 2 пути решения проблемы.

  1. Самый простой - добавить !important к нужному атрибуту, в моём случае это выглядит так display: flex!important;
  2. Второй, также простой но не настолько - вы должны иметь css файл непосредственно на локальной машине, и подключить его вместо CDN. Дальше вы должны зайти в файл slick.css (Или slick.scss, как удобно) и на 103 строке (85 в scss фале), меняете display: block на flex.

P.s. Второй вариант лучше использовать когда вам надо сменить это значение на всех слайдерах на сайте

Upd. 3 вариант, спасибо Максиму Талейникову (дайте ему +1, его сообщение). Можно добавить ваш основной css файл после файлов Slick-а, и переопределить тот класс, который вам нужен. Но этот вариант потребует понимания работы классов Slick

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.