<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<body>
<div id="block-for-slider">
<div id="viewport">
<ul id="slidewrapper">
<li class="slide">
<img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="1" class="slide-img">
<p>Пусть всегда будет вкусно!</p>
<div class="window">
<p>— КУЛИНАРНЫЙ КЛУБ —</p>
<p>Создай свой кулинарный шедевр вместе с соусами Камако</p>
</div>
<div id="button">
<a href="">УЗНАТЬ БОЛЬШЕ</a>
</div>
</li>
<li class="slide">
<img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="2" class="slide-img">
</li>
<li class="slide">
<img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="3" class="slide-img">
</li>
</ul>
<div id="prev-next-btns">
<i id="prev-btn" class="fas fa-angle-left"></i>
<i id="next-btn" class="fas fa-angle-right"></i>
</div>
<div class="nav_btn">
<input type="radio" name="slider" id="button1" checked>
<input type="radio" name="slider" id="button2">
<input type="radio" name="slider" id="button3">
<label id="hw1" for="button1"></label>
<label id="hw2" for="button2"></label>
<label id="hw3" for="button3"></label>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<code lang="css">
#block-for-slider {
position: fixed;
width: 100%;
margin: 0 auto;
}
#viewport {
width: 100%;
display: table;
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#slidewrapper {
position: relative;
width: calc(100% * 4);
top: 0;
left: 0;
margin: 0;
padding: 0;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
#slidewrapper ul, #slidewrapper li {
margin: 0;
padding: 0;
}
#slidewrapper li {
width: calc(100%/4);
list-style: none;
display: inline;
float: left;
position: relative;
}
.slide img {
width: 100%;
}
.slide>p {
position: absolute;
top: 25px;
left: 535px;
color: white;
font: italic 400 22px 'Noto Serif', serif;
}
.window {
background-color: white;
width: 600px;
height: 250px;
border-radius: 5px;
position: absolute;
left: 390px;
top: 120px;
}
.window>p:first-child {
text-align: center;
padding: 5px;
font-family: "Museo Sans Cyrl 900";
font-size: 14px;
margin-top: 30px;
letter-spacing: 4px;
color: #fab330;
}
.window>p:last-child {
text-align: center;
font: italic 400 30px 'Noto Serif', serif;
font-size: 30px;
color: #282828;
}
#button>a {
border: 1px solid #fab330;
border-radius: 4px;
background-color: #fab330;
color: white;
text-decoration: none;
padding: 15px 35px;
position: absolute;
left: 580px;
top: 300px;
letter-spacing: 4px;
font-family: "Museo Sans Cyrl 900";
font-size: 12px;
cursor: pointer;
}
#button>a:hover {
text-decoration: none;
color: white;
}
#prev-btn, #next-btn {
position: absolute;
width: 50px;
height: 50px;
color: white;
font-size: 30px;
border-radius: 50%;
top: calc(50% - 35px);
}
#prev-btn:hover, #next-btn:hover {
cursor: pointer;
}
#prev-btn {
left: 20px;
}
#next-btn {
right: 20px;
}
.nav_btn {
position: absolute;
width: 100%;
bottom: 20px;
padding: 0;
margin: 0;
text-align: center;
}
.nav_btn input {
display: none;
}
.nav_btn label {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
margin: 3px;
padding: 5px;
}
#button1:checked ~ #hw1,
#button2:checked ~ #hw2,
#button3:checked ~ #hw3 {
background: #fff;
}
</code>
<code lang="javascript">
$(document).ready(function() {
var slideNow = 1;
var slideCount = $('#slidewrapper').children().length;
function nextSlide() {
if (slideNow === slideCount || slideNow <= 0 || slideNow > slideCount) {
$('#slidewrapper').css('transform', 'translate(0, 0)');
slideNow = 1;
}
else {
translateWidth = -$('#viewport').width() * (slideNow);
$('#slidewrapper').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow++;
}
}
var translateWidth = 0;
var slideInterval = 7500;
var switchInterval = setInterval(nextSlide, slideInterval);
$('#viewport').hover(function(){
clearInterval(switchInterval);
},function() {
switchInterval = setInterval(nextSlide, slideInterval);
});
function prevSlide() {
if (slideNow === 1 || slideNow <= 0 || slideNow > slideCount) {
translateWidth = -$('#viewport').width() * (slideCount - 1);
$('#slidewrapper').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow = slideCount;
} else {
translateWidth = -$('#viewport').width() * (slideNow - 2);
$('#slidewrapper').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow--;
}
}
$('#next-btn').click(function() {
nextSlide();
});
$('#prev-btn').click(function() {
prevSlide();
});
var navBtnId = 0;
$('.nav_btn').click(function() {
navBtnId = $(this).index();
if (navBtnId + 1 !== slideNow) {
translateWidth = -$('#viewport').width() * (navBtnId);
$('#slidewrapper').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow = navBtnId + 1;
}
});
});
</code>
