jQuery の本のページめくり風スライダープラグインです。
特徴
- マウスホイール、スライダーバー (ブックマーク) で、スピーディーにページ (スライド) を繰ることができます。
DEMO
使い方
スクリプトと CSS を読み込む
jQuery と bookslider.js、bookslider.css を読み込むように HTML に記述します。
スライドするコンテンツ (画像など) を配置する
配置する場所に下記のように記述します。
bookslider、slides、slide、slider-nav、slider-prev、slider-next、bookmark-area および bookmark クラスは必須です。bookslider クラス要素に tabindex 属性を指定するとカーソルキーでページを繰ることができます。
<div id="bookslider-1" class="bookslider" tabindex="0">
<div class="slides">
<div class="slide"><img src="slide1.jpg" alt="" width="1920" height="1600" loading="lazy"></div>
<div class="slide"><img src="slide2.jpg" alt="" width="1920" height="1600" loading="lazy"></div>
<div class="slide"><img src="slide3.jpg" alt="" width="1920" height="1600" loading="lazy"></div>
<div class="slide"><img src="slide4.jpg" alt="" width="1920" height="1600" loading="lazy"></div>
<div class="slide"><img src="slide5.jpg" alt="" width="1920" height="1600" loading="lazy"></div>
</div>
<div class="slider-nav slider-prev"></div>
<div class="slider-nav slider-next"></div>
<div class="bookmark-area"><div class="bookmark"></div></div>
</div>スライドを実行するスクリプト
スライドを実行するスクリプトを下記のように記述します。
jQuery(function($) {
$("#bookslider-1").bookslider();
});オプション
| プロパティ | デフォルト | 説明 |
|---|---|---|
| animationSpeed | 400 | アニメーション効果のスピードです。 ミリ秒単位で指定します。 |
スライダー本体
bookslider.js
/**
* jQuery BookSlider v1.0.0
* Copyright 2020 ishitaka
*/
;
(function ($) {
$.fn.bookslider = function (options) {
var target = $(this);
var defaultOptions = {
animationSpeed: 400,
};
var options = $.extend({}, defaultOptions, options);
var slides = target.find('.slide');
var slideWidth = slides.outerWidth();
var bookmark = target.find('.bookmark');
var bookmarkUnit = slideWidth / slides.length;
var mouseIsMoving = false;
var mouseX, mouseY;
var mousePosition;
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
var slidePage = 1;
var slideBookmark = function () {
bookmarkLeft = bookmarkUnit * (slidePage - 1) + bookmarkUnit / 2;
bookmark.css('left', bookmarkLeft + 'px');
bookmark.text(slidePage + '/' + slides.length);
}
var slidePrev = function () {
if (1 < slidePage) {
slidePage--;
slides.eq(slidePage).show();
slides.eq(slidePage).animate({ left: 0 }, 0);
slides.eq(slidePage).animate({ left: slideWidth }, options.animationSpeed, "swing");
}
slideBookmark();
}
var slideNext = function () {
if (slides.length > slidePage) {
slidePage++;
slides.eq(slidePage - 1).show();
slides.eq(slidePage - 1).animate({ left: slideWidth }, 0);
slides.eq(slidePage - 1).animate({ left: 0 }, options.animationSpeed, "swing");
}
slideBookmark();
}
target.find('.slider-prev').click(function () {
slidePrev();
});
target.find('.slider-next').click(function () {
slideNext();
});
target.find('.slider-nav').on(mousewheelevent, function (e) {
e.preventDefault();
var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
if (delta < 0) {
slideNext();
} else {
slidePrev();
}
});
target.on('keydown', function (e) {
switch (e.which) {
case 39:
slideNext();
return false;
case 37:
slidePrev();
return false;
case 38:
slidePrev();
return false;
case 40:
slideNext();
return false;
}
});
$(window).on('mousedown', function (e) {
if (mouseIsMoving) return;
mouseIsMoving = true;
mouseX = e.screenX;
mouseY = e.screenY;
mousePosition = bookmark.position();
});
$(window).on('mousemove', function (e) {
if (mouseIsMoving == false) return;
var px = (mousePosition.left + e.screenX - mouseX);
var min = bookmarkUnit / 2;
var max = bookmarkUnit * slides.length - min;
if (min > px) px = min;
if (max < px) px = max;
var page = Math.round((px + bookmarkUnit / 2) / slideWidth * slides.length);
if (1 > page) page = 1;
if (slides.length < page) page = slides.length;
bookmark.css('left', px + 'px');
bookmark.text(page + '/' + slides.length);
});
target.on('mouseup', function (e) {
if (mouseIsMoving == false) return;
mouseIsMoving = false;
var px = (mousePosition.left + e.screenX - mouseX);
var page = Math.round((px + bookmarkUnit / 2) / slideWidth * slides.length);
if (1 > page) page = 1;
if (slides.length < page) page = slides.length;
if (slidePage != page) {
if (slidePage > page) {
var count = slidePage - page;
for (var i = 0; i < count; i++) {
slidePrev();
}
} else {
var count = page - slidePage;
for (var i = 0; i < count; i++) {
slideNext();
}
}
}
slideBookmark();
});
$(window).resize(function () {
slideWidth = slides.outerWidth();
bookmarkUnit = slideWidth / slides.length;
slideBookmark();
});
slideBookmark();
};
})(jQuery);bookslider.css
.bookslider {
position: relative;
margin: 0 auto;
font-size: 0;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.bookslider:focus {
outline: none;
}
.bookslider .slides {
position: relative;
overflow: hidden;
box-shadow:
-2px 0px #fff,
-3px 0px #999,
-5px 0px #fff,
-6px 0px #bbb,
-8px 0px #fff,
-9px 0px #ddd,
2px 0px #fff,
3px 0px #999,
5px 0px #fff,
6px 0px #bbb,
8px 0px #fff,
9px 0px #ddd;
}
.bookslider .slide {
width: 100%;
height: 100%;
}
.bookslider .slide:not(:first-child) {
position: absolute;
left: 0;
top: 0;
display: none;
}
.bookslider .slide img {
width: 100%;
height: auto;
}
.bookslider .slider-nav {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.bookslider .slider-prev {
left: 0;
right: 50%;
cursor: pointer;
}
.bookslider .slider-next {
left: 50%;
right: 0;
cursor: pointer;
}
.bookslider .bookmark-area {
position: relative;
width: 100%;
height: 40px;
}
.bookslider .bookmark-area .bookmark {
position: absolute;
top: 0;
left: 0;
margin: 10px 0 0 -30px;
width: 60px;
text-align: center;
color: #333;
font-size: 14px;
line-height: 22px;
cursor: pointer;
user-select: none;
}
.bookslider .bookmark-area .bookmark::before {
content: "";
position: absolute;
top: -11px;
left: 20px;
border-top: 10px solid #666;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}