diff --git a/src/images/slider/photo-slider.png b/src/images/slider/photo-slider.png new file mode 100644 index 0000000000..ae9cc005f1 Binary files /dev/null and b/src/images/slider/photo-slider.png differ diff --git a/src/images/slider/photo-slider1.png b/src/images/slider/photo-slider1.png new file mode 100644 index 0000000000..24215d9d87 Binary files /dev/null and b/src/images/slider/photo-slider1.png differ diff --git a/src/images/slider/photo-slider2.png b/src/images/slider/photo-slider2.png new file mode 100644 index 0000000000..9204b6ff60 Binary files /dev/null and b/src/images/slider/photo-slider2.png differ diff --git a/src/images/slider/photo-slider3.jpg b/src/images/slider/photo-slider3.jpg new file mode 100644 index 0000000000..98c4188508 Binary files /dev/null and b/src/images/slider/photo-slider3.jpg differ diff --git a/src/index.html b/src/index.html index 7428e0d14f..c9e74a6b7b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,8 @@ - + Strategic Agency
-
+
+ photo slider photo slider + photo slider @@ -134,10 +150,16 @@

Strategic Agency

- -
@@ -468,9 +490,10 @@

Vision, Passion, Results

Send us a message

@@ -501,7 +524,12 @@

Send us a message

class="form__content_textarea" > - +
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..eaea6c3ac3 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,44 @@ 'use strict'; + +const form = document.getElementById('form'); +form.addEventListener('submit',function(event){ + event.preventDefault(); + + window.scrollTo({ + top:0, + behavior:'smooth' + }) +}) + + + + document.addEventListener('DOMContentLoaded', function () { + const slider = document.getElementById('slider'); + const images = slider.getElementsByClassName('hero__slider_photos-item'); + const prevButton = document.getElementById('prev'); + const nextButton = document.getElementById('next'); + let currentIndex = 0; + + function updateSlider() { + for (let i = 0; i < images.length; i++) { + images[i].classList.remove('active'); + } + images[currentIndex].classList.add('active'); + } + + function showPrev() { + currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1; + updateSlider(); + } + + function showNext() { + currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0; + updateSlider(); + } + + prevButton.addEventListener('click', showPrev); + nextButton.addEventListener('click', showNext); + + updateSlider(); + }); + diff --git a/src/styles/_header.scss b/src/styles/_header.scss index 7ada008d59..b0932db025 100644 --- a/src/styles/_header.scss +++ b/src/styles/_header.scss @@ -1,9 +1,7 @@ .header { - // position:relative; width: 100%; box-sizing: border-box; - // height: 100vh; background-color: $accent-color; color: $primary-color; border-radius: 0 0 30px 30px; @@ -148,9 +146,14 @@ width: 100%; height: 100%; object-fit: cover; + display: none; } } + .hero__slider_photos-item.active { + display: block; + } + &_controlle { position: absolute; bottom: 0; diff --git a/src/styles/main.scss b/src/styles/main.scss index e25ab911ed..81e1f98dba 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,11 +14,13 @@ @import 'nav-bar'; @import 'contacts'; -.page__body { - font-family: 'Open Sans', 'Helvetica Neue', sans-serif; - background-color: $body-bg-color; +.page { scroll-behavior: smooth; - box-sizing: border-box; + &__body { + font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + background-color: $body-bg-color; + box-sizing: border-box; + } } .content {