Why doesn't the carousel slick.js?

The blocks disappear. Use a plugin slick.js help please.
Here is the code:

HTML:
<div class="pricingTab">
 <div class="priceTable1">
 <div class="headerOfTab">Minimum</div>
 <div class="hrOfTab"></div>
 <div class="priceOfTab"> <div class="priceOfTabMini">$</div>120</div>
 <ul class="textOfTab">
 the <li>10 photos</li>
 <li class="li">Photo size<br>1200x800</li>
 <li class="li">Shooting 3-4 images</li>
</ul>
</div>
 <div class="priceTable2">
 <div class="headerOfTab">Comfortable</div>
 <div class="hrOfTab"></div>
 <div class="priceOfTab"> <div class="priceOfTabMini">$</div>170</div>
 <ul class="textOfTab">
 the <li>20 photos</li>
 <li class="li">Photo size<br>1200x800</li>
 <li class="li">Shooting 4-5 images</li>
</ul>
</div>
 <div class="priceTable3">
 <div class="headerOfTab">Standard</div>
 <div class="hrOfTab"></div>
 <div class="priceOfTab"> <div class="priceOfTabMini">$</div>350</div>
 <ul class="textOfTab">
 <p>30 photos</li>
 <li class="li">photo Book sizes<br>20x20 with 10 turns</li>
 <li class="li">Photo size<br>1200x800</li>
 <li class="li">Shooting 6-10 images</li>
</ul>
</div>
 </div>


CSS:
.pricingTab {
 width: 1024px;
 height: 450px;
 transform: translateX(-50%);
 position: absolute;
 top: 253px;
 left: 50%;
}
.priceTable1 {
 width: 320px;
 height: 450px;
 background-color: #252c33;
 position: absolute;
 top: 0;
 left: 0;
}
.priceTable2 {
 width: 320px;
 height: 450px;
 background-color: #252c33;
 position: absolute;
 top: 0;
 left: 350px;
}
.priceTable3 {
 width: 320px;
 height: 450px;
 background-color: #252c33;
 position: absolute;
 top: 0;
 right: 0;
}
.headerOfTab {
 margin: 0;
 position: absolute;
 top: 33px;
 left: 40px;
}
.hrOfTab {
 height: 3px;
 width: 240px;
 background-color: #fff;
 position: absolute;
 top: 77px;
 left: 40px;
}
.priceOfTab {
 position: absolute;
 top: 105px;
 left: 50.88 px;
}
.priceOfTabMini {
 position: absolute;
 top: 0;
 left: -10.88 px;
}
.textOfTab {
 width: 280px;
 margin: 0;
 padding: 0;
 text-align: right;
 list-style-type: none;
 position: absolute;
 top: 165px;
 right: 40px;
}
.textOfTab .li {
 margin-top: 4px;
}


JQEURY:
$('.pricingTab').slick({
 arrows: true,
 slidesToShow: 3,
 slidesToScroll: 1
 });
July 2nd 19 at 14:02
1 answer
July 2nd 19 at 14:04
slick and. it is running fine. he broke through their styles position: absolute; transform: translateX();
without the styles works fine: https://jsfiddle.net/oaz9hczh/1/
didn't work - Arnulfo_Gra commented on July 2nd 19 at 14:07

Find more questions by tags jQuerySliderSlick