{% load static sekizai_tags %}

{# DOCS: http://sachinchoolur.github.io/lightslider/ #}
<ul id="js-lightslider-id-{{ instance.pk }}" class="lightslider-style-{{ instance.style }}
    lightslider
    {{ instance.classes }}"
    {% if instance.ride %}
    data-ride="lightslider"
    data-interval="{{ instance.interval }}"
    {% endif %}
    {% if not instance.pause %}
    data-pause=""
    {% endif %}
    {% if not instance.wrap %}
    data-wrap=""
    {% endif %}
>
  {% block content_lightslider %}{% endblock %}
</ul>
{% addtoblock 'js' %}
  <script src="{% static 'aldryn_bootstrap3/js/jquery.min.js' %}"></script>
  <script src="{% static 'vendor/lightslider-master/dist/js/lightslider.min.js' %}"></script>
  <script type="text/javascript">
		$(function(){
			$('#js-lightslider-id-{{ instance.pk }}').lightSlider({
              item: {% if instance.number_of_concurrent_slides %} {{ instance.number_of_concurrent_slides }}{% else %}3{% endif %},
              autoWidth: true,
              slideMove: {% if instance.number_of_paginating_slides %} {{ instance.number_of_paginating_slides }}{% else %}1{% endif %}, // slidemove will be 1 if loop is true
              slideMargin: 10,

              addClass: '',
              mode: {% if instance.transition_style %}"{{ instance.transition_style }}"{% else %}"slide"{% endif %},
              useCSS: true,
              cssEasing: {% if instance.transition_effect %}"{{ instance.transition_effect }}"{% else %}'ease'{% endif %}, //'cubic-bezier(0.25, 0, 0.25, 1)',//
              easing: {% if instance.transition_effect %}"{{ instance.transition_effect }}"{% else %}'linear'{% endif %}, //'for jquery animation',////

              speed: 400, //ms'
              auto: true,
              loop: {% if instance.wrap %}{{ instance.wrap | lower }}{% else %}false{% endif %},
              slideEndAnimation: true,
              pause: {% if instance.interval %} {{ instance.interval }}{% else %}2000{% endif %},

              keyPress: false,
              controls: true,
              prevHtml: '',
              nextHtml: '',

              rtl:false,
              adaptiveHeight:false,

              vertical:false,
              verticalHeight:500,
              vThumbWidth:100,

              thumbItem:10,
              pager: true,
              gallery: false,
              galleryMargin: 5,
              thumbMargin: 5,
              currentPagerPosition: 'middle',

              enableTouch:true,
              enableDrag:true,
              freeMove:true,
              swipeThreshold: 40,

              responsive : [],

              onBeforeStart: function (el) {},
              onSliderLoad: function (el) {},
              onBeforeSlide: function (el) {},
              onAfterSlide: function (el) {},
              onBeforeNextSlide: function (el) {},
              onBeforePrevSlide: function (el) {}

            });
		});
	</script>
{% endaddtoblock %}
{% addtoblock 'css' %}
  <link type="text/css" rel="stylesheet" href="{% static "vendor/lightslider-master/dist/css/lightslider.min.css" %}"/>
  <style>
    .fullwidth {
      width: 100%;
    }
  </style>
{% endaddtoblock %}
