slick.jsを使ってスライダーをつくってみる
designchips
DesignChips
JavaScriptでフェードするスライドショーをつくってみる
designchips
今回は画像のスライドショーを、jQueryを利用して表現する方法をご紹介します。シンプルに画像のみ自動で切り替わる仕様だけであればCSSとJavaScriptで表現できますので試してみてください。
JavaScriptでフェードするスライドショーをつくる
まずは基本となるHTMLを確認していきましょう。
HTML
サンプルコードとして以下のようなコードをご用意しました。
<section>
<ul class="slider">
<li><img src="images/slide_01.jpg"></li>
<li><img src="images/slide_02.jpg"></li>
<li><img src="images/slide_03.jpg"></li>
<li><img src="images/slide_04.jpg"></li>
<li><img src="images/slide_05.jpg"></li>
</ul>
</section>liタグで画像を5枚並べています。
CSS
スライドする画像をliタグ、スライド全体を囲うulタグに以下のようにCSSを記述します。
.slider{
width: 900px;
height: 600px;
position: relative;
overflow: hidden;
}
.slider>li{
position: absolute;
top: 0;
opacity: 0;
}ulタグに「.slider」を割り当て、画像を表示するサイズを指定しています。liタグで並べた複数の画像は、position: absolute;で重ねて並べ「opacity:0」で透明にしています。
JavaScript
HTML内のそのままJavaScriptを書き込むか、外部から読み込むかはお好きな方法をお選びください。サンプルはHTML内にJavaScriptを直接記載しています。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
(function($) {
var fadeInOut = function ($element) {
var $children = $element.children(),
current = 0,
time = 3000,
speed = '3s';
$children.css({ transition: speed })
.eq(current).css({ opacity: '1' });
setInterval(function () {
$children.eq(current).css({ opacity: '0' });
current = current === $children.length - 1 ? 0 : current += 1;
$children.eq(current).css({ opacity: '1' });
}, time);
};
fadeInOut($('.slider'));
})(jQuery);
</script>先ほど、スライドショーにしたいulタグに割り当てた「.slider」を20行目の部分で指定しています。また、1枚の画像の表示時間を7行面の「time: 3000」とし3秒間表示、画像ごとの切り替えスピードを8行目の「speed: 3s」で切替はじめから切替終わりまでに3秒かかるように指定。
同じページ内に複数のスライドショーをつくる場合は、少しJavaScript部分を書き換えればOKです！
同じページ内に複数のスライドショーをつくりたい場合
基本となるHTMLは以下のようにしておきます。
HTML
<section>
<h2>SLIDE01</h2>
<ul class="slider_a">
<li><img src="images/slide_01.jpg"></li>
<li><img src="images/slide_02.jpg"></li>
<li><img src="images/slide_03.jpg"></li>
<li><img src="images/slide_04.jpg"></li>
<li><img src="images/slide_05.jpg"></li>
</ul>
</section>
<section>
<h2>SLIDE02</h2>
<ul class="slider_b">
<li><img src="images/slide_06.jpg"></li>
<li><img src="images/slide_07.jpg"></li>
<li><img src="images/slide_08.jpg"></li>
<li><img src="images/slide_09.jpg"></li>
<li><img src="images/slide_10.jpg"></li>
</ul>
</section>sectionを２つ作っていますが、同じsectionに入れても問題ありません。
その中に先程と同じように２つのスライドを作りたいので、ulタグの中に、スライドさせたい画像をliタグで並べています。そしてそれぞれに、別のクラス名を割り当てています。「.slider_a」と「.slider_b」とここではしておきます。
CSS
.slider_a,.slider_b{
width: 900px;
height: 600px;
position: relative;
overflow: hidden;
}
.slider_a>li,.slider_b>li{
position: absolute;
top: 0;
opacity: 0;
}JavaScript
21行目と22行目のところを見てもらうとわかりますが、「fadeInOut」を適用したい部分を２つ「.slider_a」と「.slider_b」記載しています。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
(function($) {
var fadeInOut = function ($element) {
var $children = $element.children(),
current = 0,
time = 3000,
speed = '3s';
$children.css({ transition: speed })
.eq(current).css({ opacity: '1' });
setInterval(function () {
$children.eq(current).css({ opacity: '0' });
current = current === $children.length - 1 ? 0 : current += 1;
$children.eq(current).css({ opacity: '1' });
}, time);
};
fadeInOut($('.slider_a')),
fadeInOut($('.slider_b'));
})(jQuery);
</script>これで、同じページ内に２つのスライドショーを配置することができます。
画像のサイズや場所、切り替えるスピードなどはJavaScriptやCSSを書き換えれば可能ですので、ご自身のサイトに合わせて調整してご利用ください。