114 lines
2.6 KiB
HTML
114 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ItcSlider - Example 01</title>
|
|
<link rel="stylesheet" href="../itc-slider.css">
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol';
|
|
}
|
|
|
|
.container {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.itc-slider-items {
|
|
counter-reset: slide;
|
|
}
|
|
|
|
.itc-slider-item {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
counter-increment: slide;
|
|
position: relative;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<template id="slider-template">
|
|
<div class="itc-slider">
|
|
<div class="itc-slider-wrapper"><div class="itc-slider-items"></div></div>
|
|
<button class="itc-slider-btn itc-slider-btn-prev"></button>
|
|
<button class="itc-slider-btn itc-slider-btn-next"></button>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="container"></div>
|
|
|
|
<script src="../itc-slider.js"></script>
|
|
<script>
|
|
const items = [
|
|
{
|
|
img: 'images/1.jpg'
|
|
},
|
|
{
|
|
img: 'images/2.jpg'
|
|
},
|
|
{
|
|
img: 'images/3.jpg'
|
|
},
|
|
{
|
|
img: 'images/4.jpg'
|
|
},
|
|
{
|
|
img: 'images/5.jpg'
|
|
},
|
|
{
|
|
img: 'images/6.jpg'
|
|
},
|
|
]
|
|
const sliderTemplate = document.querySelector('#slider-template');
|
|
const containerElem = document.querySelector('.container');
|
|
const sliderContainerElem = sliderTemplate.content.cloneNode(true);
|
|
// если нужно добавить клоны слайдов, когда их меньше 3
|
|
if (items.length < 3) {
|
|
items.push(items[0]);
|
|
items.push(items[1]);
|
|
}
|
|
const sliderItems = items.map((item) => {
|
|
return `<div class="itc-slider-item"><img src="${item.img}" alt=""></div>`;
|
|
});
|
|
sliderContainerElem.querySelector('.itc-slider-items').innerHTML = sliderItems.join('');
|
|
containerElem.append(sliderContainerElem);
|
|
const sliderElem = document.querySelector('.itc-slider');
|
|
if (sliderElem.querySelectorAll('.itc-slider-item').length > 1) {
|
|
ItcSlider.getOrCreateInstance(sliderElem, {
|
|
autoplay: false,
|
|
interval: 5000,
|
|
loop: true,
|
|
refresh: true,
|
|
swipe: true
|
|
});
|
|
} else {
|
|
sliderElem.querySelectorAll('.itc-slider-btn').forEach((item) => {
|
|
item.classList.add('itc-slider-btn-hide');
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|