jssor.html.twig in Jssor Slider 7

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/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 }}" class="slider_container" style="position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1300px; height: 800px; overflow: hidden;">

  <!-- Slides Container -->
  <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1300px; height: 800px;">

    {% for row in rows %}
      <div{{ row.attributes }}>
        {{ row.content }}
      </div>
    {% endfor %}

  </div>

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

  {% if arrownavigator %}
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora{{ arrowskin }}l" style="top: 100px; left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora{{ arrowskin }}r" style="top: 100px; right: 8px"></span>
  {% endif %}

</div>