Как использовать slick для товаров?

Question

[Анастасия Панфилова]

Суть в том, что мне нужно сделать слайдер с товарами, где есть ссылка на товар и кнопка "положить в корзину".
Когда я прикручиваю slick слайдер он как "перекрывает" все элементы, можно ли это исправить?

html

<div class="slick-hot">
                        <div class="hot-product">
                            <a href="">
                                <div class="hot-product__image" style="background-image: url(/img/0.jpg);"></div>
                            </a>
                            <div class="hot-product__info">
                                <h3 class="hot-product__name"><a href="#">Имя продукта</a></h3>
                                <div class="hot-product__cost">10 000 <i class="fa fa-rub"></i></div>
                                <div class="hot-product__links">
                                    <a class="hot-product__buy"><i class="fa fa-opencart"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="hot-product">
                            <a href="">
                                <div class="hot-product__image" style="background-image: url();">
                                </div>
                            </a>
                            <div class="hot-product__info">
                                <h3 class="hot-product__name"><a href="#">Имя продукта</a></h3>
                                <div class="hot-product__cost">10 000 <i class="fa fa-rub"></i></div>
                                <div class="hot-product__links">
                                    <a class="hot-product__buy"><i class="fa fa-opencart"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="hot-product">
                            <a href="">
                                <div class="hot-product__image" style="background-image: url();">
                                </div>
                            </a>
                            <div class="hot-product__info">
                                <h3 class="hot-product__name"><a href="#">Имя продукта</a></h3>
                                <div class="hot-product__cost">10 000 <i class="fa fa-rub"></i></div>
                                <div class="hot-product__links">
                                    <a class="hot-product__buy"><i class="fa fa-opencart"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

js

$('.slick-hot').slick({
        dots: true,
        infinite: false,
        speed: 600
    });

Answer 1

[Егор Живагин]

Как это - перекрывает?) Не понятно, нужен codepen или jsfiddle

Навскидку - поиграйтесь z-index - ами всех блоков в слайдере (и контейнера, и подкладки), слик любит их задавать с избытком

Answer 2

[Петр]

Попробуйте задать z-index в стиле элементов, которые вы хотите отображать поверх.

Comments

[Анастасия Панфилова]

пробовала, не работает