title = "Galéria"
url = "/galeria"
layout = "gallery"
is_hidden = 0

[slider]
slide_show_id = 7
==
{% if slider.slides.slideShows != 'no_slider' %}
{% put scripts %}
    <script>
		$(document).ready(function(){
		    
		    
		    
			 $('.slick-slider-for').slick({
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  arrows: false,
                  fade: true,
                  asNavFor: '.slick-slider-nav'
                });
                $('.slick-slider-nav').slick({
                  slidesToShow: 5,
                  slidesToScroll: 1,
                  asNavFor: '.slick-slider-for',
                  dots: false,
                  centerMode: true,
                  focusOnSelect: true
                });
		});

    </script>
{% endput %}
{% put styles %}
    <style>
        #gallery-content {
            height: 100vh;
            background: #e2e2e2;
        }
        #mycontainer{
            position: absolute; overflow:hidden;
            left:0;
            right:0;
            bottom:0;
            height:180px;
            
        }
        .slick-slider-for {
            margin-bottom: 15px;
        }
        .slick-slider-for .slick-slide > div > div {
    		float: left!important;
    	}
    	.slick-slider-for .slick-slide > div > a {
    		float: left!important;
    	}
    	.slick-slider-for .slick-slide .slide-image {
    		min-height: 100vh;
    		position: relative;
    		background-size: cover;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-pack: center;
	        -ms-flex-pack: center;
            justify-content: center;
		    -webkit-box-align: center;
	        -ms-flex-align: center;
            align-items: center;
            
    	}
    	.slick-slider-for .slick-slide .slide-image .slide-content {
    		color: #ffffff;
    		text-align: center;
    	}
    	
    	.slick-slider-nav .slick-slide > div > div {
    		float: left!important;
    	}
    	.slick-slider-nav .slick-slide > div > a {
    		float: left!important;
    	}
    	.slick-slider-nav .slick-slide .slide-image {
    		min-height: 130px;
    		position: relative;
    		background-size: cover;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-pack: center;
	        -ms-flex-pack: center;
            justify-content: center;
		    -webkit-box-align: center;
	        -ms-flex-align: center;
            align-items: center;
    	}
    	.slick-slider-nav .slick-slide .slide-image .slide-content {
    		color: #ffffff;
    		text-align: center;
    	}
    	:focus {outline:none}
    </style>
{% endput %}

<div id="gallery-content">
<div class="slick-slider-for">
	{% for slide in slider.slides.slideShows.slide_show_content %}	
    	<div class="slide">
	        <div class="slide-image" style="background-image: url( '{{slide.slide_image|media}}' ); background-position: {{slide.image_horizontal_position}}% {{slide.image_position}}%;">
	        	{% if (slide.slide_title or slide.slide_description) %}
        		<div class="slide-content">
        			<h1>{{slide.slide_title}}</h1>
        			<p>{{slide.slide_description}}</p>
    			</div>
	        	{% endif %}
	        </div>
        </div>

    {% endfor %}
</div>
</div>
<div id="mycontainer">
<div class="slick-slider-nav animated fadeInUp one">
	{% for slide in slider.slides.slideShows.slide_show_content %}	
    	<div class="slide">
	        <div class="slide-image" style="background-image: url( '{{slide.slide_image|media}}' ); background-position: {{slide.image_horizontal_position}}% {{slide.image_position}}%;">
	        	{% if (slide.slide_title or slide.slide_description) %}
        		<div class="slide-content">
        			<h1>{{slide.slide_title}}</h1>
        			<p>{{slide.slide_description}}</p>
    			</div>
	        	{% endif %}
	        </div>
        </div>

    {% endfor %}
</div>
</div>
{% endif %}