Slick Slider - 使用php实现导致背景图像错误 [英] Slick Slider - Implement using php causes background-image bug
问题描述
美好的一天，
我做了一个相当可爱的光滑滑块。
I have made a rather cute slick-slider.
它有效在我使用PHP并将其托管在我的网站上之前对待。
It works a treat before I make it utilise PHP and host it on my site.
$(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
});
/* 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 */
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<!-- HTML -->
<div class="funky-slider-container">
<div class="funky-slider">
<div class="funky-slide" style="background-image: url('https://usercontent2.hubstatic.com/12593011_f520.jpg')">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
<div class="funky-slide">
Hello!
</div>
</div>
</div>
<!-- END HTML -->
<!-- PHP SLIDER
<?php
$funky_slider = get_field('funky_slider');
?>
<?php if( $funky_slider ) : ?>
<section id="funky-slider" class="funky-slider-section">
<div class="funky-slider">
<?php while( have_rows('funky_slider') ): the_row();
$funky_slider_image = get_sub_field('funky_slider_image');
?>
<div class="funky-slide" style="background-image: url('<?php echo $funky_slider_image['url'] ?>')"></div>
<?php endwhile; ?>
</div>
</section>
<?php endif; ?>
-->
<!-- END PHP SLIDER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.min.js"></script>
该示例仅显示我的PHP，JS版本，我的PHP版本已注释掉。
The example is only showing my HTML, JS, CSS version with my PHP version commented out.
然后我继续在Wordpress中使用ACF - 高级自定义字段，并使用适当的字段生成图像网址。
I have then gone on to use ACF - Advanced Custom Fields within Wordpress and made the appropriate fields to generate an image url.
然后我在注释掉的PHP代码中说明 - 设置背景图像。
I then as illustrated in my commented out php code - set the background image.
然后页面将在全屏时加载滑块（大于第一个断点 - 1024px）。但是，当页面小于第一个断点时，将删除背景图像的内联样式。
The page will then load the slider beautifully when in full screen (larger than the first breakpoint - 1024px). However, will remove the inline-styles for the background-image when the page is made smaller than the first breakpoint.
这是因为光滑的滑块删除了内联样式吗？
Is this because slick slider removes inline styles?
最糟糕的情况 - 你们都得到了一个漂亮的光滑滑块入门套件...
Worst case scenario - you all get a beautiful slick slider starter kit...
谢谢，杰森。
推荐答案
我已经知道发生了什么。当输入响应式光滑设置时，它会删除内联样式。
I have figured out what is happening. When entering the responsive slick settings it removes inline-styles.
要解决此问题，我使用了以下代码：
To work around this I have used this code:
<!-- SLIDER -->
<?php
$funky_slider = get_field('funky_slider');
?>
<?php if( $funky_slider ) : ?>
<!-- generate image css -->
<style>
<?php
$count = 1;
while( have_rows('funky_slider') ): the_row();
$funky_slider_image = get_sub_field('funky_slider_image');
?>
.slick-slide:nth-of-type(<?php echo $count ?>) .funky-slide {
background-image: url('<?php echo $funky_slider_image['url'] ?>');
}
<?php $count++; ?>
<?php endwhile; ?>
</style>
<!-- END generate image css -->
<!-- generate slider -->
<section id="funky-slider" class="funky-slider-section">
<div class="funky-slider">
<?php
while( have_rows('funky_slider') ): the_row();
?>
<div class="funky-slide">
</div>
<?php endwhile; ?>
</div>
</section>
<!-- END generate slider -->
<?php endif; ?>
<!-- END SLIDER -->
这会创建一个样式表，将背景图像应用于相关幻灯片。然后继续创建将被光滑的幻灯片。
This creates a style sheet that applies the background image to the relevant slide. Then goes on to create the slides that will be slicked.
希望我在我的情况下帮助了一些人。
Hope I have helped a few people in my situation.
谢谢，杰森。
这篇关于Slick Slider - 使用php实现导致背景图像错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
