CSS Flexboxを使用したスライダー/カルーセルの作成（ループ内に無限に繰り返されるアイテムを含む）
JavaScriptを使用してCSSFlexboxを使用して、無限にスクロールするスライダーを作成できます。
例
次の例は、CSSを使用したカルーセルを示しています。
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
.container {
max-width: 600px;
position: relative;
margin: 6% auto;
}
.prevbtn, .nextbtn {
position: absolute;
top: 50%;
padding: 12px;
margin-top: -20px;
color: white;
font-weight: bold;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 50%;
}
.prevbtn:hover, .nextbtn:hover {
background-color: darkgrey;
color: rgb(0,0,0);
}
.nextbtn {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="slide">
<img src="https://images.unsplash.com/photo-1609517904792-bac493d55556?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1609883475382-c4c9378569e5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1611094607507-8c8173e5cf33?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<a class="prevbtn" onclick="changeSlide(-1)">❮</a>
<a class="nextbtn" onclick="changeSlide(1)">❯</a>
</div>
<script>
let slideIndex = [1,1];
viewSlides(1);
function changeSlide(n) {
viewSlides(slideIndex[0] += n);
}
function viewSlides(n) {
let ele = document.getElementsByClassName("slide");
if (n > ele.length) {
slideIndex[0] = 1
}
if (n < 1) {
slideIndex[0] = ele.length
}
for (i = 0; i < ele.length; i++) {
ele[i].style.display = "none";
}
ele[slideIndex[0]-1].style.display = "block";
}
</script>
</body>
</html> これにより、次の出力が得られます
例
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 120px;
max-width: 600px;
margin: 12px auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
border: 4px ridge rgba(20,30,240,0.6);
}
.container > div {
height: 120px;
width: 2400px;
background: url(https://images.unsplash.com/photo-1611485916153-fce531587fe0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120);
position: absolute;
height: 100%;
transform: translate3d(0, 0, 0);
}
.container .slider {
animation: slideshow 20s linear infinite;
}
@keyframes slideshow {
100% {
transform: translateX(-33.33%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="slider"></div>
</div>
</body>
</html> これにより、次の出力が得られます
-
CSSFlexboxでアイテムの固定幅を設定する
構文 CSSflexプロパティの構文は次のとおりです- Selector { flex: /*value*/ } 例 次の例は、CSSフレックスプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div { display: flex;
-
CSSを使用して魅力的な最初の行を作成する::first-line
CSS ::first-line pseudo-elementは、要素の最初の行のスタイルを設定するのに役立ちます 次の例は、CSS::first-line疑似要素を示しています。 例 <!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: darkorchid; } ::first-line { font-size: 2em; co