Commit 0ce63eb8 authored by Sergey's avatar Sergey

add gallery product

parent 111c74fc
...@@ -6,4 +6,6 @@ ...@@ -6,4 +6,6 @@
//= template/product-title/index.html //= template/product-title/index.html
//= template/product-main/index.html
//= template/common/footer.html //= template/common/footer.html
\ No newline at end of file
'use strict';
(function () {
var gallery = document.querySelectorAll('.product__gallery-item');
if(gallery.length){
gallery.forEach(function (item) {
item.addEventListener('click', function () {
item.classList.toggle('active');
})
})
}
document.addEventListener('DOMContentLoaded', function () {
var mySwiperProduct = new Swiper ('.product__gallery', {
direction: 'horizontal',
slidesPerView: 3,
loop: false,
});
});
})();
\ No newline at end of file
@import "../settings/color";
.product__main{
display: flex;
justify-content: space-between;
}
.product__main-bl{
width: 33%;
}
.product__grey-title{
background: $grey-product;
padding: 12px;
font-weight: bold;
color: rgba(black, .8);
}
.product__main-image{
margin: 0 7px;
img{
width: 100%;
}
}
.product__gallery{
overflow: hidden;
}
.product__gallery-list{
padding-left: 0;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.product__gallery-item{
width: 33%;
height: 124px;
overflow: hidden;
cursor: pointer;
border: 1px solid white;
img{
width: 100%;
}
}
.product__gallery-item.active{
border: 1px solid black;
}
...@@ -6,4 +6,5 @@ $about-bg: #dfdfdf; ...@@ -6,4 +6,5 @@ $about-bg: #dfdfdf;
$grey-text: #727272; $grey-text: #727272;
$footer: #333333; $footer: #333333;
$bg-slider: #c4c4c4; $bg-slider: #c4c4c4;
$dark-text: #323232; $dark-text: #323232;
\ No newline at end of file $grey-product: #dfdfdf;
\ No newline at end of file
<div class="wrapper product__main">
<div class="product__main-bl product__main-gallery">
<div class="product__gallery-title product__grey-title">Фото</div>
<div class="product__gallery">
<ul class="product__gallery-list swiper-wrapper">
<li class="product__gallery-item swiper-slide">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide">
<img src="img/galley-item.png">
</li>
</ul>
</div>
</div>
<div class="product__main-bl product__main-image">
<img src="img/product-main.png" alt="Товар">
</div>
<div class="product__main-bl">
<div class="product__dop-title product__grey-title">Навесное оборудование</div>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment