スライダーとは？

スライダーは、ウェブページ上で画像やコンテンツを自動的または手動で切り替えることができるインタラクティブな要素です。スライダーは、写真ギャラリーや製品の紹介、プロモーションバナーなど、さまざまな用途で利用されます。

スライダーの利点
視覚的な魅力: ユーザーの興味を引き、ページに動きを与えます。
コンテンツの整理: 多くの情報をコンパクトに表示できます。
ユーザーエンゲージメント: ユーザーがインタラクティブに操作できるため、エンゲージメントを高めます。

スライダーのサンプルコード
以下に、シンプルなスライダーのサンプルコードを示します。このコードを使って、自社のウェブサイトにスライダーを追加することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スライダーサンプル</title>
<style>
.slider {
position: relative;
width: 80%;
max-width: 600px;
margin: auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
.navigation {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.prev, .next {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
}
</style>
</head>
<body>

<h2>スライダーのデモ</h2>

<div class="slider">
<div class="slides">
<div class="slide"><img src="image1.jpg" alt="Image 1"></div>
<div class="slide"><img src="image2.jpg" alt="Image 2"></div>
<div class="slide"><img src="image3.jpg" alt="Image 3"></div>
</div>
<div class="navigation">
<button class="prev">«</button>
<button class="next">»</button>
</div>
</div>

<script>
let index = 0;
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

function showSlide(i) {
index += i;
if (index < 0) index = slide.length - 1;
if (index >= slide.length) index = 0;
slides.style.transform = 'translateX(' + (-index * 100) + '%)';
}

prev.addEventListener('click', () => showSlide(-1));
next.addEventListener('click', () => showSlide(1));
setInterval(() => showSlide(1), 3000); // 3秒ごとにスライドを切り替える
</script>

</body>
</html>

上記ソース内の「image1.jpg」「image2.jpg」「image3.jpg」の箇所をご利用されたい画像のアドレスに書き換えてご利用いただけます。

表示サンプル

スライダーのデモ

おわりに
このサンプルコードを使って、ウェブサイトにスライダーを簡単に実装できます。スライダーを活用することで、視覚的に魅力的なコンテンツを提供し、ユーザーの関心を引きつけることができます。ぜひ、自社のホームページに取り入れてみてください。

WEBお役立ち情報

スライダーのデモ