Skip to content

B
bobcat-su_full
Commit 43f90bf7 authored by Sergey's avatar Sergey
Browse files
Options

Add new block detail

parent 0190f2ef
Show whitespace changes
Inline Side-by-side
Showing with 824 additions and 9 deletions
src/item.html
View file @ 43f90bf7
......@@ -10,4 +10,6 @@
//= template/product-info/index.html
//= template/product-slider-detal/index.html
//= template/common/footer.html
\ No newline at end of file
src/js/gallery-slider.js
View file @ 43f90bf7
'use strict';
(function () {
function checkGallery(list, current) {
list.forEach(function (item) {
if(item.classList.contains('active') && item !== current){
item.classList.remove('active');
}
})
}
var gallery = document.querySelectorAll('.product__gallery-item');
if(gallery.length){
var mainImage = document.querySelector('.product__main-image img');
gallery.forEach(function (item) {
item.addEventListener('click', function () {
item.classList.toggle('active');
item.classList.add('active');
checkGallery(gallery, item);
mainImage.setAttribute('src', item.getAttribute('data-url'));
})
})
}
......@@ -13,6 +24,7 @@
var mySwiperProduct = new Swiper ('.product__gallery', {
direction: 'horizontal',
slidesPerView: 3,
slidesPerGroup: 3,
loop: false,
simulateTouch: false,
spaceBetween: 4,
......
src/js/hint-dop.js 0 → 100644
View file @ 43f90bf7
'use strict';
(function () {
var dopU = document.querySelector('.product__dop-list');
if(dopU){
var dopItem = dopU.querySelectorAll('.product__dop-bl');
dopItem.forEach(function (dopHint) {
if(dopHint.querySelector('.product__dop-hint')){
dopHint.addEventListener('mouseover', function (evt) {
dopHint.querySelector('.product__dop-hint').classList.add('active');
});
dopHint.addEventListener('mouseout', function () {
dopHint.querySelector('.product__dop-hint').classList.remove('active');
})
}
})
}
})();
\ No newline at end of file
src/js/product-tabs.js
View file @ 43f90bf7
......@@ -22,4 +22,14 @@
})
})
}
var accordion = document.querySelectorAll('.product__info-tit');
if(accordion.length){
accordion.forEach(function (itemAccordion) {
itemAccordion.addEventListener('click', function () {
itemAccordion.parentElement.classList.toggle('active');
console.log(itemAccordion.parentElement);
checkTab(tabs, itemAccordion.parentElement);
})
})
}
})();
\ No newline at end of file
src/js/slider-dop.js 0 → 100644
View file @ 43f90bf7
'use strict';
(function () {
document.addEventListener('DOMContentLoaded', function () {
var mySwiperDop = new Swiper ('.product__dop', {
direction: 'horizontal',
slidesPerView: 5,
loop: false,
simulateTouch: false,
spaceBetween: 4,
slidesPerGroup: 5,
pagination: {
el: '.swiper-pagination-gallery',
clickable: true
}
});
});
})();
\ No newline at end of file
src/scss/product-info/product-info.scss
View file @ 43f90bf7
......@@ -2,12 +2,15 @@
.product__tabs{
width: 100%;
background: rgba($color-tab,.3);
display: flex;
justify-content: space-between;
}
.product__tabs-list{
display: flex;
list-style-type: none;
padding-left: 0;
margin: 0;
}
.product__tabs-item{
......@@ -26,10 +29,131 @@
background: $grey-text;
}
.product__info-item{
.product__info-body{
display: none;
}
.product__info-item.active{
.product__info-item.active .product__info-body{
display: block;
}
.characteristic__list{
list-style-type: none;
display: flex;
padding-left: 0;
flex-wrap: wrap;
}
.characteristic__item{
width: 50%;
padding: 15px 0;
position: relative;
&:nth-child(even){
padding-left: 10px;
}
&:nth-child(odd){
padding-right: 10px;
}
&:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 90%;
height: 1px;
background: $grey-text;
transform: translateX(-50%);
}
}
.characteristic__table{
width: 100%;
color: $grey-text;
}
.characteristic__table-val{
text-align: right;
}
.characteristic__tit{
text-transform: uppercase;
font-style: italic;
font-weight: bold;
color: $grey-text;
}
.product-slider-detail{
background: $grey-product;
}
.check-price{
padding: 0 20px;
text-transform: uppercase;
background: $red-color;
border: none;
color: white;
font-size: 18px;
transition: .2s;
cursor: pointer;
border-left: 2px solid white;
&:hover{
background: rgba($red-color, .8);
}
}
.product__info-tit{
visibility: hidden;
height: 0;
margin: 0;
}
@media screen and (max-width: 704px){
.product__tabs{
display: none;
}
.product__info-item.active .product__info-tit{
position: relative;
background: $grey-text;
&:after{
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
background: url("../img/down-arrow.svg");
background-size: contain;
right: 0;
top: 50%;
transform: translate(-100%,-50%) rotate(180deg);
transition: .2s;
}
}
.product__info-tit{
position: relative;
visibility: visible;
height: auto;
background: rgba($grey-text, .6);
color: white;
font-weight: normal;
padding: 7px 5px;
&:after{
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
background: url("../img/down-arrow.svg");
background-size: contain;
right: 0;
top: 50%;
transform: translate(-100%,-50%);
transition: .2s;
}
}
}
@media screen and (max-width: 810px){
.characteristic__item{
width: 100%;
}
}
\ No newline at end of file
src/scss/product-main/product-main.scss
View file @ 43f90bf7
......@@ -41,7 +41,7 @@
}
}
.product__gallery-item.active{
border: 1px solid black;
border: 1px solid $red-color;
}
.swiper-pagination-gallery{
......@@ -55,3 +55,80 @@
.swiper-pagination-bullet-active{
background: $red-color;
}
.product__dop{
overflow: hidden;
}
.product__dop-list{
display: flex;
list-style-type: none;
padding-left: 0;
justify-content: space-between;
}
.product__dop-item{
position: relative;
}
.product__dop-bl{
width: 65px;
height: 65px;
}
.product__dop-bl-link{
width: 100%;
height: 100%;
overflow: hidden;
img{
width: 100%;
}
}
.product__dop-hint{
visibility: hidden;
width: 0;
margin: 0;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
/*.product__dop-hint.active{
visibility: visible;
z-index: 10;
font-size: 12px;
white-space: pre;
background: rgba(black, .7);
color: white;
width: auto;
height: auto;
padding: 2px 3px;
border-radius: 5px;
&:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
border: 20px solid transparent;
border-top: 20px solid green;
}
}
*/
.product__dop-bl-link{
display: flex;
position: relative;
&:after{
content: "";
display: block;
width: 1px;
height: 80%;
background: rgb(220, 220, 220);
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
}
}
src/scss/product-title/product-title.scss
View file @ 43f90bf7
......@@ -2,4 +2,5 @@
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
overflow: hidden;
}
\ No newline at end of file
src/template/product-info/index.html
View file @ 43f90bf7
......@@ -6,21 +6,169 @@
<li class="product__tabs-item">Габаритные схемы</li>
<li class="product__tabs-item">Техническая документация</li>
</ul>
<button class="check-price">Узнать цену</button>
</div>
<div class="product__info-container">
<div class="product__info-list">
<div class="product__info-item active">
<p>Эксплотационные</p>
<h2 class="product__info-tit">Характеристики</h2>
<div class="characteristic">
<div class="product__info-body">
<ul class="characteristic__list">
<li class="characteristic__item">
<p class="characteristic__tit">Эксплотационные</p>
<table class="characteristic__table">
<tr>
<td>Номинальная грузоподъемность (кг)</td>
<td class="characteristic__table-val">869</td>
</tr>
<tr>
<td>Опрокидывающая нагрузка (кг)</td>
<td class="characteristic__table-val">1737</td>
</tr>
<tr>
<td>Производительность насоса (стандартная / подача) (л/мин)</td>
<td class="characteristic__table-val">64,7 / 101.10</td>
</tr>
<tr>
<td>Давление в системе у быстроразъемных муфт (Мпа)</td>
<td class="characteristic__table-val">23,8-24,5</td>
</tr>
<tr>
<td>Скорость движения (км/ч)</td>
<td class="characteristic__table-val">11,8</td>
</tr>
<tr>
<td>Скорость движения (высокая - опция*) (км/час)</td>
<td class="characteristic__table-val">17,3</td>
</tr>
</table>
</li>
<li class="characteristic__item">
<p class="characteristic__tit">Габариты</p>
<table class="characteristic__table">
<tr>
<td>Номинальная грузоподъемность (кг)</td>
<td class="characteristic__table-val">869</td>
</tr>
<tr>
<td>Опрокидывающая нагрузка (кг)</td>
<td class="characteristic__table-val">1737</td>
</tr>
<tr>
<td>Производительность насоса (стандартная / подача) (л/мин)</td>
<td class="characteristic__table-val">64,7 / 101.10</td>
</tr>
<tr>
<td>Давление в системе у быстроразъемных муфт (Мпа)</td>
<td class="characteristic__table-val">23,8-24,5</td>
</tr>
</table>
</li>
<li class="characteristic__item">
<p class="characteristic__tit">Двигатель</p>
<table class="characteristic__table">
<tr>
<td>Номинальная грузоподъемность (кг)</td>
<td class="characteristic__table-val">869</td>
</tr>
<tr>
<td>Опрокидывающая нагрузка (кг)</td>
<td class="characteristic__table-val">1737</td>
</tr>
<tr>
<td>Производительность насоса (стандартная / подача) (л/мин)</td>
<td class="characteristic__table-val">64,7 / 101.10</td>
</tr>
<tr>
<td>Давление в системе у быстроразъемных муфт (Мпа)</td>
<td class="characteristic__table-val">23,8-24,5</td>
</tr>
<tr>
<td>Скорость движения (км/ч)</td>
<td class="characteristic__table-val">11,8</td>
</tr>
<tr>
<td>Скорость движения (высокая - опция*) (км/час)</td>
<td class="characteristic__table-val">17,3</td>
</tr>
</table>
</li>
<li class="characteristic__item">
<p class="characteristic__tit">Масса</p>
<table class="characteristic__table">
<tr>
<td>Номинальная грузоподъемность (кг)</td>
<td class="characteristic__table-val">869</td>
</tr>
<tr>
<td>Опрокидывающая нагрузка (кг)</td>
<td class="characteristic__table-val">1737</td>
</tr>
<tr>
<td>Производительность насоса (стандартная / подача) (л/мин)</td>
<td class="characteristic__table-val">64,7 / 101.10</td>
</tr>
<tr>
<td>Давление в системе у быстроразъемных муфт (Мпа)</td>
<td class="characteristic__table-val">23,8-24,5</td>
</tr>
<tr>
<td>Скорость движения (км/ч)</td>
<td class="characteristic__table-val">11,8</td>
</tr>
<tr>
<td>Скорость движения (высокая - опция*) (км/час)</td>
<td class="characteristic__table-val">17,3</td>
</tr>
<tr>
<td>Номинальная грузоподъемность (кг)</td>
<td class="characteristic__table-val">869</td>
</tr>
<tr>
<td>Опрокидывающая нагрузка (кг)</td>
<td class="characteristic__table-val">1737</td>
</tr>
<tr>
<td>Производительность насоса (стандартная / подача) (л/мин)</td>
<td class="characteristic__table-val">64,7 / 101.10</td>
</tr>
<tr>
<td>Давление в системе у быстроразъемных муфт (Мпа)</td>
<td class="characteristic__table-val">23,8-24,5</td>
</tr>
<tr>
<td>Скорость движения (км/ч)</td>
<td class="characteristic__table-val">11,8</td>
</tr>
<tr>
<td>Скорость движения (высокая - опция*) (км/час)</td>
<td class="characteristic__table-val">17,3</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="product__info-item">
<h2 class="product__info-tit">Описание</h2>
<div class="product__info-body">
<p>Эксплотационные2</p>
</div>
</div>
<div class="product__info-item">
<h2 class="product__info-tit">Габаритные схемы</h2>
<div class="product__info-body">
<p>Эксплотационные3</p>
</div>
</div>
<div class="product__info-item">
<h2 class="product__info-tit">Техническая документация</h2>
<div class="product__info-body">
<p>Эксплотационные4</p>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/template/product-main/index.html
View file @ 43f90bf7
......@@ -3,16 +3,22 @@
<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">
<li class="product__gallery-item swiper-slide active" data-url="img/product-main.png">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide">
<li class="product__gallery-item swiper-slide" data-url="img/about-main.png">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide">
<li class="product__gallery-item swiper-slide" data-url="img/product-main.png">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide">
<li class="product__gallery-item swiper-slide" data-url="img/about-main.png">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide" data-url="img/product-main.png">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide" data-url="img/about-main.png">
<img src="img/galley-item.png">
</li>
</ul>
......@@ -24,5 +30,106 @@
</div>
<div class="product__main-bl">
<div class="product__dop-title product__grey-title">Навесное оборудование</div>
<div class="product__dop">
<ul class="product__dop-list swiper-wrapper">
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img class="product__dop-img" src="img/shetka.png" alt="Супер щетка" title="Супер щетка">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
</ul>
<div class="swiper-pagination-gallery"></div>
</div>
</div>
</div>
\ No newline at end of file
src/template/product-slider-detal/index.html 0 → 100644
View file @ 43f90bf7
<div class="product-slider product-slider-detail">
<div class="wrapper product-slider__wrapper active">
<h2 class="h2-line h2-about">Другие модели</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики2</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики3</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики4</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики5</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики6</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</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