How to use slick for products?

Question

css

The bottom line is that I need to make a slider with products, where there is a link to the product and the "add to cart" button.
When I screw the slick slider it seems to "overlap" all the elements, can this be fixed?

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

How does it overlap?) It's not clear, you need a codepen or jsfiddle Offhand
- play around with z-index - all the blocks in the slider (both the container and the lining), the slick likes to set them in excess

Answer 2

Try setting the z-index on the style of the elements you want to overlay.