CSSとjQuerを使った二列の背景スライダー

CSSとjQuerを使った二列の背景スライダー

最近スライダーを作る機会があったのですが、配布されているものでは望んだものを作成することができなかった。

自力で望んだスライダーの作成を試みた

今回作成するにあたってCSSとjQueryの両方を使用しました。役割を簡単にまとめると、アニメーションと特定のクラスをスライドといった動きはCSS、必要なクラスの付与及び削除といった管理をjQuery、というようになっています。

スライダーの仕様について

スライダーの仕様については、5秒ごとにactive、prev、nextを要素に付与と削除の処理を行います。

一回の処理ごとに以下のことを行います。

  • nextがついていた要素からnextを削除し、activwを追加
  • activeがついてた要素からactiveを削除し、prevを追加
  • prevがついてた要素からprevを削除
  • nextがついてた要素の次の要素にnextを追加
  • active、prev、next全てに対して、同じ階層にある最後の要素にクラス名が付いたら次の処理では最初の要素に付くようにしている。

activeになれば要素が画面上に左にスライドする形で表示されるようになっているため、このようなjQueryを作成し、常に画像が切り替わるようにしました。

なお、PCとスマホで少しスライダーの動きも異なっています。PCの際には2列1段になり、2つ共右から左へと移動するような動きになっています。スマホの際には1列2段になり、上のある要素は右から左へ、下の要素は左から右へスライドするようになっています。。

また、全て1列にしたい、高さ等を変えたい、スライドの方向を変えたい等がある場合は別途CSSで調整する必要があります。

以下がソースとなっています。

HTML

<div class="slider_wrapper">
<div class="slider_inner left">
<ul class="slide_left_box">
<li class="slide_left one active"> </li>
<li class="slide_left two next"> </li>
<li class="slide_left three"> </li>
<li class="slide_left four"> </li>
<li class="slide_left five prev"> </li>
</ul>
</div>
<div class="slider_inner right">
<ul class="slide_right_box">
<li class="slide_right one active"> </li>
<li class="slide_right two next"> </li>
<li class="slide_right three"> </li>
<li class="slide_right four"> </li>
<li class="slide_right five prev"> </li>
</ul>
</div>
</div>

 

CSS

.slider_wrapper{
display: flex;
width: 100%;
height: 100vh;
margin-top: -143px;
position: relative;
overflow: hidden;
}
.slider_inner.left {
width: 57.61347vw;
height: 100%;
overflow: hidden;
position: relative;
}
.slide_left_box {
position: relative;
overflow: hidden;
height: 100%;
}
.slide_left_box .slide_left {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
transition: all 0.75s;
transition-timing-function: ease-out;
transform-style: preserve-3d;
z-index: 1;
overflow: hidden;
}
.slide_left_box .slide_left:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
}
.slide_left_box .slide_left.one:before {
background-image: url("左側の最初のスライダーの画像");
}
.slide_left_box .slide_left.two:before {
background-image: url("左側の2つ目のスライダーの画像");
}
.slide_left_box .slide_left.three:before {
background-image: url("左側の3つ目のスライダーの画像");
}
.slide_left_box .slide_left.four:before {
background-image: url("左側の4つ目のスライダーの画像");
}
.slide_left_box .slide_left.five:before {
background-image: url("左側の最後のスライダーの画像");
}
.slide_left_box .slide_left.prev {
width: 100%;
z-index: -1;
}
.slide_left_box .slide_left.active {
width: 100%;
z-index: 2;
}
.slide_left_box .slide_left.next {
z-index: 2;
}
.slider_inner.right {
width: 42.38653vw;
height: 100%;
overflow: hidden;
position: relative;
}
.slide_right_box {
position: relative;
overflow: hidden;
height: 86.77494%;
}
.slide_right_box .slide_right {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
transition: all 0.75s;
transition-timing-function: ease-out;
transform-style: preserve-3d;
z-index: 1;
overflow: hidden;
}
.slide_right_box .slide_right:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
}
.slide_right_box .slide_right.one:before {
background-image: url("右側の最初のスライダーの画像");
}
.slide_right_box .slide_right.two:before {
background-image: url("2つ目の最初のスライダーの画像");
}
.slide_right_box .slide_right.three:before {
background-image: url("2つ目の最初のスライダーの画像");
}
.slide_right_box .slide_right.four:before {
background-image: url("2つ目の最初のスライダーの画像");
}
.slide_right_box .slide_right.five:before {
background-image: url("右側の最初のスライダーの画像");
}
.slide_right_box .slide_right.prev {
width: 100%;
z-index: -1;
}
.slide_right_box .slide_right.active {
width: 100%;
z-index: 2;
}
.slide_right_box .slide_right.next {
z-index: 2;
}
@media (max-width: 767px) {
.slider_wrapper {
margin-top: -56px;
flex-direction: column;
position: relative;
}
.slider_inner.left {
width: 100vw;
height: auto;
}
.slide_left_box {
height: 0;
padding-top: 112%;
}
.slider_inner.right {
width: 100vw;
height: auto;
}
.slide_right {
left: 0;
right: auto;
}
.slide_right_box {
height: 0;
padding-top: 58.93333%;
}
}

jQuery

//左側用
//is_archiveがついている要素が何番目か探索
var left_active = $('.slide_left_box .slide_left.active').index();
//nextがついている要素が何番目か探索
var left_next = $('.slide_left_box .slide_left.next').index();
//prevがついている要素が何番目か探索
var left_prev = $('.slide_left_box .slide_left.prev').index();
//nextがついている要素の次の要素が何番目か探索
var left_nextadd = $('.slide_left_box .slide_left.next').index() + 1;
var left_length = $('.slide_left_box .slide_left').length - 1;

//右側用
//is_archiveがついている要素が何番目か探索
var right_active = $('.slide_right_box .slide_right.active').index();
//nextがついている要素が何番目か探索
var right_next = $('.slide_right_box .slide_right.next').index();
//prevがついている要素が何番目か探索
var right_prev = $('.slide_right_box .slide_right.prev').index();
//nextがついている要素の次の要素が何番目か探索
var right_nextadd = $('.slide_right_box .slide_right.next').index() + 1;
//スライダーの要素の数を検索
var right_length = $('.slide_right_box .slide_right').length - 1;
setInterval(function () {
//activeがある要素からprevを付ける
$('.slide_left_box .slide_left').eq(left_active).removeClass('active').addClass("prev");
//nextがある要素からactiveを付ける
$('.slide_left_box .slide_left').eq(left_next).removeClass('next').addClass("active");
//prevがある要素からprevを外す
$('.slide_left_box .slide_left').eq(left_prev).removeClass('prev');
//nextの次の要素にnextを付ける
$('.slide_left_box .slide_left').eq(left_nextadd).addClass("next");
//要素の数と同じ数になったら数値をリセット
if (left_length <= left_active) {

left_active = 0;
} else {
left_active = left_active + 1;
}
if (left_length <= left_next) {
left_next = 0;
} else {
left_next = left_next + 1;
}
if (left_length <= left_prev) {
left_prev = 0;
} else {
left_prev = left_prev + 1;
}
if (left_length <= left_nextadd) {
left_nextadd = 0;
} else {
left_nextadd = left_nextadd + 1;
}
//activeがある要素からprevを付ける
$('.slide_right_box .slide_right').eq(right_active).removeClass('active').addClass("prev");
//nextがある要素からactiveを付ける
$('.slide_right_box .slide_right').eq(right_next).removeClass('next').addClass("active");
//prevがある要素からprevを外す
$('.slide_right_box .slide_right').eq(right_prev).removeClass('prev');
//nextの次の要素にnextを付ける
$('.slide_right_box .slide_right').eq(right_nextadd).addClass("next");
//要素の数と同じ数になったら数値をリセット
if (right_length <= right_active) {
right_active = 0;
} else {
right_active = right_active + 1;
}
if (right_length <= right_next) {
right_next = 0;
} else {
right_next = right_next + 1;
}
if (right_length <= right_prev) {
right_prev = 0;
} else {
right_prev = right_prev + 1;
}
if (right_length <= right_nextadd) {
right_nextadd = 0;
} else {
right_nextadd = right_nextadd + 1;
}
}, 5000);

関連タグ

ブログ