You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.9 KiB
74 lines
1.9 KiB
{% load thumbnail %}
|
|
|
|
{% if banners %}
|
|
|
|
<div class="b-slider m-{{ group.slug }}" id="slider-{{ group.slug }}">
|
|
<ul class='b-slider-list'>
|
|
{% for banner in banners %}
|
|
<li data-url='{{ banner.get_absolute_url }}'
|
|
class='
|
|
b-slider-item
|
|
m-slider-item-{{ forloop.counter }}
|
|
{% if forloop.counter == 1 %}
|
|
m-slider-current
|
|
{% endif %}
|
|
'
|
|
data-slide='{{ forloop.counter }}'
|
|
>
|
|
|
|
<a href='{{ banner.get_absolute_url }}' class='b-slider-item__link'>
|
|
{% thumbnail banner.img group.size crop="top" as im %}
|
|
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="{{ banner.alt }}" title="{{ banner.title }}" class='b-slider-item__img' data-view='{{ banner.image }}'>
|
|
{% endthumbnail %}
|
|
|
|
<div class="b-slider-item__info_cover">
|
|
<span class='b-slider-item__title'>{{ banner.title|safe }}</span>
|
|
<span class='b-slider-item__text'>{{ banner.text|safe }}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<ul class="b-slider-nav">
|
|
{% for banner in banners %}
|
|
<li class="b-slider-nav-button
|
|
{% if forloop.counter == 1 %}
|
|
m-slider-nav-current_button
|
|
{% endif %}
|
|
" data-slide='{{ forloop.counter }}'>
|
|
{{ forloop.counter }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<span data-direction="prev" class='b-slider-nav-prev'>〈 </span>
|
|
<span data-direction="next" class='b-slider-nav-next'> 〉</span>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
$('.m-{{ group.slug }}').bannersSlider({'auto_play': {{ group.speed }}, 'speed': {{ group.speed }}});
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
.m-{{ group.slug }} {
|
|
width: {{ group.width }}px;
|
|
height: {{ group.height }}px;
|
|
}
|
|
|
|
.m-{{ group.slug }} .b-slider-nav-prev,
|
|
.m-{{ group.slug }} .b-slider-nav-next {
|
|
line-height: {{ group.height }}px;
|
|
}
|
|
|
|
.m-{{ group.slug }} .b-slider-item,
|
|
.m-{{ group.slug }} .b-slider-list {
|
|
width: {{ group.width }}px;
|
|
height: {{ group.height }}px;
|
|
}
|
|
</style>
|
|
|
|
{% endif %} |