82 lines
2.7 KiB
HTML
82 lines
2.7 KiB
HTML
{% load assets %}
|
|
<div class="carrousel-content">
|
|
{% for menuitem in menuitems %}
|
|
<input type="radio" name="carrousel-{{cell.id}}"
|
|
class="carrousel-radio-{{forloop.counter}}"
|
|
id="carrousel-{{cell.id}}-{{forloop.counter}}"
|
|
{% if forloop.first %}checked{% endif %}>
|
|
<div class="slide">
|
|
{% block carrousel-item %}
|
|
<div class="carrousel-item"
|
|
style="background-image: url({% asset_url menuitem.page.picture size="1000" crop="center" %})">
|
|
<div class="carrousel-item-content">
|
|
{% block carrousel-item-content %}
|
|
<a href="{{menuitem.page.get_online_url}}">
|
|
<strong class="carrousel-item-title">{{ menuitem.page.title }}</strong>
|
|
{% if menuitem.page.description %}<p class="carrousel-item-description">{{ menuitem.page.description }}</p>{% endif %}
|
|
</a>
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
</div>
|
|
{% endfor %}
|
|
<a class="carrousel-previous"></a>
|
|
{% block carrousel-navigation %}
|
|
<div class="carrousel-nav">
|
|
{% for menuitem in menuitems %}
|
|
<label class="carrousel-label-{{forloop.counter}}" for="carrousel-{{cell.id}}-{{forloop.counter}}"></label>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|
|
<a class="carrousel-next"></a>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
function next() {
|
|
if ($('.carrousel-content input:checked ~ input').length) {
|
|
$('.carrousel-content input:checked ~ input').first().click();
|
|
} else {
|
|
$('.carrousel-content input').first().click();
|
|
}
|
|
}
|
|
function previous() {
|
|
if ($('.carrousel-content input ~ input:checked').length) {
|
|
$('.carrousel-content input:checked').prev().prev().click();
|
|
} else {
|
|
$('.carrousel-content input').last().click();
|
|
}
|
|
}
|
|
var timeout_id = setInterval(next, 5000);
|
|
$('.carrousel-content label').on('click', function() {
|
|
clearInterval(timeout_id);
|
|
});
|
|
$('a.carrousel-previous').on('click', function() {
|
|
clearInterval(timeout_id);
|
|
previous();
|
|
});
|
|
$('a.carrousel-next').on('click', function() {
|
|
clearInterval(timeout_id);
|
|
next();
|
|
});
|
|
|
|
var touch_start = null;
|
|
$('.carrousel-item').on('touchstart', function(ev) {
|
|
touch_start = ev.originalEvent.touches[0].pageX;
|
|
});
|
|
$('.carrousel-item').on('touchend', function(ev) {
|
|
var touch_end = ev.originalEvent.changedTouches[0].pageX;
|
|
var diff = touch_start - touch_end;
|
|
touch_start = null;
|
|
clearInterval(timeout_id);
|
|
var width = $('body').width();
|
|
if (diff*2 > width) {
|
|
previous();
|
|
}
|
|
if (diff*2 < -width) {
|
|
next();
|
|
}
|
|
});
|
|
});
|
|
</script>
|