views-view-jssor.html.twig in Jssor Slider 8

Default theme implementation to display a view of jssor slider.

Available variables:

• slider_id: Unique slider ID. Unfortunately Jssor Slider require an ID.
• title: The title of this group of rows. May be empty.
• rows: A list of the view's row items.
  • attributes: The row's HTML attributes.
  • content: The row's content.
• arrowskin: Arrow skin
• bulletskin: Bullet skin.
• bulletnavigator: Enable or not the bullet navigator.
• arrownavigator: Enable or not the arrow navigator.

See also

template_preprocess_jssor()

File

templates/views-view-jssor.html.twig

{#
/**
 * @file
 * Default theme implementation to display a view of jssor slider.
 *
 * Available variables:
 * - slider_id: Unique slider ID. Unfortunately Jssor Slider require an ID.
 * - title: The title of this group of rows. May be empty.
 * - rows: A list of the view's row items.
 *   - attributes: The row's HTML attributes.
 *   - content: The row's content.
 * - arrowskin: Arrow skin
 * - bulletskin: Bullet skin.
 * - bulletnavigator: Enable or not the bullet navigator.
 * - arrownavigator: Enable or not the arrow navigator.
 *
 * @see template_preprocess_jssor()
 *
 * @ingroup themeable
 */
#}

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}


<div id="{{ slider_id }}" style="position: relative; margin: 0 auto; top: 0; left: 0; width: 1300px; height: 600px; overflow: hidden;">

  <!-- Slides Container -->
  <div data-u="slides" style="cursor: move; position: absolute; left: 0; top: 0; width: 1300px; height: 600px; overflow: hidden;">
    {% for row in rows %}
      <div>
        {{ row.content }}
      </div>
    {% endfor %}
  </div>

  <!-- Bullet navigator -->
  {% if bulletnavigator %}
    <div u="navigator" class="jssorb{{ bulletskin }}" style="position: absolute; bottom: 16px; right: 6px;">
      <div u="prototype" style="position: absolute; width: 16px; height: 16px;"></div>
    </div>
  {% endif %}

  <!-- Arrows navigator -->
  {% if arrownavigator %}
    <span data-u="arrowleft" class="jssora{{ arrowskin }}l"></span>
    <span data-u="arrowright" class="jssora{{ arrowskin }}r"></span>
  {% endif %}
</div>