CSSのみで画像を無限スクロールしたのですが、スマホで見たときに画像どうしが折り重なってしまいます。
2つめのul要素が前に出てきているのが原因だと思うのですが、スマホの時のみliやimgの幅を変更してみても解決できません。
これを折り重ならずに画像1枚分が幅いっぱい表示されるようにしたいです。
どこをどう直せばよいでしょうか。
参考にしたサイトはこちらです。
https://chocolat5.com/tips/loop-image-animation/
<div class="loop__wrap">
<ul>
<li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
</ul>
</div>
.loop__wrap{
width: 100vw;
height: 100%;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow-x: hidden;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
overflow: hidden;
ul{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 100%;
margin: 0;
padding: 0;
@include mq(md){
margin: 0.2px;
}
li{
width: 100%;
display: inline-block;
img{
display: block;
width: auto;
height: 100%;
}
img + img{
animation: loop2 50s linear infinite;
}
}
&:first-child{
animation: loop 50s -25s linear infinite;
backface-visibility: hidden;
will-change: toransform;
}
&:hover{
animation-play-state: paused;
}
}
ul + ul{
animation: loop2 50s linear infinite;
}
a{
width: auto;
display: block;
height: 100%;
}
}
レスポンシブのmixinはこちらです。
$breakpoint-sm: 357px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;
$breakpoints: (
'sm': 'screen and (max-width: 357px)',
'md': 'screen and (max-width: 768px)',
'lg': 'screen and (min-width: 1024px)'
) !default;
@mixin mq($breakpoint: md){
@media #{map-get($breakpoints, $breakpoint)}{
@content;
}
}
アニメーションのmixinはこちらです
@keyframes loop{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes loop2{
0%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
to{
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
ご回答宜しくお願い致します。
mixin
があるため、エラーが発生するはずです。問題が再現出来るコードを追記していただけませんか?