Добрый день всем,
Я сделал довольно симпатичный слайдер.
Он работает, прежде чем я использую 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>
Я понял, что происходит. При вводе настроек адаптивного слика он удаляет встроенные стили.
Чтобы обойти это, я использовал этот код:
<!-- 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 -->
Это создает таблицу стилей, которая применяет фоновое изображение к соответствующему слайду. Затем продолжается создание слайдов, которые будут скользить.
Надеюсь, я помог нескольким людям в моей ситуации.
Спасибо, Джейсон.
Других решений пока нет …