<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="slider-nav"></div>
<script>
$( document ).ready(function() {
(function () {
setTimeout(function(){
let slider = $('.uc-slider-block');
let content = $('.uc-content-block');
let total = slider.find('.t-card__container').attr('data-slider-totalslides');
let slides = '';
for(let i=1; i<=total; i++){
let image = slider.find('[data-slide-index="'+i+'"] .t923__bgimg').attr('data-original');
let title = slider.find('[data-slide-index="'+i+'"] .t-card__link').text();
let descr = slider.find('[data-slide-index="'+i+'"] .t-card__descr').text();
let href = slider.find('[data-slide-index="'+i+'"] .t-card__link').attr('href');
slides+= ` <div class="slider-elem" data-title="${title}" data-text="${descr}" data-link="${href}">
<img class="t-img t-width" src="${image}">
</div>`;
};
$('.slider-nav').append(slides);
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dots: true,
centerMode: true,
variableWidth: false,
infinite: true,
autoplay:true,
autoplaySpeed: 5000,
speed: 1000,
cssEase: 'ease-out',
responsive: [
{ breakpoint: 1200, settings: { slidesToShow: 3 } },
{ breakpoint: 960, settings: { slidesToShow: 3 , centerPadding: '10px' } },
{ breakpoint: 640, settings: { slidesToShow: 1 , centerPadding: '0px' } },
{ breakpoint: 480, settings: { slidesToShow: 1 , centerPadding: '0px' } },
{ breakpoint: 300, settings: { slidesToShow: 1 , centerPadding: '0px' } }
]
});
$('.slick-dots li:first').click();
$('.slider-nav').on('afterChange', function(event, slick, currentSlide, nextSlide){
let slider = $(this);
setTimeout(function () {
let slide = slider.find('.slick-current.slick-active[data-slick-index="'+(currentSlide)+'"]');
let title = slide.attr('data-title');
let descr = slide.attr('data-text');
let href = slide.attr('data-link');
$('.uc-content-block .t467__title').text(title);
$('.uc-content-block .t467__descr').text(descr);
$('.uc-content-block .t-btn').attr('href', href);
}, 200);
});
}, 1000);
})();
});
</script>
<style>
.uc-main-slider ul.slick-dots {
margin-top: -10px;
}
.uc-main-slider .slick-dots button,
.uc-slider-block{
display: none;
}
.uc-main-slider .t-col.t-col_12 {
max-width: 900px;
margin-left: 0;
}
.uc-main-slider .t-container {
display: flex;
justify-content: center;
}
.uc-main-slider ul.slick-dots {
display: flex !important;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 30px;
justify-content: center;
}
.uc-main-slider ul.slick-dots li {
width: 10px;
height: 10px;
list-style: none;
background: #000;
border-radius: 50%;
margin: 5px 5px;
opacity: 0.3;
transition: all 1.1s ease-in-out;
cursor: pointer;
}
.uc-main-slider ul.slick-dots li.slick-active {
opacity: 1;
}
.uc-main-slider .slider-elem{
filter: blur(4px);
opacity: 0.6;
transition: all 1.1s ease-in-out;
transform: scale(0.60) translateY(-120px);
}
.uc-main-slider .slider-elem.slick-current{
filter: blur(0px);
opacity: 1;
transform: scale(0.8) translateY(0px);
}
.uc-main-slider .slick-track {
cursor: grab;
}
.uc-main-slider .slick-slide img {
margin: 0 0 0 auto;
}
.uc-main-slider .slider-elem.slick-current img.t-img {
margin: 0 auto;
}
.uc-main-slider .slider-elem.slick-slide.slick-current.slick-active+div img {
margin: 0 auto 0 0;
}
.uc-content-block .t467 a.t-btn {
margin-top: 20px;
font-weight: 500;
font-size: 18px;
}
.uc-content-block .t467 a.t-btn table:after {
content: "";
width: 96px;
height: 8px;
background-image: url(https://static.tildacdn.com/tild3233-6530-4337-b135-303830386238/_.svg);
display: inline-block;
margin-left: 15px;
margin-top: 6px;
display: none;
}
.uc-content-block table {
width: max-content !important;
display: flex;
align-items: center;
margin: 0;
}
.uc-main-slider button.slick-prev.slick-arrow,
.uc-main-slider button.slick-next.slick-arrow{
display: none !important;
position: absolute;
top: 50%;
z-index: 66;
left: 0;
transform: translateY(-50%);
font-size: 0;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
padding: 0;
background-image: url(https://static.tildacdn.com/tild6364-6465-4166-b630-653331386235/leftarrow_102643.svg);
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
cursor: pointer;
}
.uc-main-slider button.slick-next.slick-arrow {
position: absolute;
top: 50%;
z-index: 66;
right: 0;
left: auto;
transform: translateY(-50%) rotate(180deg);
background-image: url(https://static.tildacdn.com/tild6364-6465-4166-b630-653331386235/leftarrow_102643.svg);
}
@media screen and (max-width:640px){
.uc-main-slider button.slick-prev.slick-arrow,
.uc-main-slider button.slick-next.slick-arrow{
opacity: 0;
}
}
@media screen and (max-width:1200px){
.uc-main-slider .t-col.t-col_12 {
margin-left: -10px;
}
}
@media screen and (max-width:960px){
.uc-main-slider .t-col.t-col_12 {
margin-left: -20px;
}
}
@media screen and (max-width:640px){
.uc-content-block .t-col {
display: block;
}
.t467__title {
width: 100%;
margin-bottom: 15px;
}
.t467__descr {
width: 100%;
text-align: center;
}
.uc-main-slider .t-col.t-col_12 {
max-width: 250px;
}
.uc-content-block .t467 a.t-btn {
width: 100%;
margin-left: 0;
}
.uc-content-block table {
margin: 0 auto;
}
}
</style>