I do not understand the reason for the slider crash on this site , meaning the appearance of an indent or picture below
Used bootstrap3 , sliderslick . Appears after a few clicks (up to 3) on the arrow and after that leads to the goods, it turns out that chaos
$('.slikslid').slick({ slidesToShow: 4, slidesToScroll: 1, }); .mag_posit1 { text-decoration: none; color: #333333; } .mag_posit1:hover { text-decoration: none; color: #333333; } .mag_posit:hover { border: 2px inset black; padding-bottom: 45px; } .vidor_diag { font-family: OpenSans-Regular; font-size: 14px; color: #000; display: none; } .mag_posit:hover .vidor_diag { display: block; } .sales { background: url(img/sales.png) no-repeat; margin-right: 10px; position: relative; margin-bottom: -40px; margin-top: 15px; } sales_txt { font-family: OpenSans-SemiBold; color: #000; font-size: 12px; margin-left: 9px; margin-top: 8px; position: absolute; } .rating { unicode-bidi: bidi-override; direction: rtl; margin-top: 20px; margin-right: 150px; } .rating>span { display: inline-block; position: relative; width: 0.8em; } .rating>span:hover:before, .rating>span:hover~span:before { content: "\2605"; position: absolute; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <div class="row"> <div class="col-md-3 pull-left" style="position: relative;"> <img src="img/1_top.png" /> <a href="#" style="position: absolute; margin-top: -25px; margin-left: 70px;color:#fff;text-decoration:underline;">СМОТРЕТЬ МОДЕЛИ</a> </div> <div class="cod-md-6 pull-left" style="position: relative;"> <img src="img/2__toop.png" style="margin-left: -3px;" /> <a href="#" style="position: absolute;margin-top: -25px; color:#fff;margin-left: 215px;text-decoration:underline;">СМОТРЕТЬ МОДЕЛИ</a> </div> <div class="col-md-3 pull-left" style="position: relative;"> <img src="img/ibert.png" height="161" width="280" style="margin-left: -13px;" /> <a href="#" style="position: absolute;color:#fff;margin-top: -25px;margin-left: 60px;text-decoration:underline;">СМОТРЕТЬ МОДЕЛИ</a> <img src="img/tigger.png" height="161" width="270" style="margin-left: -13px; margin-top: 3px;" /> <a href="#" style="position: absolute;color:#fff;margin-top: 140px;margin-left: -210px;text-decoration:underline;">СМОТРЕТЬ МОДЕЛИ</a> </div> </div> </div> <div class="container"> <h1 class="text-center txt_header">НОВИНКИ</h1> <div class="row"> <div class="prev-pos"> <p style="font-size: 20px;color:#000;margin-bottom: 200px;position: absolute;margin-left: -15px;"> <img src="img/prev.png" style="margin-top: 170px; margin-left: -10px;"> </p> </div> <div class="next-pos" style="float: right;"> <p style="font-size: 20px;color:#000;margin-bottom: 200px;position: absolute;margin-left: 5px;"> <img src="img/next.png" style="margin-top: 170px;margin-left: 10px;"> </p> </div> <div class="slikslid"> <div class="col-md-3 mag_posit" style="position: relative;"> <a href="#" class="mag_posit1"> <img class="sales" src="img/sales.png" /> <div class="sales_txt">-15%</div> <img src="img/bike.png" alt="bike"> <div class="rating"> <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span> </div> <div class="time_pos"> <button class="btn time_pos_bt">new</button> </div> <div class="name_bike"> <span>Bergamont Vitox 26</span> </div> <div class="type_bike"> <span>Велосипед</span> </div> <div class="started"> <span>12096</span> </div> <div class="price"> <span>10519 грн.</span> </div> <div class="point"> <span style="font-family:OpenSans-Italic;">+</span>1200 BikeПоинтов </div> <span class="fa fa-heart" style="margin-left: 10px;"> <span class="fa fa-bar-chart" style="margin-left: 5px;"> </span></span> </a> <button class="btn btn_baces">В КОРЗИНУ</button> <div class="vidor_diag"> <select class="form-control" style="margin-top: 20px;"> <option>16” (160 - 170 см)</option> <option>16” (160 - 170 см)</option> </select> </div> </div> </div> </div> </div> 
