Я использую плагин jQuery pagination.js .
Что я хочу сделать
Я хочу синхронизировать свой собственный входной диапазон (ползунок) и нумерацию страниц, чтобы я мог работать на стороне входного диапазона.
, а именно: * +1010 *
Он может переключать страницы только с помощью ползунка.
При наличии 5 и более страниц:
Я думаю, что это также возможно, если его можно полностью синхронизировать с pagination.js.
Мой текущий код
В настоящее время pagination.js применяется к <div> для отображения номера страницы, но лучше ли применять pagination.js к слайдеру?
В следующем фрагменте кода экран не работает, поэтому посмотрите на JSFiddle .
/* pagination */
function tpl(data) {
var html = '';
$.each(data, function(index, item) {
html += '<section class="item">' + item + '</section>';
});
return html;
}
$(function() {
var len = $('.item').length;
$('#no-p').pagination({
dataSource: function(done) {
var result = [];
for (var i = 0; i < len; i++) {
var $item = $('.item').get(i);
if ($item) result.push($item.innerHTML);
}
done(result);
},
pageSize: 4,
showPageNumbers: false,
showNavigator: true,
autoHidePrevious: true,
autoHideNext: true,
callback: function(data, pagination) {
var html = tpl(data);
$('#items').html(html);
}
});
});
html {
font-size: 62.5%;
}
.list {
display: grid;
grid-template-columns: 12.8rem 1fr;
}
input[type=range]:focus {
outline: none;
}
#filter {
position: sticky;
position: -webkit-sticky;
top: 5rem;
left: 5.7rem;
width: 1.3rem;
height: 19.6rem + 3rem;
}
#filter input[type=range][orient=vertical] {
writing-mode: bt-lr; /* IE */
-webkit-appearance: none;
width: 19.6rem;
right: 25rem;
bottom: 5.7rem;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
transform-origin: bottom left;
}
/* Chrome */
#filter input[type=range][orient=vertical]::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 1.3rem;
background: url('https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190328/20190328184123.png');
}
#filter input[type="range"][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.7rem + 1.9rem;
height: 3.5rem;
margin-top: -1.1rem;
background: url('https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190328/20190328184120.png') no-repeat center center;
}
/* Firefox */
#filter input[type=range]::-moz-range-track {
height: 1.3rem;
}
#filter input[type="range"]::-moz-range-thumb {
width: 3.5rem + 1.1rem;
height: 3.5rem;
margin-top: -1.1rem;
background: url('https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190328/20190328184120.png') no-repeat center center;
}
/* labels */
#filter p {
font-size: 1.7rem;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.pageNum {
font-size: 1.5rem;
list-style: none;
margin: 0 0 0 -3rem;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
li {
margin-bottom: 1.8rem;
&:last-child {
margin-bottom: 0;
}
}
}
#items {
display: grid;
grid-gap: 3.8rem 4.6rem;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.item {
text-align: center;
img {
width: 100%;
height: auto;
}
h2 {
font-size: 1.6rem;
margin-top: 1.6rem;
margin-bottom: 1.5rem;
}
p {
font-size: 1.5rem;
margin-bottom: .8rem;
}
h2,
p {
text-align: left;
}
}
#no-p {
font-size: 1.1rem;
text-align: center;
margin: 3.7rem 0 7.3rem 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.js"></script>
<!-- For now, there is an arrow in <div> that shows the page number,
but I want to put it on the slider side. -->
<div class="list">
<div id="filter">
<p>p</p>
<input id="sliderP" type="range" name="page" orient="vertical" step="25" list="pagelist" value="0" />
<ul class="pageNum">
<li>1 -</li>
<li>2 -</li>
<li>3 -</li>
<li>4 -</li>
<li>5 -</li>
</ul>
<!-- ↓ I don't know if this is necessary ↓ -->
<datalist class="pagelist">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
</div>
<div id="items">
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="1" />
<h2>title1</h2>
<p>description1 description1</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="2" />
<h2>title2</h2>
<p>description2 description2</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="3" />
<h2>title3</h2>
<p>description3 description3</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="4" />
<h2>title4</h2>
<p>description4 description4</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="5" />
<h2>title5</h2>
<p>description5 description5</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="6" />
<h2>title6</h2>
<p>description6 description6</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="7" />
<h2>title7</h2>
<p>description7 description7</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="8" />
<h2>title8</h2>
<p>description8 description8</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="9" />
<h2>title9</h2>
<p>description9 description9</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="10" />
<h2>title10</h2>
<p>description10 description10</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="11" />
<h2>title11</h2>
<p>description11 description11</p>
</section>
<section class="item">
<img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="12" />
<h2>title12</h2>
<p>description12 description12</p>
</section>
</div>
</div>
<div id="no-p"></div>