gurl_o/plugins/tps/birzha/components/sliders/text_slider.htm

91 lines
2.3 KiB
HTML

{% set slider = __SELF__.slider %}
{% set lng = __SELF__.lng %}
<div class="intro_slider">
{% for item in slider.slide_items %}
<div class="slider_item">
<!-- Ru -->
{% if lng == 'ru' %}
<div class="slider_content">
<a href="{{ item.link ? item.link : '#' }}" class="slider_title">
{{ item.slide_title_ru }}
</a>
</div>
<div class="slider_item-img">
<img src="{{ item.slide_img_ru|media }}" alt="">
</div>
{% endif %}
<!-- En -->
{% if lng == 'en' %}
<div class="slider_content">
<a href="{{ item.link ? item.link : '#' }}" class="slider_title">
{{ item.slide_title_en }}
</a>
</div>
<div class="slider_item-img">
<img src="{{ item.slide_img_en|media }}" alt="">
</div>
{% endif %}
<!-- Tm -->
{% if lng == 'tm' %}
<div class="slider_content">
<a href="{{ item.link ? item.link : '#' }}" class="slider_title">
{{ item.slide_title_tm }}
</a>
</div>
<div class="slider_item-img">
<img src="{{ item.slide_img_tm|media }}" alt="">
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% put scripts %}
<script>
$(window).on('load', function() {
let ImagePauses = {{ __SELF__.slidesDisplays }}
$(".intro_slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
autoplay: true,
dots: false,
// autoplaySpeed: 3000,
autoplaySpeed: ImagePauses[0] * 1000,
pauseOnHover: false,
infinite: true,
speed: 1000,
fade: true,
adaptiveHeight: false,
lazyLoad: 'ondemand',
cssEase: 'linear',
swipeToSlide: true,
waitForAnimate: false,
draggable: true,
});
// Sliding settings
$(".intro_slider").on("afterChange", function (event, slick, currentSlide) {
$(".intro_slider").slick(
"slickSetOption",
"autoplaySpeed",
ImagePauses[currentSlide] * 1000,
true
);
});
})
</script>
{% endput %}