Как отцентрировать содержимое слайда Slick

Question

Как отцентрировать содержимое слайдов в 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>

Answer 1

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

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

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

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

Answer 2

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

БЛОГ НА HUSL

Как отцентрировать содержимое слайда Slick

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