135 lines
4.1 KiB
HTML
135 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1" name="viewport">
|
|
<title>ItcSlider - Example 01</title>
|
|
<link href="../itc-slider.css" rel="stylesheet">
|
|
<script defer src="../itc-slider.js"></script>
|
|
<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: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.itc-slider-1, .itc-slider-2 {
|
|
flex: 1 0 40%;
|
|
display: block;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.itc-slider-items {
|
|
counter-reset: slide;
|
|
}
|
|
|
|
.itc-slider-item {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
counter-increment: slide;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.itc-slider-item::before {
|
|
content: counter(slide) "/5";
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
color: #fff;
|
|
font-style: italic;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="itc-slider itc-slider-1" data-autoplay="false" data-loop="false" data-slider="itc-slider">
|
|
<div class="itc-slider-wrapper">
|
|
<div class="itc-slider-items">
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/1.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/2.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/3.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/4.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/5.jpg" width="600"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="itc-slider-btn itc-slider-btn-prev"></button>
|
|
<button class="itc-slider-btn itc-slider-btn-next"></button>
|
|
<ol class="itc-slider-indicators">
|
|
<li class="itc-slider-indicator" data-slide-to="0"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="1"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="2"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="3"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="4"></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="itc-slider itc-slider-2" data-autoplay="false" data-loop="true" data-slider="itc-slider">
|
|
<div class="itc-slider-wrapper">
|
|
<div class="itc-slider-items">
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/1.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/2.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/3.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/4.jpg" width="600"></a>
|
|
</div>
|
|
<div class="itc-slider-item">
|
|
<a href="#"><img alt="" height="400" src="images/5.jpg" width="600"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="itc-slider-btn itc-slider-btn-prev"></button>
|
|
<button class="itc-slider-btn itc-slider-btn-next"></button>
|
|
<ol class="itc-slider-indicators">
|
|
<li class="itc-slider-indicator" data-slide-to="0"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="1"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="2"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="3"></li>
|
|
<li class="itc-slider-indicator" data-slide-to="4"></li>
|
|
</ol>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|