ORIENT/plugins/tps/reklama/components/advertisement/slider.htm

91 lines
2.6 KiB
HTML

{% if __SELF__.group and __SELF__.group.adds %}
<div class="advertisiment_{{__SELF__}}">
{% for reklama in __SELF__.group.adds %}
<a class="advertisiment__item"
{% if reklama.enable_stats and reklama.url %}
data-request="{{__SELF__}}::onRedirect"
data-request-data = '[{id:{{reklama.id}}},{url:"{{reklama.url}}"}]'
{% else %}
href="{{reklama.url|default('#')}}" target="_blank"
{% endif %}
>
<img src="{{reklama.media|media_cdn}}" alt="{{reklama.title}}">
</a>
{% endfor %}
</div>
{% if __SELF__.property('random') %}
<script>
// advertisement start
$(function () {
var $slideshow = $(".advertisiment_{{__SELF__}}");
var ImagePauses = {{__SELF__.group.adds.pluck('display')}};
// Init
$slideshow.slick({
dots: false,
arrows: false,
infinite: true,
initialSlide: 0,
autoplay: true,
autoplaySpeed: ImagePauses[0] * 1000,
fade: true,
cssEase: "linear",
adaptiveHeight: true,
});
// Sliding settings
$slideshow.on("afterChange", function (event, slick, currentSlide) {
// Console log, can be removed
console.log(
"Current slide: " +
currentSlide +
". Setting speed to: " +
ImagePauses[currentSlide]
);
// Update autoplay speed according to slide index
$slideshow.slick(
"slickSetOption",
"autoplaySpeed",
ImagePauses[currentSlide] * 1000,
true
);
});
});
// advertisement end
</script>
{% else %}
{% put scripts %}
<script>
$(function () {
var $slideshow = $(".advertisiment_{{__SELF__}}");
var ImagePauses = {{__SELF__.group.adds.pluck('display')}};
// Init
$slideshow.slick({
dots: false,
arrows: false,
infinite: true,
initialSlide: 0,
autoplay: true,
autoplaySpeed: ImagePauses[0] * 1000,
fade: true,
cssEase: "linear",
adaptiveHeight: true,
});
// Sliding settings
$slideshow.on("afterChange", function (event, slick, currentSlide) {
$slideshow.slick(
"slickSetOption",
"autoplaySpeed",
ImagePauses[currentSlide] * 1000,
true
);
});
});
</script>
{% endput %}
{% endif %}
{% endif %}