htmlとcssで作るスライダー🌟
HTMLとCSSだけで作るシンプルな画像スライダーを紹介します。
完成
ソースコード
ここでは、3つのダミー画像をスライダーに配置します。画像は、簡単に以下のように設定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Source code</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.slider {
position: relative;
width: 80%;
max-width: 600px;
margin: auto;
overflow: hidden;
border: 2px solid #ddd;
border-radius: 10px;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slides input {
display: none;
}
.slide {
min-width: 100%;
transition: transform 0.5s ease-in-out;
}
.slide img {
width: 100%;
border-radius: 10px;
}
.navigation {
position: absolute;
width: 100%;
bottom: 10px;
text-align: center;
}
.navigation label {
cursor: pointer;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
background: #ddd;
border-radius: 50%;
transition: background 0.3s ease;
}
#s1:checked ~ .slides {
transform: translateX(0%);
}
#s2:checked ~ .slides {
transform: translateX(-100%);
}
#s3:checked ~ .slides {
transform: translateX(-200%);
}
#s1:checked ~ .navigation label[for="s1"],
#s2:checked ~ .navigation label[for="s2"],
#s3:checked ~ .navigation label[for="s3"] {
background: #333;
}
</style>
</head>
<body>
<div class="slider">
<input type="radio" name="slide" id="s1" checked>
<input type="radio" name="slide" id="s2">
<input type="radio" name="slide" id="s3">
<div class="slides">
<div class="slide">
<img src="https://via.placeholder.com/600x400/ff7f7f/333333?text=Slide+1" alt="Slide 1">
</div>
<div class="slide">
<img src="https://via.placeholder.com/600x400/7f7fff/333333?text=Slide+2" alt="Slide 2">
</div>
<div class="slide">
<img src="https://via.placeholder.com/600x400/7fff7f/333333?text=Slide+3" alt="Slide 3">
</div>
</div>
<div class="navigation">
<label for="s1"></label>
<label for="s2"></label>
<label for="s3"></label>
</div>
</div>
</body>
</html>
コードの説明
- HTML: 3つのスライドのラジオボタンを設定し、それぞれのスライドに関連付けています。
- CSS: スライダーのスタイルとスライドのトランジションを設定しています。ラジオボタンのチェックに応じて、スライドが切り替わる仕組みになっています。
- ダミー画像:
https://via.placeholder.com/
を使用してダミー画像を取得しています。URLにテキストや色を指定することで、表示内容を簡単に変更できます。
このスライダーは、クリックすることで手動でスライドを切り替えられるようにしています。シンプルでありながら、視覚的に良好なスライダーを作ることができます。
完成品とソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Source code</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.slider {
position: relative;
width: 80%;
max-width: 600px;
margin: auto;
overflow: hidden;
border: 2px solid #ddd;
border-radius: 10px;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slides input {
display: none;
}
.slide {
min-width: 100%;
transition: transform 0.5s ease-in-out;
}
.slide img {
width: 100%;
border-radius: 10px;
}
.navigation {
position: absolute;
width: 100%;
bottom: 10px;
text-align: center;
}
.navigation label {
cursor: pointer;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
background: #ddd;
border-radius: 50%;
transition: background 0.3s ease;
}
#s1:checked ~ .slides {
transform: translateX(0%);
}
#s2:checked ~ .slides {
transform: translateX(-100%);
}
#s3:checked ~ .slides {
transform: translateX(-200%);
}
#s1:checked ~ .navigation label[for="s1"],
#s2:checked ~ .navigation label[for="s2"],
#s3:checked ~ .navigation label[for="s3"] {
background: #333;
}
</style>
</head>
<body>
<div class="slider">
<input type="radio" name="slide" id="s1" checked>
<input type="radio" name="slide" id="s2">
<input type="radio" name="slide" id="s3">
<div class="slides">
<div class="slide">
<img src="https://via.placeholder.com/600x400/ff7f7f/333333?text=Slide+1" alt="Slide 1">
</div>
<div class="slide">
<img src="https://via.placeholder.com/600x400/7f7fff/333333?text=Slide+2" alt="Slide 2">
</div>
<div class="slide">
<img src="https://via.placeholder.com/600x400/7fff7f/333333?text=Slide+3" alt="Slide 3">
</div>
</div>
<div class="navigation">
<label for="s1"></label>
<label for="s2"></label>
<label for="s3"></label>
</div>
</div>
</body>
</html>
Recent posts
Category
- reference (2)
- sourcecode (6)
- weblog (11)