Produits Entr'ouvert » Intégrations graphiques Publik

<section>

 <title>Carrousels</title>

 <p>

  Une cellule menu prendra la forme « carrousel » si elle est définie avec

  « carrousel » comme slug.

 </p>

<table shade="rows">

 <tr>

  <td><p><code>$carrousel-height</code></p></td>

  <td><p>Hauteur du carrousel</p></td>

  <td><p><var>20rem</var></p></td>

 </tr>

 <tr>

  <td><p><code>$carrousel-text-position</code></p></td>

  <td><p>Position du texte des différentes pages; les valeurs possibles sont

  middle (milieu de page) et bottom-left (en bas à gauche).</p></td>

  <td><p><var>middle</var></p></td>

 </tr>

 <tr>

  <td><p><code>$carrousel-navigation</code></p></td>

  <td><p>Détermine si la navigation permettant de passer d'un élément à

  l'autre est affichée. (visible ou none)</p></td>

  <td><p><var>visible</var></p></td>

 </tr>

 <tr>

  <td><p><code>$carrousel-navigation-bullet-color</code></p></td>

  <td><p>Couleur du disque de navigation.</p></td>

  <td><p><var>$button-color</var></p></td>

 </tr>

 <tr>

  <td><p><code>$carrousel-arrows</code></p></td>

  <td><p>Détermine si les flèches (gauche/droite) permettant de passer d'un

  élément à l'autre sont affichées. (visible ou none)</p></td>

  <td><p><var>visible</var></p></td>

 </tr>

 <tr>

</table>

</section>

/* $carrousel-height: height of carrousel image */

$carrousel-height: 20rem !default;

/* $carrousel-text-position: position of text (middle, bottom-left) */

$carrousel-text-position: middle !default;

/* $carrousel-navigation: visible or none */

$carrousel-navigation: visible !default;

/* $carrousel-navigation-bullet-color: color of active slide bullet */

$carrousel-navigation-bullet-color: $button-color !default;

/* $carrousel-arrows: visible or none */

$carrousel-arrows: visible !default;

div.carrousel-content {

	position: relative;

	height: $carrousel-height;

	overflow: hidden;

	input {

		visibility: hidden;

	}

	input + div {

		position: absolute;

		top: 0;

		left: 0;

		width: 100%;

		height: 100%;

		opacity: 0;

		pointer-events: none;

		transition: opacity ease 0.5s;

		div.carrousel-item {

			display: table;

			position: relative;

			background-position: center center;

			box-sizing: border-box;

			width: 100%;

			height: 100%;

			background-size: cover;

			padding: 10px;

			&::after {

				content: "";

				display: block;

				left: 0;

				top: 0;

				width: 100%;

				height: 100%;

				position: absolute;

				background: black;

				opacity: 0.3;

			}

			div.carrousel-item-content {

				> a {

					display: block;

					color: inherit;

					box-sizing: border-box;

				}

				position: relative;

				@if $carrousel-text-position == "middle" {

					> a {

						padding: 1rem;

						margin-left: 6rem;

						margin-right: 6rem;

					}

					display: table-cell;

					vertical-align: middle;

					p {

						margin-left: auto;

						margin-right: auto;

					}

				} @else if $carrousel-text-position == "bottom-left" {

					text-align: left;

					position: absolute;

					bottom: 1rem;

				}

				z-index: 100;

				line-height: 110%;

				p {

					max-width: 40ex;

				}

			}

			color: white;

			font-size: 120%;

			text-align: center;

		}

	}

	input:checked + div {

		opacity: 1;

		pointer-events: auto;

	}

	div.carrousel-nav {

		position: absolute;

		@if $carrousel-navigation == "visible" {

			display: block;

		} @else {

			display: none;

		}

		bottom: 10px;

		text-align: center;

		width: 100%;

		height: 20px;

		z-index: 100;

		label {

			display: inline-block;

			margin: 0 10px;

			width: 10px;

			height: 10px;

			border: 1px solid #fff;

			border-radius: 50%;

			cursor: pointer;

			transition: background-color 0.25s;

		}

	}

	a.carrousel-previous,

	a.carrousel-next {

		@if $carrousel-arrows == visible {

			display: block;

		} @else {

			display: none;

		}

		position: absolute;

		top: calc(50% - 3rem);

		color: white;

		height: 6rem;

		line-height: 6rem;

		width: 6rem;

		cursor: pointer;

		z-index: 1000;

		text-align: center;

		&::after {

			font-family: FontAwesome;

			font-size: 24px;

		}

		&.carrousel-previous {

			left: 1ex;

			&::after {

				content: "\f053";  // chevron-left;

			}

		}

		&.carrousel-next {

			right: 1ex;

			&::after {

				content: "\f054";  // chevron-right;

			}

		}

		@media screen and (max-width: $nav-mobile-limit) {

			display: none;

		}

	}

	@for $i from 1 through 10 {

		.carrousel-radio-#{$i}:checked ~ .carrousel-nav label.carrousel-label-#{$i} {

			background-color: $carrousel-navigation-bullet-color;

		}

	}

}

@import 'carrousel';

{% 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>{{ menuitem.page.title }}</strong>

       {% if menuitem.page.description %}<p>{{ 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>