{% if slidesToShow is not defined or slidesToShow == null %}
{% set  slidesToShow = 4 %}
{% endif %}

{% if slidesToScroll is not defined or slidesToScroll == null %}
{% set  slidesToScroll = 1 %}
{% endif %}

{% if gallerySlidesToShow is not defined or gallerySlidesToShow == null %}
{% set  gallerySlidesToShow = 1 %}
{% endif %}

{% if sliderType is not defined %}
{% set  sliderType = "normal" %}
{% endif %}


 {% if sliderType == "gallery" %}
  <style>
  .slick-track{
    max-width:1000px;
  }
  .slick-current{
    margin:0 auto;
  }
  </style>

  {% endif %}
    <div  class="slider-{{slider.id}} slider d-none">
     
            {% for singleSlide in slider.slides %}
            <div class="p-3 text-center" ><img alt="{{settings.get.projectName}}" style="max-height:400px;"  src="/uploads/{{settings.get.assetFolderName}}/{{singleSlide.image}}" /></div>
            {% endfor %}
     </div>

    {% if sliderType == "gallery" %}
     <div  class="slider-nav-{{slider.id}} slider d-none">
     
            {% for singleSlide in slider.slides %}
            <div class="p-1"  ><img alt="{{settings.get.projectName}}" src="/uploads/{{settings.get.assetFolderName}}/{{singleSlide.image}}" /></div>
            {% endfor %}
     </div>
      {% endif %}


            


     <script>

        document.addEventListener('turbo:load',function(){
            $('.slider').removeClass("d-none");
            {% if sliderType == "gallery" %}
                 $('.slider-{{slider.id}}').slick({
                    slidesToShow: {{gallerySlidesToShow}},
                    slidesToScroll: {{gallerySlidesToShow}},
                    arrows: false,
                    fade: true,
                    asNavFor: '.slider-nav-{{slider.id}}'
                    });
                    $('.slider-nav-{{slider.id}}').slick({
                    slidesToShow: {{slidesToShow}},
                    slidesToScroll: {{slidesToScroll}},
                    asNavFor: '.slider-{{slider.id}}',
                    dots: false,
                    arrows: false,
                    focusOnSelect: true,
                                    responsive: [

    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
                    });

            {% else %}
                $('.slider-{{slider.id}}').slick({
                slidesToShow: {{slidesToShow}},
                slidesToScroll: {{slidesToScroll}},
                 arrows: false,
                 autoplay: true,
                autoplaySpeed: 2000,
                responsive: [

    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
            });
            {% endif %}


            $('.slider-{{slider.id}}').removeClass("d-none");
            
        
        });
        
     
     </script>