Skip to content

Commit

Permalink
Merge pull request #26 from LesiaUKR/gallery
Browse files Browse the repository at this point in the history 
Gallery
  • Loading branch information
@LesiaUKR
LesiaUKR authored Aug 26, 2024
2 parents 97803b0 + 4effeaa commit 34a6b91
Show file tree
Hide file tree
Showing 7 changed files with 404 additions and 23 deletions.
3 changes: 2 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
</footer>

<script type="module" src="./main.js"></script>
<script type="module" src="./js/swiper.js"></script>
<script type="module" src="./js/reviews_swiper.js"></script>
<script type="module" src="./js/gallery_swiper.js"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions src/js/gallery_swiper.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
let gallerySwiper = new Swiper('.gallery-swiper', {
pagination: {
el: '.gallery-swiper-pagination',
},

slidesPerView: 1, // Показувати один слайд
centeredSlides: true, // Центрувати активний слайд

spaceBetween: 16,

breakpoints: {
1440: {
slidesPerView: 1,
spaceBetween: 110,

navigation: {
nextEl: '.gallery-swiper-button-prev',
prevEl: '.gallery-swiper-button-next',
},
},
},
});
20 changes: 2 additions & 18 deletions src/js/swiper.js → src/js/reviews_swiper.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
let swiper = new Swiper('.swiper', {
pagination: {
el: '.swiper-pagination',
clickable: true,
el: '.reviews-swiper-pagination',
// clickable: true,
},
// Включение/отключение
// перетаскивания на ПК
Expand Down Expand Up @@ -56,19 +56,3 @@ let swiper = new Swiper('.swiper', {
},
},
});

function updateSwiperSettings() {
const windowWidth = window.innerWidth;

if (windowWidth >= 1440) {
swiper.pagination.destroy();
swiper.pagination.el.style.display = 'none';
} else {
swiper.pagination.init();
swiper.pagination.el.style.display = '';
}
}

updateSwiperSettings();

window.addEventListener('resize', updateSwiperSettings);
275 changes: 275 additions & 0 deletions src/partials/gallery.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,280 @@
<section class="section" id="gallery">
<div class="container">
<h2 class="section-title" text="Gallery">Gallery</h2>
<!-- Slider main container -->
<div class="gallery-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="image-slider__slide swiper-slide">
<div class="image-slider__image">
<picture>
<source
srcset="
./img/gallery/desktop/img-gal-1-desktop@1x.webp,
./img/gallery/desktop/img-gal-1-desktop@2x.webp
"
media="(min-width: 1440px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/desktop/img-gal-1-desktop@1x.jpg,
./img/gallery/desktop/img-gal-1-desktop@2x.jpg
"
media="(min-width: 1440px)"
type="image/jpeg"
/>
<source
srcset="
./img/gallery/mobile/img-gal-1-mobile@1x.webp,
./img/gallery/mobile/img-gal-1-mobile@2x.webp
"
media="(min-width: 320px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/mobile/img-gal-1-mobile@1x.jpg,
./img/gallery/mobile/img-gal-1-mobile@2x.jpg
"
media="(min-width: 320px)"
type="image/jpeg"
/>
<img
src="./img/gallery/mobile/img-gal-1-mobile@1x.jpg"
alt="Daily Sweet Surprise"
loading="lazy"
/>
</picture>
</div>
</div>
<div class="image-slider__slide swiper-slide">
<div class="image-slider__image">
<picture>
<source
srcset="
./img/gallery/desktop/img-gal-2-desktop@1x.webp,
./img/gallery/desktop/img-gal-2-desktop@2x.webp
"
media="(min-width: 1440px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/desktop/img-gal-2-desktop@1x.jpg,
./img/gallery/desktop/img-gal-2-desktop@2x.jpg
"
media="(min-width: 1440px)"
type="image/jpeg"
/>
<source
srcset="
./img/gallery/mobile/img-gal-2-mobile@1x.webp,
./img/gallery/mobile/img-gal-2-mobile@2x.webp
"
media="(min-width: 320px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/mobile/img-gal-2-mobile@1x.jpg,
./img/gallery/mobile/img-gal-2-mobile@2x.jpg
"
media="(min-width: 320px)"
type="image/jpeg"
/>
<img
src="./img/gallery/mobile/img-gal-2-mobile@1x.jpg"
alt="Daily Sweet Surprise"
loading="lazy"
/>
</picture>
</div>
</div>
<div class="image-slider__slide swiper-slide">
<div class="image-slider__image">
<picture>
<source
srcset="
./img/gallery/desktop/img-gal-3-desktop@1x.webp,
./img/gallery/desktop/img-gal-3-desktop@2x.webp
"
media="(min-width: 1440px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/desktop/img-gal-3-desktop@1x.jpg,
./img/gallery/desktop/img-gal-3-desktop@2x.jpg
"
media="(min-width: 1440px)"
type="image/jpeg"
/>
<source
srcset="
./img/gallery/mobile/img-gal-3-mobile@1x.webp,
./img/gallery/mobile/img-gal-3-mobile@2x.webp
"
media="(min-width: 320px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/mobile/img-gal-3-mobile@1x.jpg,
./img/gallery/mobile/img-gal-3-mobile@2x.jpg
"
media="(min-width: 320px)"
type="image/jpeg"
/>
<img
src="./img/gallery/mobile/img-gal-3-mobile@1x.jpg"
alt="Daily Sweet Surprise"
loading="lazy"
/>
</picture>
</div>
</div>
<div class="image-slider__slide swiper-slide">
<div class="image-slider__image">
<picture>
<source
srcset="
./img/gallery/desktop/img-gal-4-desktop@1x.webp,
./img/gallery/desktop/img-gal-4-desktop@2x.webp
"
media="(min-width: 1440px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/desktop/img-gal-4-desktop@1x.jpg,
./img/gallery/desktop/img-gal-4-desktop@2x.jpg
"
media="(min-width: 1440px)"
type="image/jpeg"
/>
<source
srcset="
./img/gallery/mobile/img-gal-4-mobile@1x.webp,
./img/gallery/mobile/img-gal-4-mobile@2x.webp
"
media="(min-width: 320px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/mobile/img-gal-4-mobile@1x.jpg,
./img/gallery/mobile/img-gal-4-mobile@2x.jpg
"
media="(min-width: 320px)"
type="image/jpeg"
/>
<img
src="./img/gallery/mobile/img-gal-4-mobile@1x.jpg"
alt="Daily Sweet Surprise"
loading="lazy"
/>
</picture>
</div>
</div>
<div class="image-slider__slide swiper-slide">
<div class="image-slider__image">
<picture>
<source
srcset="
./img/gallery/desktop/img-gal-5-desktop@1x.webp,
./img/gallery/desktop/img-gal-5-desktop@2x.webp
"
media="(min-width: 1440px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/desktop/img-gal-5-desktop@1x.jpg,
./img/gallery/desktop/img-gal-5-desktop@2x.jpg
"
media="(min-width: 1440px)"
type="image/jpeg"
/>
<source
srcset="
./img/gallery/mobile/img-gal-5-mobile@1x.webp,
./img/gallery/mobile/img-gal-5-mobile@2x.webp
"
media="(min-width: 320px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/mobile/img-gal-5-mobile@1x.jpg,
./img/gallery/mobile/img-gal-5-mobile@2x.jpg
"
media="(min-width: 320px)"
type="image/jpeg"
/>
<img
src="./img/gallery/mobile/img-gal-5-mobile@1x.jpg"
alt="Daily Sweet Surprise"
loading="lazy"
/>
</picture>
</div>
</div>
<div class="image-slider__slide swiper-slide">
<div class="image-slider__image">
<picture>
<source
srcset="
./img/gallery/desktop/img-gal-6-desktop@1x.webp,
./img/gallery/desktop/img-gal-6-desktop@2x.webp
"
media="(min-width: 1440px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/desktop/img-gal-6-desktop@1x.jpg,
./img/gallery/desktop/img-gal-6-desktop@2x.jpg
"
media="(min-width: 1440px)"
type="image/jpeg"
/>
<source
srcset="
./img/gallery/mobile/img-gal-6-mobile@1x.webp,
./img/gallery/mobile/img-gal-6-mobile@2x.webp
"
media="(min-width: 320px)"
type="image/webp"
/>
<source
srcset="
./img/gallery/mobile/img-gal-6-mobile@1x.jpg,
./img/gallery/mobile/img-gal-6-mobile@2x.jpg
"
media="(min-width: 320px)"
type="image/jpeg"
/>
<img
src="./img/gallery/mobile/img-gal-6-mobile@1x.jpg"
alt="Daily Sweet Surprise"
loading="lazy"
/>
</picture>
</div>

</div>


</div>


<!-- If we need navigation buttons -->
<div class="gallery-swiper-button-prev"></div>
<div class="gallery-swiper-button-next"></div>

<!-- If we need pagination -->
<div class="gallery-swiper-pagination"></div>
</div>
</section>
2 changes: 1 addition & 1 deletion src/partials/reviews.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h2 class="section-title" text="Reviews">Reviews</h2>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="reviews-swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Expand Down
Loading

0 comments on commit 34a6b91

Please sign in to comment.