大家好,
我做了一个相当可爱的滑头滑块。
在我利用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
});
/* 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>
该示例仅显示我的HTML,JS,CSS版本,而我的PHP版本已被注释掉。
然后我继续在Wordpress中使用ACF-高级自定义字段,并设置了适当的字段以生成图像网址。
然后,如我注释掉的php代码所示-设置背景图片。
然后在全屏(大于第一个断点-1024px)时,页面将漂亮地加载滑块。但是,当页面小于第一个断点时,将删除背景图像的内联样式。
这是因为光滑的滑块会删除嵌入式样式吗?
最坏的情况-你们都拥有漂亮的光滑滑盖入门套件...
谢谢杰森。
答案 0 :(得分:0)
我已经知道发生了什么事。输入响应式滑动设置时,它将删除内联样式。
要解决此问题,我使用了以下代码:
<!-- 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 -->
这将创建一个样式表,将背景图像应用于相关的幻灯片。然后继续创建将滑动的幻灯片。
希望我在我所处的环境中为一些人提供了帮助。
谢谢杰森。