CSSだけで実装！画像が横方向に流れる無限ループスライダー
「ul」「li」タグをフレックスボックスで横並びにして、同じ内容の「ul」タグを追加。 「ul」タグに対して横方向に移動するアニメーションを入れ、無限ループスライダーにしています。
<html style="max-height: 100%;"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
background-color: #fff;
display: grid;
height: 100%;
}
.slider {
display: flex;
background-color: #efefef;
overflow: hidden;
}
.slider-list {
display: flex;
margin: 0;
padding: 0;
align-items: center;
animation: slideShow 20s infinite linear;
list-style: none;
}
.slider-item{
width: 400px;
height: 250px;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0 0.5rem;
}
.slider:hover .slider-list {
animation-play-state: paused;
}
@keyframes slideShow {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="slider">
<ul class="slider-list">
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d402879466e.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</a>
</li>
</ul>
<ul class="slider-list">
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d402879466e.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</a>
</li>
</ul>
</div>
</div>
<script id="js-section">
</script></body></html>
CSSだけで実装！画像が縦方向に流れる無限ループスライダー
「ul」「li」タグをフレックスボックスで横並びにして、同じ内容の「ul」タグを追加。 「flex-direction: column-reverse;」に設定。 「ul」タグに対して縦方向に移動するアニメーションを入れ、無限ループスライダーにしています。
<html style="max-height: 100%;"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.container {
background-color: #fff;
display: grid;
width:600px;
height: 350px;
}
.slider {
display: flex;
flex-direction: column-reverse;
background-color: #efefef;
overflow: hidden;
}
.slider-list {
display: flex;
flex-direction: column-reverse;
margin: 0;
padding: 0;
align-items: center;
animation: slideShow 20s infinite linear;
list-style: none;
}
.slider-item {
width: 400px;
height: 250px;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0 0.5rem;
}
.slider:hover .slider-list {
animation-play-state: paused;
}
@keyframes slideShow {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<div class="slider">
<ul class="slider-list" style="transform: translateY(-121px);">
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d402879466e.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</a>
</li>
</ul>
<ul class="slider-list">
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d402879466e.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</a>
</li>
<li class="slider-item">
<a href="#">
<img src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</a>
</li>
</ul>
</div>
</div>
<script id="js-section">
</script></body></html>
CSSだけで作るスライドアウト画像スライダー
スライド画像を「position:absolute;」で重ね、「opacity:0;」で非表示に。 「animation-delay」で画像表示のタイミングをずらして、@keyframesで「opacity」「translateY」を変化させスライドアウトさせてます。
<html style="max-height: 100%;"><head><script id="js-section">window.onload = function(){
const sliderContent = document.querySelector('.slider-content');
let slideItems = document.querySelectorAll('.slider-item');
function animate_slider() {
sliderContent.style.transition = '3s linear';
sliderContent.style.transform = 'translateX(-100%)';
sliderContent.addEventListener('transitionend', () => {
sliderContent.style.transition = 'none';
// Add this slide to the end and remove it from the beginning
sliderContent.appendChild(slideItems[0].cloneNode(true));
sliderContent.removeChild(slideItems[0]);
// Update the list of slide items
slideItems = document.querySelectorAll('.slider-item');
// Schedule the transform change to the next event loop
setTimeout(() => {
sliderContent.style.transform = 'translateX(0)';
animate_slider();
}, 0);
}, { once: true });
}
animate_slider();
}
};
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.container {
width: 100%;
height: 100vh;
background-color: #fff;
}
.slider-area {
position: relative;
width: 100%;
height: 100vh;
overflow:hidden;
}
.slider-item {
position: absolute;
inset: 0;
opacity: 0;
animation: slideShow 27s infinite;
}
.slider-item:nth-child(2) {
animation-delay: 9s;
}
.slider-item:nth-child(3) {
animation-delay: 18s;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slideShow {
0% {
opacity: 0;
transform: translateY(0%) scale(1.2);
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: translateY(0%) scale(1.15);
animation-timing-function: ease-out;
}
30% {
opacity: 1;
transform: translateY(0%) scale(1);
}
43%,
100% {
opacity: 0;
transform: translateY(-100%);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="container">
<div class="slider-area">
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64b0a758573a1.jpg">
</div>
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64b0a758a2dbd.jpg">
</div>
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64b0a758e5f8e.jpg">
</div>
</div>
</div>
</body></html>
CSSだけで実装！徐々に拡大しながらフェードイン、フェードアウトする画像スライダー
スライド画像を「position:absolute;」で重ね、「opacity:0;」で非表示に。 「animation-delay」で画像表示のタイミングをずらして、@keyframesで「opacity」「scale」を指定し徐々に拡大させてます。
<html style="max-height: 100%;"><head><script id="js-section">window.onload = function(){
const sliderContent = document.querySelector('.slider-content');
let slideItems = document.querySelectorAll('.slider-item');
function animate_slider() {
sliderContent.style.transition = '3s linear';
sliderContent.style.transform = 'translateX(-100%)';
sliderContent.addEventListener('transitionend', () => {
sliderContent.style.transition = 'none';
// Add this slide to the end and remove it from the beginning
sliderContent.appendChild(slideItems[0].cloneNode(true));
sliderContent.removeChild(slideItems[0]);
// Update the list of slide items
slideItems = document.querySelectorAll('.slider-item');
// Schedule the transform change to the next event loop
setTimeout(() => {
sliderContent.style.transform = 'translateX(0)';
animate_slider();
}, 0);
}, { once: true });
}
animate_slider();
}
};
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">body{
margin:0;
padding:0;
}
.container {
width: 100%;
height: 100vh;
background-color: #fff;
}
.slider-area {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slider-item {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
animation: sliderAnime 30s linear infinite 0s;
}
.slider-item:nth-child(2) {
animation-delay: 10s;
}
.slider-item:nth-child(3) {
animation-delay: 20s;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes sliderAnime {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1;
transform: scale(1.1);
}
40%,
100% {
opacity: 0;
transform: scale(1.2);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="container">
<div class="slider-area">
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64dd3d11c3be3.jpg">
</div>
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64dd3d1239904.jpg">
</div>
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64dd3d12cdfb4.jpg">
</div>
</div>
</div>
</body></html>
CSSだけで作るフェードイン、フェードアウト画像スライダー
スライド画像を「position:absolute;」で重ね、「opacity:0;」で非表示に。 「animation-delay」で画像表示のタイミングをずらして、@keyframesで「opacity」を変化させフェードイン・フェードアウトさせてます。
<html style="max-height: 100%;"><head><script id="js-section">window.onload = function(){
const sliderContent = document.querySelector('.slider-content');
let slideItems = document.querySelectorAll('.slider-item');
function animate_slider() {
sliderContent.style.transition = '3s linear';
sliderContent.style.transform = 'translateX(-100%)';
sliderContent.addEventListener('transitionend', () => {
sliderContent.style.transition = 'none';
// Add this slide to the end and remove it from the beginning
sliderContent.appendChild(slideItems[0].cloneNode(true));
sliderContent.removeChild(slideItems[0]);
// Update the list of slide items
slideItems = document.querySelectorAll('.slider-item');
// Schedule the transform change to the next event loop
setTimeout(() => {
sliderContent.style.transform = 'translateX(0)';
animate_slider();
}, 0);
}, { once: true });
}
animate_slider();
}
};
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.container {
width: 100%;
height: 100vh;
background-color: #fff;
}
.slider-area {
position: relative;
width: 100%;
height: 100vh;
}
.slider-item {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
animation: slideShow 30s linear infinite 0s;
}
.slider-item:nth-child(2) {
animation-delay: 10s;
}
.slider-item:nth-child(3) {
animation-delay: 20s;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slideShow {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1;
}
40%,
100% {
opacity: 0;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="container">
<div class="slider-area">
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64b0a758573a1.jpg">
</div>
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64b0a758a2dbd.jpg">
</div>
<div class="slider-item">
<img src="https://pa-tu.work/storage/img/posts/64b0a758e5f8e.jpg">
</div>
</div>
</div>
</body></html>