Пропадают картинки в slick slide при адаптиве

192
17 ноября 2021, 08:30

Добрый вечер проблема следуйщая, при респонсиве слайдера пропадают его картинки.

$(function(){ 
 
    $('.slider__inner-additional').slick({ 
      slidesToShow: 4, 
      slidesToScroll: 1, 
      focusOnSelect: true, 
      centerMode: false, 
      variableWidth: true, 
      arrows: false, 
    responsive: [ 
    { 
      breakpoint: 960, 
      settings: {  
               
      } 
    }, 
    ] 
    }); 
 
});
html { 
	box-sizing: border-box; 
} 
 
*, *::before, *::after { 
	box-sizing: inherit; 
} 
 
body { 
	font-family: 'HelveticaNeue'; 
	background-image: url(../images/bg.png); 
} 
 
ul { 
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
} 
 
li { 
	display: inline-block; 
} 
 
a { 
	display: inline-block; 
	text-decoration: none; 
} 
 
.wrap { 
	max-width: 960px; 
	margin: 0 auto; 
	padding: 0 10px; 
} 
 
.slider__inner-additional { 
	margin-top: 15px; 
} 
 
.slider-additional__item { 
	background-color: #e8603c; 
	background-position: top center; 
	background-size: cover; 
	background-repeat: no-repeat; 
	max-width: 140px; 
	min-height: 120px; 
} 
 
.slider__inner-additional .slick-slide { 
	width: 140px; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Document</title> 
  <link rel="stylesheet" href="css/fonts.css"> 
  <link rel="stylesheet" href="css/normalize.css"> 
  <link rel="stylesheet" href="css/slick.css"> 
  <link rel="stylesheet" href="css/slick-theme.css"> 
  <link rel="stylesheet" href="css/style.css"> 
  <link rel="stylesheet" href="css/media.css"> 
</head> 
<body> 
 
  <header class="header"> 
    <div class="wrap"> 
       
  <section class="slider"> 
    <div class="wrap"> 
      <div class="slider__inner"> 
 
         
 
      <div class="slider__inner-additional"> 
 
        <div class="slider-additional__item" style="background-image: url(images/sliders/slider-additional/img-1.jpg)" > 
        </div>   
 
        <div class="slider-additional__item" style="background-image: url(images/sliders/slider-additional/img-2.jpg)"> 
        </div>   
 
        <div class="slider-additional__item" style="background-image: url(images/sliders/slider-additional/img-3.jpg)"> 
        </div>   
 
        <div class="slider-additional__item" style="background-image: url(images/sliders/slider-additional/img-4.jpg)"> 
        </div>   
 
        <div class="slider-additional__item" style="background-image: url(images/sliders/slider-additional/img-5.jpg)"> 
        </div>   
 
        <div class="slider-additional__item" style="background-image: url(images/sliders/slider-additional/img-6.jpg)">  
        </div> 
        <div class="slider-additional__item" style="background-image: url(images/sliders/slider-additional/img-6.jpg)">  
        </div> 
 
      </div> 
    </div> 
  </section> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="js/slick.min.js"></script> 
<script src="js/script.js"></script>   
</body> 
</html>

Так вот без адаптива картинки отображаются нормально, но стоит только перейти черту респонсива, они сразу пропадают.

READ ALSO
Смена значений innerhtml
javascript

Смена значений innerhtml

На странице есть span <span id="chart_title">Cur</span> Как сделать так, чтобы ему присваивались значения переменной, даже если переменная меняет свое...

 135
Запрос с nodejs на API написаном на ASP.NET
javascript

Запрос с nodejs на API написаном на ASP.NET

API на ASPNET отдает мне xml, как вытянуть данные из него на nodejs? Пытался конвертнуть xml в json, но из входящих 3 страниц xml я получил 12 страниц json

 214
Проблемы с animation jquery
javascript

Проблемы с animation jquery

Пытаюсь помощью jquery сделать следующие: сначала отрабатывает эффект FadeIn, потом callback-функцией вызывается анимация, изменяющая opacity и transform...

 171
Не работает jquery в Safari [закрыт]
javascript

Не работает jquery в Safari [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

 183