スライダーは、複数枚の画像を次々と切り替えて表示する機能です。クロスフェードで切り替わるものや上下や左右にスライドして切り替わるものや回転など複雑な動きをするものなど様々な表示形式があります。スライドショーとかカルーセルとも呼ばれます。
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（bxslider）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="bxslider/jquery.bxslider.css" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px 10px 30px 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（bxslider）の設定 */
.bx-wrapper { /* スライダー領域の設定 */
max-width: 960px;
margin: 0 auto;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- スライダー（bxslider）の定義 -->
<div class="bx-wrapper">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<ul class="bxslider">
<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
</ul>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（bxslider）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="bxslider/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({ // スライダーの開始指示
auto: true, // 自動再生（false/true）（初期値：false）
slideWidth: 0, // スライド幅（初期値：0）
slideMargin: 0, // スライド間の隙間（初期値：0）
mode: 'horizontal', // 表示モード（'horizontal'/'vertical'/'fade'）（初期値：'horizontal'）
speed: 1000, // 切り替えスピード（初期値：500ms）
startSlide: 0, // 開始スライド番号（初期値：0）
randomStart: false, // ランダム表示（false/true）（初期値：false）
});
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（bxslider）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="bxslider/jquery.bxslider.css" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px 10px 30px 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（bxslider）の設定 */
.bx-wrapper { /* スライダー領域の設定 */
max-width: 960px;
margin: 0 auto;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- スライダー（bxslider）の定義 -->
<div class="bx-wrapper">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<ul class="bxslider">
<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
</ul>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（bxslider）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="bxslider/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({ // スライダーの開始指示
auto: true, // 自動再生（false/true）（初期値：false）
slideWidth: 0, // スライド幅（初期値：0）
slideMargin: 0, // スライド間の隙間（初期値：0）
mode: 'vertical', // 表示モード（'horizontal'/'vertical'/'fade'）（初期値：'horizontal'）
speed: 1000, // 切り替えスピード（初期値：500ms）
startSlide: 0, // 開始スライド番号（初期値：0）
randomStart: false, // ランダム表示（false/true）（初期値：false）
});
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（bxslider）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="bxslider/jquery.bxslider.css" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px 10px 30px 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（bxslider）の設定 */
.bx-wrapper { /* スライダー領域の設定 */
max-width: 960px;
margin: 0 auto;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- スライダー（bxslider）の定義 -->
<div class="bx-wrapper">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<ul class="bxslider">
<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
</ul>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（bxslider）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="bxslider/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({ // スライダーの開始指示
auto: true, // 自動再生（false/true）（初期値：false）
slideWidth: 0, // スライド幅（初期値：0）
slideMargin: 0, // スライド間の隙間（初期値：0）
mode: 'fade', // 表示モード（'horizontal'/'vertical'/'fade'）（初期値：'horizontal'）
speed: 1000, // 切り替えスピード（初期値：500ms）
startSlide: 0, // 開始スライド番号（初期値：0）
randomStart: false, // ランダム表示（false/true）（初期値：false）
});
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（slick）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px 40px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（slick）の設定 */
.slick-slider {
max-width: 900px;
margin: 0 auto;
}
.slider img{
height: auto;
width: 100%;
margin: 0 auto;
}
.slick-prev:before, .slick-next:before {
color: #000;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（slick）の定義 -->
<ul class="slider slick-slider">
<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
</ul>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$('.slider').slick({ // スライダー開始指示
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（slick）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（slick）の設定 */
.slider img{
height: auto;
width: 100%;
margin: 0 auto;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: 0.3s ease-in-out;
transform: scale(0.75);
}
.is--active {
transform: scale(1);
}
.slick-prev:before, .slick-next:before {
color: #000;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（slick）の定義 -->
<ul class="slider slick-slider">
<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
</ul>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$('.slider').slick({
autoplay: true,
dots: true,
arrows: false,
centerMode: true,
centerPadding: '25%',
});
$('.slider').on('beforeChange', function(){
$('.slick-current').removeClass('is--active');
});
$('.slick-current').addClass('is--active');
$('.slider').on('afterChange', function(){
$('.slick-current').addClass('is--active');
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（slick）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label,button {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/*
.container {
padding: 0px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（slick）の設定 */
.wrapper {
position: relative;
}
.slider {
position: relative;
z-index: 1;
height: 100vh;
}
/* 画像設定 */
.slider-item01 {
background: url(images/sample-1024x768-01.jpg);
}
.slider-item02 {
background: url(images/sample-1024x768-02.jpg);
}
.slider-item03 {
background: url(images/sample-1024x768-03.jpg);
}
.slider-item04 {
background: url(images/sample-1024x768-04.jpg);
}
.slider-item {
width: 100%;
height:100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* 矢印の設定 */
.slick-prev,
.slick-next {
position: absolute;
z-index: 3;
top: 42%;
cursor: pointer;
outline: none;
border-top: 3px solid #ccc;
border-right: 3px solid #ccc;
height: 25px;
width: 25px;
}
.slick-prev {
left:2.5%;
transform: rotate(-135deg);
}
.slick-next {
right:2.5%;
transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
position: relative;
z-index: 3;
text-align:center;
margin:-50px 0 0 0;
}
.slick-dots li {
display: inline-block;
margin:0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width: 8px;
height: 8px;
display: block;
border-radius: 50%;
background: #ccc;
}
.slick-dots .slick-active button{
background:#333;
}
.main {
background: #dbffff;
}
.main p {
padding: 300px 0;
text-align: center;
color: #333;
}
p.message {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 6vw;
color: #fff;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（slick）の定義 -->
<div class="wrapper">
<p class="message">スライドショー</p>
<ul class="slider">
<li class="slider-item slider-item01"></li>
<li class="slider-item slider-item02"></li>
<li class="slider-item slider-item03"></li>
<li class="slider-item slider-item04"></li>
</ul>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
<div class="main">
<p>スクロールしたら見える部分</p>
</div>
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）の制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="slick/slick.min.js"></script>
<script>
$('.slider').slick({
autoplay: true, // 自動的に動き出す
autoplaySpeed: 3000, // 切り替わる待ち時間
speed:1000, // スライドのスピード
infinite: true, // 繰り返し有り
slidesToShow: 1, // 画面に見せるスライド数
slidesToScroll: 1, // 1回のスクロールで移動する枚数
arrows: true, // 左右の矢印あり
prevArrow: '<div class="slick-prev"></div>', // 矢印部分PreviewのHTMLを変更
nextArrow: '<div class="slick-next"></div>', // 矢印部分NextのHTMLを変更
dots: true, // 下部ドットナビゲーション表示有り
pauseOnFocus: false, // フォーカスで一時停止を無効
pauseOnHover: false, // /マウスホバーで一時停止を無効
pauseOnDotsHover: false, // ドットナビゲーションのマウスホバーで一時停止を無効
});
// スマホ用：スライダーをタッチしても止めずにスライドをさせたい場合
$('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){
$('.slider').slick('slickPlay');
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（slick）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label,button {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 0px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（slick）の設定 */
.wrapper {
max-width: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.slider {
overflow: visible;
max-width: 70%;
margin: 0 auto;
}
.slider .slick-list {
overflow: visible;
}
.slick-slide {
margin: 0 5px;
}
.slick-slide img {
width: 100%;
height: auto;
}
.slick-prev,
.slick-next {
z-index: 1;
}
.slick-prev:before,
.slick-next:before {
color: #000;
}
.slick-slide {
transition: all ease-in-out 0.3s;
opacity: 0.4;
}
.slick-active {
opacity: 1;
}
.slick-current {
opacity: 1;
}
/* 矢印の設定 */
.slick-prev,
.slick-next {
position: absolute;
z-index: 3;
top: 42%;
cursor: pointer;
outline: none;
border-top: 3px solid #888;
border-right: 3px solid #888;
height: 1.5vw;
width: 1.5vw;
}
.slick-prev {
left: 0%;
transform: rotate(-135deg);
}
.slick-next {
right: 0%;
transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
position: relative;
z-index: 3;
text-align: center;
margin: 15px 0 0 0;
}
.slick-dots li {
display: inline-block;
margin: 0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width: 0.6vw;
height: 0.6vw;
display: block;
border-radius: 50%;
background: #ccc;
}
.slick-dots .slick-active button{
background: #333;
}
.main {
background: #dbffff;
}
.main p {
padding: 300px 0;
text-align: center;
color: #333;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（slick）の定義 -->
<div class="wrapper">
<div class="slider">
<div><img src="images/sample-1024x768-01.jpg" alt="sample01"></div>
<div><img src="images/sample-1024x768-02.jpg" alt="sample02"></div>
<div><img src="images/sample-1024x768-03.jpg" alt="sample03"></div>
<div><img src="images/sample-1024x768-04.jpg" alt="sample04"></div>
</div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
<div class="main">
<p>メインコンテンツ</p>
</div>
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）の制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="slick/slick.min.js"></script>
<script>
$(".slider").slick({
autoplay: true, // 自動再生
autoplaySpeed: 3000, // 自動再生のスピード（ミリ秒単位）
speed: 1000, // スライド/フェードアニメーション速度
centerMode: true, // スライドを中心に表示して部分的に前後のスライドが見えるように設定
centerPadding: '5%', // センターモード時のサイドパディング
dots: true, // ドットインジケーターの表示
infinite: true, // 繰り返しあり
prevArrow: '<div class="slick-prev"></div>', // Prev用矢印のHTML
nextArrow: '<div class="slick-next"></div>', // Next用矢印のHTML
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（swiper）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（swiper）の設定 */
:root {
--swiper-navigation-color: #ffffff;
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-inactive-color: #bbbbbb;
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
}
.swiper {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.swiper .swiper-wrapper {
width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
width: 100%;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（swiper）の定義 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
loop: true, // ループ（true/false）
effect: 'slide', // 形状（slide/fade/cube/coverflow/flip/creative/carsd）
// fadeを指定した場合は「crossFade: true」を指定
initialSlide: 0, // 開始スライド（0が1番目）
direction: 'horizontal', // 方向（horizontal/vertical）
// verticalを指定しら場合はコンテナにheight/max-heightを指定
speed: 1000, // スライドスピード（ミリ秒）
autoHeight: false, // スライドに合わせて高さを自動調整（false/true）
spaceBetween: 0, // スライド間の余白（px）
slidesPerView: 1, // 一度に表示するスライド数（数値/auto）
// autoと「loop: true」を指定する場合は「loopedSlides」を指定
slidesPerGroup: 1, // 同時にスライドさせる数
slideToClickedSlide: false, // サムネールをクリック時にスライド移行（false/true）
centeredSlides: false, // アクティブスライドを中央に表示（false/true）
loopedSlides: null, // 前後に複製するスライド数
autoplay: { // 自動再生
delay: 2000, // 自動再生時間（ミリ秒）
disableOnInteraction: false // 操作したら自動再生を停止
},
pagination: { // ページネーション
el: '.swiper-pagination',
clickable: true,
},
navigation: { // ナビゲーション
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（swiper）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（swiper）の設定 */
:root {
--swiper-navigation-color: #ffffff;
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-inactive-color: #bbbbbb;
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
}
.swiper {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.swiper .swiper-wrapper {
width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
width: 100%;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（swiper）の定義 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
loop: true, // ループ（true/false）
effect: 'cube', // 形状（slide/fade/cube/coverflow/flip/creative/carsd）
// fadeを指定した場合は「crossFade: true」を指定
initialSlide: 0, // 開始スライド（0が1番目）
direction: 'horizontal', // 方向（horizontal/vertical）
// verticalを指定しら場合はコンテナにheight/max-heightを指定
speed: 2000, // スライドスピード（ミリ秒）
autoHeight: false, // スライドに合わせて高さを自動調整（false/true）
spaceBetween: 0, // スライド間の余白（px）
slidesPerView: 1, // 一度に表示するスライド数（数値/auto）
// autoと「loop: true」を指定する場合は「loopedSlides」を指定
slidesPerGroup: 1, // 同時にスライドさせる数
slideToClickedSlide: false, // サムネールをクリック時にスライド移行（false/true）
centeredSlides: false, // アクティブスライドを中央に表示（false/true）
loopedSlides: null, // 前後に複製するスライド数
autoplay: { // 自動再生
delay: 2000, // 自動再生時間（ミリ秒）
disableOnInteraction: false // 操作したら自動再生を停止
},
pagination: { // ページネーション
el: '.swiper-pagination',
clickable: true,
},
navigation: { // ナビゲーション
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（swiper）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（swiper）の設定 */
:root {
--swiper-navigation-color: #ffffff;
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-inactive-color: #bbbbbb;
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
}
.swiper {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.swiper .swiper-wrapper {
width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
width: 100%;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（swiper）の定義 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
loop: true, // ループ（true/false）
effect: 'coverflow', // 形状（slide/fade/cube/coverflow/flip/creative/carsd）
// fadeを指定した場合は「crossFade: true」を指定
initialSlide: 0, // 開始スライド（0が1番目）
direction: 'horizontal', // 方向（horizontal/vertical）
// verticalを指定しら場合はコンテナにheight/max-heightを指定
speed: 2000, // スライドスピード（ミリ秒）
autoHeight: false, // スライドに合わせて高さを自動調整（false/true）
spaceBetween: 0, // スライド間の余白（px）
slidesPerView: 2, // 一度に表示するスライド数（数値/auto）
// autoと「loop: true」を指定する場合は「loopedSlides」を指定
slidesPerGroup: 1, // 同時にスライドさせる数
slideToClickedSlide: false, // サムネールをクリック時にスライド移行（false/true）
centeredSlides: true, // アクティブスライドを中央に表示（false/true）
loopedSlides: null, // 前後に複製するスライド数
autoplay: { // 自動再生
delay: 2000, // 自動再生時間（ミリ秒）
disableOnInteraction: false // 操作したら自動再生を停止
},
pagination: { // ページネーション
el: '.swiper-pagination',
clickable: true,
},
navigation: { // ナビゲーション
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（swiper）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（swiper）の設定 */
:root {
--swiper-navigation-color: #ffffff;
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-inactive-color: #bbbbbb;
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
}
.swiper {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.swiper .swiper-wrapper {
width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
width: 100%;
}
/* サムネイルの設定 */
.thumbs-slider .swiper-slide {
opacity: 0.7;
}
.thumbs-slider .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #fff;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（swiper）の定義 -->
<div class="swiper main-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper thumbs-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
</div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（slick）制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
/* サムネールの制御 */
var mySwiperThumbs = new Swiper ('.thumbs-slider', {
loop: true, // ループ（true/false）
effect: 'slider', // 形状（slide/fade/cube/coverflow/flip/creative/carsd）
// fadeを指定した場合は「crossFade: true」を指定
initialSlide: 0, // 開始スライド（0が1番目）
direction: 'horizontal', // 方向（horizontal/vertical）
// verticalを指定しら場合はコンテナにheight/max-heightを指定
speed: 2000, // スライドスピード（ミリ秒）
autoHeight: false, // スライドに合わせて高さを自動調整（false/true）
spaceBetween: 10, // スライド間の余白（px）
slidesPerView: 4, // 一度に表示するスライド数（数値/auto）
// autoと「loop: true」を指定する場合は「loopedSlides」を指定
slidesPerGroup: 1, // 同時にスライドさせる数
slideToClickedSlide: false, // サムネールをクリック時にスライド移行（false/true）
centeredSlides: true, // アクティブスライドを中央に表示（false/true）
loopedSlides: null, // 前後に複製するスライド数
watchSlidesProgress: true, // スライドの進行状況を表示（false/true）
autoplay: { // 自動再生
delay: 2000, // 自動再生時間（ミリ秒）
disableOnInteraction: false // 操作したら自動再生を停止
},
pagination: { // ページネーション
el: '.swiper-pagination',
clickable: true,
},
navigation: { // ナビゲーション
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
/* メインスライダーの制御 */
let mySwiperMain = new Swiper ('.main-slider', {
loop: true, // ループ（true/false）
effect: 'slider', // 形状（slide/fade/cube/coverflow/flip/creative/carsd）
// fadeを指定した場合は「crossFade: true」を指定
initialSlide: 0, // 開始スライド（0が1番目）
speed: 2000, // スライドスピード（ミリ秒）
autoplay: { // 自動再生
delay: 2000, // 自動再生時間（ミリ秒）
disableOnInteraction: false // 操作したら自動再生を停止
},
pagination: { // ページネーション
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: mySwiperThumbs
},
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（jQuery）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
img {
width: 100%;
vertical-align: middle;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（jQuery）の設定 */
#slide {
width: 100%;
margin: 0 auto;
list-style-type: none;
}
#slide ul {
position: relative;
width: 100%;
list-style-type: none;
}
#slide ul li {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#slide ul li img {
width: 100%;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- スライダー（jQuery）の定義 -->
<div id="slide">
<ul>
<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
</ul>
</div>
<!-- body枠を確保するためにダミーで記述 -->
<div><img src="images/sample-01.jpg" alt="サンプル01"></div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（jQuery）制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function() {
var interval = 5000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$("#slide ul li").css({"position":"relative"});
$("#slide ul li").hide().css({"position":"absolute", "top":0, "left":0});
$("#slide ul li:first").addClass("active").show();
setInterval(function() {
var active = $("#slide ul li.active");
var next = active.next("li").length ? active.next("li") : $("#slide ul li:first");
active.fadeOut(fade_speed).removeClass("active");
next.fadeIn(fade_speed).addClass("active");
},interval);
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（jQuery）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スライダー（jQuery）の設定 */
.slider {
max-width: 760px;
margin: 0 auto;
padding: 5px 10px 10px 10px;
border: 1px #ccc solid;
}
.slider .slider-title {
font-size: 1.5rem;
text-align: center;
}
.slider .slider-photo {
padding-bottom: 20px;
}
.slider .slider-photo img {
width: 100%;
vertical-align: top;
}
.slider .slider-select {
display: flex;
align-items: center;
text-align: center;
}
.slider .slider-select .slider-left,
.slider .slider-select .slider-right {
width: 30px;
font-size: 30px;
}
.slider .slider-select .slider-left:hover,
.slider .slider-select .slider-right:hover {
opacity: 0.6;
cursor: pointer;
}
.slider .slider-select .slider-list-wrapper {
width: calc(100% - 60px);
overflow: hidden;
}
.slider .slider-select .slider-list-wrapper .slider-list {
width: calc(100% + 100% / 3 * 2);
display: flex;
position: relative;
top: 0;
left: -33.33%;
list-style: none;
}
.slider .slider-select .slider-list-wrapper .slider-list.slider-move-right {
animation: slider-right-key 0.3s linear;
}
@keyframes slider-right-key {
0% {
left: 0%;
}
100% {
left: -33.33%;
}
}
.slider .slider-select .slider-list-wrapper .slider-list.slider-move-left {
animation: slider-left-key 0.3s linear;
}
@keyframes slider-left-key {
0% {
left: -66.67%;
}
100% {
left: -33.33%;
}
}
.slider .slider-select .slider-list-wrapper .slider-list li {
width: calc(100% / 3);
padding: 0 10px;
}
.slider .slider-select .slider-list-wrapper .slider-list li img {
width: 100%;
vertical-align: top;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから） ▼▼▼（※3） -->
<!-- スライダー（jQuery）の定義 -->
<div class="slider" data-no="0">
<div class="slider-title">写真01</div>
<div class="slider-photo"><img src="images/sample-1024x768-01.jpg" alt="写真"></div>
<div class="slider-select">
<div class="slider-left">＜</div>
<div class="slider-list-wrapper">
<ul class="slider-list">
<li><img src="images/sample-1024x768-06.jpg" alt="写真"></li>
<li><img src="images/sample-1024x768-01.jpg" alt="写真"></li>
<li><img src="images/sample-1024x768-02.jpg" alt="写真"></li>
<li><img src="images/sample-1024x768-03.jpg" alt="写真"></li>
<li><img src="images/sample-1024x768-04.jpg" alt="写真"></li>
</ul>
</div>
<div class="slider-right">＞</div>
</div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スライダー（jQuery）の制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 写真リスト
const photo_list = [
[
'写真01',
'images/sample-1024x768-01.jpg',
],
[
'写真02',
'images/sample-1024x768-02.jpg',
],
[
'写真03',
'images/sample-1024x768-03.jpg',
],
[
'写真04',
'images/sample-1024x768-04.jpg',
],
[
'写真05',
'images/sample-1024x768-05.jpg',
],
[
'写真06',
'images/sample-1024x768-06.jpg',
],
];
$('.slider').each(function() { // 初期化
let parent = this;
let data_no = Number($(parent).attr('data-no'));
setPhoto(parent, data_no);
});
$('.slider-right').on('click', function() { // 写真情報移動（前）
let parent = $(this).parent().parent();
let data_no = Number($(parent).attr('data-no'));
data_no = addPhotoNo(data_no);
$(parent).children('.slider-select').children('.slider-list-wrapper').children('.slider-list').removeClass('slider-move-right');
$(parent).children('.slider-select').children('.slider-list-wrapper').children('.slider-list').removeClass('slider-move-left');
setPhoto(parent, data_no);
$(parent).children('.slider-select').children('.slider-list-wrapper').children('.slider-list').addClass('slider-move-right');
});
$('.slider-left').on('click', function() { // 写真情報移動（後）
let parent = $(this).parent().parent();
let data_no = Number($(parent).attr('data-no'));
data_no = subPhotoNo(data_no);
$(parent).children('.slider-select').children('.slider-list-wrapper').children('.slider-list').removeClass('slider-move-right');
$(parent).children('.slider-select').children('.slider-list-wrapper').children('.slider-list').removeClass('slider-move-left');
setPhoto(parent, data_no);
$(parent).children('.slider-select').children('.slider-list-wrapper').children('.slider-list').addClass('slider-move-left');
});
function setPhoto(parent, data_no) { // 写真情報設定
let data_no_cur;
$(parent).children('.slider-title').text(photo_list[data_no][0]);
$(parent).children('.slider-photo').children('img').hide();
$(parent).children('.slider-photo').children('img').attr('src', photo_list[data_no][1]);
data_no_cur = subPhotoNo(data_no);
for (let i = 1; i < 6; i++) {
$(parent).children('.slider-select').children('.slider-list-wrapper').children('.slider-list').children('li:nth-child(' + i + ')').children('img').attr('src', photo_list[data_no_cur][1]);
data_no_cur = addPhotoNo(data_no_cur);
}
$(parent).children('.slider-photo').children('img').fadeIn();
$(parent).attr('data-no', data_no);
}
function addPhotoNo(photo_no) { // 写真カウント + 1
let photo_count = photo_list.length;
photo_no++;
if (photo_no >= photo_count) {
photo_no = 0;
}
return(photo_no);
}
function subPhotoNo(photo_no) { // 写真カウント - 1
let photo_count = photo_list.length;
photo_no--;
if (photo_no < 0) {
photo_no = photo_count - 1;
}
return(photo_no);
}
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー（CSS）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* ▼▼▼ CSS（ここから／使用するCSSを選択してコピーしてください）（※2） ▼▼▼ */
/* スライダー（CSS）の設定 */
p {
font-size: 1.4rem;
}
.slider {
width: 100%;
overflow: hidden;
}
ul.photo-list {
width: 200%;
display: flex;
list-style: none;
position: relative;
top: 0;
}
@media screen and (max-width: 760px) {
ul.photo-list {
width: 400%;
}
}
ul.photo-list:hover {
animation-play-state: paused;
}
ul.photo-list li {
width: calc(100% / 12);
padding: 0 5px;
}
ul.photo-list li img {
width: 100%;
}
/* 連続して流れる */
.smooth {
animation: smooth-key1 10s linear infinite;
}
@media screen and (max-width: 760px) {
.smooth {
animation: smooth-key2 10s linear infinite;
}
}
@keyframes smooth-key1 {
0% {
left: 0%;
}
100% {
left: -100%;
}
}
@keyframes smooth-key2 {
0% {
left: 0%;
}
100% {
left: -200%;
}
}
/* 写真単位で流れる */
.step {
animation: step-key1 10s linear infinite;
}
@media screen and (max-width: 760px) {
.step {
animation: step-key2 10s linear infinite;
}
}
@keyframes step-key1 {
0% {
left: 0%;
}
12.7% {
left: -16.7%;
}
16.7% {
left: -16.7%;
}
29.3% {
left: -33.3%;
}
33.3% {
left: -33.3%;
}
46.0% {
left: -50.0%;
}
50.0% {
left: -50.0%;
}
62.7% {
left: -66.7%;
}
66.7% {
left: -66.7%;
}
79.3% {
left: -83.3%;
}
83.3% {
left: -83.3%;
}
96.0% {
left: -100.0%;
}
100.0% {
left: -100.0%;
}
}
@keyframes step-key2 {
0% {
left: 0%;
}
12.7% {
left: -33.4%;
}
16.7% {
left: -33.4%;
}
29.3% {
left: -66.6%;
}
33.3% {
left: -66.6%;
}
46.0% {
left: -100.0%;
}
50.0% {
left: -100.0%;
}
62.7% {
left: -133.4%;
}
66.7% {
left: -133.4%;
}
79.3% {
left: -166.6%;
}
83.3% {
left: -166.6%;
}
96.0% {
left: -200.0%;
}
100.0% {
left: -200.0%;
}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから／使用するHTMLを選択してコピーしてください）（※3） ▼▼▼ -->
<!-- ▼▼▼ HTML（ここから） ▼▼▼（※3） -->
<!-- スライダー（CSS）の定義 -->
<div class="wrapper">
<p>連続して流れる</p>
<div class="slider">
<ul class="photo-list smooth">
<li><a href="#"><img src="images/sample-256x128-01.jpg" alt="サンプル01"></a></li>
<li><a href="#"><img src="images/sample-256x128-02.jpg" alt="サンプル02"></a></li>
<li><a href="#"><img src="images/sample-256x128-03.jpg" alt="サンプル03"></a></li>
<li><a href="#"><img src="images/sample-256x128-04.jpg" alt="サンプル04"></a></li>
<li><a href="#"><img src="images/sample-256x128-05.jpg" alt="サンプル05"></a></li>
<li><a href="#"><img src="images/sample-256x128-06.jpg" alt="サンプル06"></a></li>
<li><a href="#"><img src="images/sample-256x128-01.jpg" alt="サンプル01"></a></li>
<li><a href="#"><img src="images/sample-256x128-02.jpg" alt="サンプル02"></a></li>
<li><a href="#"><img src="images/sample-256x128-03.jpg" alt="サンプル03"></a></li>
<li><a href="#"><img src="images/sample-256x128-04.jpg" alt="サンプル04"></a></li>
<li><a href="#"><img src="images/sample-256x128-05.jpg" alt="サンプル05"></a></li>
<li><a href="#"><img src="images/sample-256x128-06.jpg" alt="サンプル06"></a></li>
</ul>
</div>
<p>写真単位で流れる</p>
<div class="slider">
<ul class="photo-list step">
<li><a href="#"><img src="images/sample-256x128-01.jpg" alt="サンプル01"></a></li>
<li><a href="#"><img src="images/sample-256x128-02.jpg" alt="サンプル02"></a></li>
<li><a href="#"><img src="images/sample-256x128-03.jpg" alt="サンプル03"></a></li>
<li><a href="#"><img src="images/sample-256x128-04.jpg" alt="サンプル04"></a></li>
<li><a href="#"><img src="images/sample-256x128-05.jpg" alt="サンプル05"></a></li>
<li><a href="#"><img src="images/sample-256x128-06.jpg" alt="サンプル06"></a></li>
<li><a href="#"><img src="images/sample-256x128-01.jpg" alt="サンプル01"></a></li>
<li><a href="#"><img src="images/sample-256x128-02.jpg" alt="サンプル02"></a></li>
<li><a href="#"><img src="images/sample-256x128-03.jpg" alt="サンプル03"></a></li>
<li><a href="#"><img src="images/sample-256x128-04.jpg" alt="サンプル04"></a></li>
<li><a href="#"><img src="images/sample-256x128-05.jpg" alt="サンプル05"></a></li>
<li><a href="#"><img src="images/sample-256x128-06.jpg" alt="サンプル06"></a></li>
</ul>
</div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
</body>
</html>
