Slick Slider - Реализация с использованием PHP вызывает ошибку с фоновым изображением ⇐ Php

[Anonymous]

Я сделал довольно милый гладкий-слайдер. < /p>
Это работает, прежде чем я заставлю его использовать PHP и размещать его на моем сайте.

Код: Выделить всё

    $(function() {
//console.log( "ready!" );

// SLIDER
console.clear();

var carousels = $('.funky-slider');
var config = {
dots: true,
arrows: false,
infinite: true,
speed: 700,
autoplay: false,
autoplaySpeed: 5000,
slidesToShow: 3,
slidesToScroll: 1,
swipeToSlide: true,
pauseOnHover: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1
}
}
]
};
carousels.slick(config);

carousels.on('breakpoint', function(slick) {
carousels.slick('setPosition');
// console.log(slick.currentTarget.slick);
var count = slick.currentTarget.slick.slideCount;
var show = slick.currentTarget.slick.options.slidesToShow;

if (show >= count) {
carousels.slick('unslick');
}

});

carousels.on('destroy', function() {
carousels.slick(config);
});
// END SLIDER
});< /code>
    /* FUNKY SLIDER */
/* FUNCTIONAILTY */
.funky-slider, .slick-track, .funky-slide {
height: 400px;
}
.funky-slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.funky-slider .slick-slide {
outline: none;
}
.funky-slider .slick-dots {
width: 100%;
height: 2rem;
margin: 0;
padding: 0.5rem 0;
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;

position: absolute;
bottom: 0;
}
.funky-slider .slick-dots li {
width: auto;
height: auto;
margin: 0 0.25rem;
}
.funky-slider .slick-dots button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: 1px solid white;
border-radius: 100%;
background-color: #db3c36;
color: transparent;
-webkit-transition: width 0.5s, height 0.5s;  /* Safari */
transition: width 0.5s, height 0.5s;
outline: none;
}
.funky-slider .slick-dots li.slick-active button {
background-color: #241f21;
width: 1.6rem;
height: 1.6rem;
}
/* END FUNCTIONAILTY */
/* FUNKY SLIDER */< /code>






Hello!

Hello!

Hello!

Hello!

Hello!

Hello!

Hello!

Hello!

Hello!

Hello!

Пример показывает только мою HTML, JS, CSS -версия с моей версией PHP. /> Я затем, как показано в моем прокомментированном PHP -коде - установите фоновое изображение. < /p>
Страница будет затем красиво загружать ползунок, когда на полном экране (больше, чем первая точка останова - 1024px). Тем не менее, удалит встроенный стиль для фонового изображения, когда страница сделана меньше, чем первая точка останова.>

Подробнее здесь: https://stackoverflow.com/questions/520 ... -image-bug