diff --git a/static/aerbimCSS.css b/static/aerbimCSS.css index a94620c..2ac6cb1 100644 --- a/static/aerbimCSS.css +++ b/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; } \ No newline at end of file diff --git a/static/aerbimJS.js b/static/aerbimJS.js index 0eda050..b2c0239 100644 --- a/static/aerbimJS.js +++ b/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}` + } } \ No newline at end of file diff --git a/static/images/arrow_white_left.svg b/static/images/arrow_white_left.svg new file mode 100644 index 0000000..06d5322 --- /dev/null +++ b/static/images/arrow_white_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/arrow_white_right.svg b/static/images/arrow_white_right.svg new file mode 100644 index 0000000..fdadbe6 --- /dev/null +++ b/static/images/arrow_white_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/blocks/b_slider.html b/templates/blocks/b_slider.html new file mode 100644 index 0000000..783dd7b --- /dev/null +++ b/templates/blocks/b_slider.html @@ -0,0 +1,31 @@ +{% load static %} +{% if page.get_slides %} +
+ {% for slide in page.get_slides %} +
+
+ {{ slide.name }} +
+ {% if slide.name or slide.description %} +
+
+ + + {{ forloop.counter }} / {{ page.get_slides|length }} + + +
+
+ {% if slide.name %} +
{{ slide.name }}
+ {% endif %} + {% if slide.description %} +
{{ slide.description|linebreaksbr }}
+ {% endif %} +
+
+ {% endif %} +
+ {% endfor %} +
+{% endif %} \ No newline at end of file diff --git a/templates/pages/content/c_section_content.html b/templates/pages/content/c_section_content.html index 66d4c85..b449ef8 100644 --- a/templates/pages/content/c_section_content.html +++ b/templates/pages/content/c_section_content.html @@ -1,23 +1,4 @@ -{% if page.get_slides %} -
- {% for slide in page.get_slides %} -
- {{ slide.name }} - - {% if slide.name or slide.description %} -
- {% if slide.name %} -
{{ slide.name }}
- {% endif %} - {% if slide.description %} -
{{ slide.description|linebreaksbr }}
- {% endif %} -
- {% endif %} -
- {% endfor %} -
-{% endif %} +{% include 'blocks/b_slider.html' %} {% include 'blocks/dynamic/b_sections_buttons.html' %}