0.0.65

static/aerbimCSS.css

@@ -295,24 +295,20 @@ body.n_scroll{
     position: relative;
     bottom: -10px;
     border-radius: 5px 5px 0 0;
-    transition: 300ms;
 }
 .section_btn.open > .txt_section{
     color: #10212B;
     padding: 15px 30px 15px 30px;
-    transition: 300ms;
     text-transform: uppercase;
 }
 .section_btn.close > .txt_section{
     color: #ffffff;
     padding: 18px 30px 18px 30px;
-    transition: 500ms;
     text-transform: uppercase;
 }
 
 .section_btn:hover > .txt_section{
     padding: 15px 30px 15px 30px;
-    transition: 300ms;
     text-transform: uppercase;
 }
 
@@ -981,4 +977,73 @@ body.n_scroll{
 .options_functional_features{
     height: 215px;
     overflow: hidden;
+}
+
+/* slider block */
+
+.container_sliders{
+    height: calc(100vh - 115px);
+    margin-top: 60px;
+}
+
+.one_slide_container{
+    height: 100%;
+    position: relative;
+}
+.one_slide_container.show{
+    display: block;
+}
+.one_slide_container.hide{
+    display: none;
+}
+
+.picture_slider_container{
+    display: block;
+    height: 100%;
+}
+
+.picture_slider{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.slider_block_text_container{
+    width: 100%;
+    position: relative;
+}
+
+.functions_btns_slider{
+    display: block;
+    position: absolute;
+    bottom: 25px;
+    left: 0;
+    color: #ffffff;
+}
+
+.iterator_slide{
+    position: relative;
+    bottom: 6px;
+    margin: 0 11px;
+    display: inline-block;
+}
+
+.slider_block_text{
+    display: block;
+    position: absolute;
+    bottom: 25px;
+    right: 0;
+    color: #ffffff;
+    width: 40%;
+}
+
+.title_slide{
+    font-size: 40px;
+    font-weight: 600;
+    margin-bottom: 30px;
+}
+
+.description_slide{
+    overflow-wrap: break-word;
 }

static/aerbimJS.js

@@ -157,4 +157,26 @@ function openOverlay () {
 function removeScrollBody () {
     let body = document.querySelector("body")
     body.classList.toggle("n_scroll")
+}
+
+// slider
+
+function change_slide (index_this_slide,type,list_lenght) {
+    let new_index_slide = null
+    let this_slide = document.querySelector(`[data-id-slide="${index_this_slide}"]`)
+    let iterator_slide = document.querySelector(".iterator_slide")
+    if (type === 'next'){
+        new_index_slide = parseInt(index_this_slide) + 1
+    } else if (type === 'back'){
+        new_index_slide = parseInt(index_this_slide) - 1
+    }
+    let slide_f_show = document.querySelector(`[data-id-slide="${new_index_slide}"]`)
+    if (slide_f_show){
+        slide_f_show.classList.toggle("show")
+        slide_f_show.classList.toggle("hide")
+        this_slide.classList.toggle("show")
+        this_slide.classList.toggle("hide")
+
+        iterator_slide.innerHTML = `${new_index_slide} / ${list_lenght}`
+    }
 }

static/images/arrow_white_left.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 236" d="M12.6063 22.6066L1.99969 12L12.6063 1.3934" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/images/arrow_white_right.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 237" d="M1.6066 1.3934L12.2132 12L1.6066 22.6066" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

templates/blocks/b_slider.html

@@ -0,0 +1,31 @@
+{% load static %}
+{% if page.get_slides %}
+    <div class="container_sliders">
+        {% for slide in page.get_slides %}
+            <div class="one_slide_container{% if forloop.counter0 == 0 %} show{% else %} hide{% endif %}" data-id-slide="{{ forloop.counter }}">
+                <div class="picture_slider_container">
+                    <img class="picture_slider" src="{{ MEDIA_URL }}{{ slide.picture }}" alt="{{ slide.name }}" />
+                </div>
+                {% if slide.name or slide.description %}
+                    <div class="cut-width slider_block_text_container">
+                        <div class="functions_btns_slider">
+                            <img onclick="change_slide('{{ forloop.counter }}','back','{{ page.get_slides|length }}')" src="{% static "images/arrow_white_left.svg" %}">
+                            <span class="iterator_slide">
+                                {{ forloop.counter }} / {{ page.get_slides|length }}
+                            </span>
+                            <img onclick="change_slide('{{ forloop.counter }}','next','{{ page.get_slides|length }}')" src="{% static "images/arrow_white_right.svg" %}">
+                        </div>
+                        <div class="slider_block_text">
+                            {% if slide.name %}
+                                <div class="title_slide">{{ slide.name }}</div>
+                            {% endif %}
+                            {% if slide.description %}
+                                <div class="description_slide">{{ slide.description|linebreaksbr }}</div>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+{% endif %}

templates/pages/content/c_section_content.html

@@ -1,23 +1,4 @@
-{% if page.get_slides %}
-    <div>
-        {% for slide in page.get_slides %}
-            <div>
-                <img src="{{ MEDIA_URL }}{{ slide.picture }}" alt="{{ slide.name }}" />
-
-                {% if slide.name or slide.description %}
-                    <div>
-                        {% if slide.name %}
-                            <div>{{ slide.name }}</div>
-                        {% endif %}
-                        {% if slide.description %}
-                            <div>{{ slide.description|linebreaksbr }}</div>
-                        {% endif %}
-                    </div>
-                {% endif %}
-            </div>
-        {% endfor %}
-    </div>
-{% endif %}
+{% include 'blocks/b_slider.html' %}
 
 {% include 'blocks/dynamic/b_sections_buttons.html' %}