Как добавить pagination через javascript? Я прошу оптимальный грамотный способ, который бы позволил через js со всеми просчетами вставлять эту пагинацию. И после естественно настроить слайд, что бы правильно все работало
$(document).ready(function(){
Slider(20);
function Slider(margin) {
// html var
var sliderContainer = $('#slider');
var sliderInner = $(sliderContainer).find('.slider-inner');
var item = $(sliderInner).find('.item');
var itemShow = 4; // Сколько показывать 4
var pagination = $(sliderContainer).find('.pagination');
// Head var
var itemL = item.length; // Количество 12
var sliderInnerWidth = sliderInner.width(); // 1170
var sliderWrapper = $(sliderInner).find('.slider-wrapper');
// Item Width
var itemW = (sliderInnerWidth - ((margin * 2) * itemShow) ) / itemShow; //252
// Wrapper width
var sliderWrapperWidth = itemL * ( itemW + (margin * 2)); // 3510
// Максимальное значение шага
var nextMax = sliderWrapperWidth - sliderInnerWidth;
nextMax = nextMax * (-1);
var td = 0;
var step;
$('.prev').click(function(){
if (td == 0) {
return false;
}
else {
step = itemW + (margin * 2);
td += step
$('.slider-wrapper').css({
'transform' : 'translate3d(' + td + 'px, 0px, 0px)'
});
console.log(td);
}
});
$('.next').click(function(){
if(nextMax == td) {
return false
}
else {
step = itemW + (margin * 2);
td -= step
$('.slider-wrapper').css({
'transform' : 'translate3d(' + td + 'px, 0px, 0px)'
});
console.log(td);
}
});
$(sliderWrapper).css({
'width': sliderWrapperWidth + 'px'
});
$(item).css({
'width' : itemW + 'px',
'margin' : margin + 'px'
});
};
});
* {
padding: 0;
margin: 0;
}
body {
background: #EE6E73;
}
.container {
width: 1170px;
margin: 50px auto;
}
#slider {
background: #1AF277;
padding: 30px 0;
}
.slider-inner {
overflow: hidden;
}
.slider-wrapper {
overflow: hidden;
position: relative;
transform: translate3d(0px, 0px, 0px);
transition: 0.3s;
}
.slider-inner .item {
float: left;
text-align: center;
position: relative;
}
.item:nth-child(2n-1) {
background: #fdeee0;
}
.item:nth-child(3n-1) {
background: #8E24AA;
}
.item:nth-child(4n-1) {
background: #FF8A80;
}
.item:nth-child(5n-1) {
background: #C51162;
}
.item {
background: #fdeee0;
}
.prev {
float: left;
}
.next {
float: right;
}
.pagination {
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
}
.pag-item {
width: 10px;
height: 10px;
border-radius: 5px;
background: #fff;
margin: 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div id="slider">
<div class="slider-inner">
<div class="slider-wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
<div class="sliderControll">
<div class="nav">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
<div class="pagination">
</div>
</div>
</div>
</div>
</div>
</body>
</html>