我使用 jQuery 插件 pagination.js .
我想做什么
我想同步我自己的输入范围( slider )和分页，这样我就可以在输入范围端进行操作。
即:
它可以只使用 slider 来切换页面。
当有 5 页或更多时:
我觉得如果能和pagination.js完全同步也是可以的。
我当前的代码
目前pagination.js应用于<div>用于显示页码，但是将 pagination.js 应用于 slider 是否更好..？
在下面的代码片段中，显示是坏的，所以看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>最佳答案
如果您编写一个函数来按给定步骤(或每页的元素)滚动或分页，您可以与范围类型输入同步。 我写了一段我的代码。请看:https://github.com/caglarorhan/input-type-range-sync
关于javascript - 如何同步分页和输入范围？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55408449/