57411


CSSのみで画像を無限スクロールしたのですが、スマホで見たときに画像どうしが折り重なってしまいます。  
2つめのul要素が前に出てきているのが原因だと思うのですが、スマホの時のみliやimgの幅を変更してみても解決できません。  
これを折り重ならずに画像1枚分が幅いっぱい表示されるようにしたいです。  
どこをどう直せばよいでしょうか。

**参考にしたサイトはこちらです。**  
<https://chocolat5.com/tips/loop-image-animation/>

[code]

    <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>
    
[/code]

[code]

     .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%;
                }
            }
    
[/code]

レスポンシブのmixinはこちらです。

[code]

    $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;
        }
    }
    
[/code]

アニメーションのmixinはこちらです

[code]

    @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%);
        }
    }
    
[/code]

ご回答宜しくお願い致します。


CC BY-SA 4.0
2019-08-15T07:54:24.353
57373
2019-08-16T17:12:54.807
2019-08-16T15:11:19.920
question
css sass
画像スクロールでスマホで見たときに折り重ならないようにしたい


`.loop__wrap` 内の `ul` 要素に対して `width: 100%` を設定しているため、 **`ul` 要素の横幅より `ul` 要素内の
`li` 要素の横幅が大きくなっている**ことが原因です。簡単な対処策としては、 **当該`width` プロパティの記述を削除する**ことが考えられます。

[code]

    .loop__wrap ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row nowrap;
      flex-flow: row nowrap;
      /* width: 100%; */  /* 削除 */
      margin: 0;
      padding: 0;
    }
    
[/code]

[code]

    @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%);
      }
    }
    
    .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;
    }
    
    .loop__wrap ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row nowrap;
      flex-flow: row nowrap;
      /* width: 100%; */  /* 削除 */
      margin: 0;
      padding: 0;
    }
    
    @media screen and (max-width: 768px) {
      .loop__wrap ul {
        margin: 0.2px;
      }
    }
    
    .loop__wrap ul li {
      width: 100%;
      display: inline-block;
    }
    
    .loop__wrap ul li img {
      display: block;
      width: auto;
      height: 100%;
    }
    
    .loop__wrap ul li img+img {
      animation: loop2 50s linear infinite;
    }
    
    .loop__wrap ul:first-child {
      animation: loop 50s -25s linear infinite;
      backface-visibility: hidden;
      will-change: toransform;
    }
    
    .loop__wrap ul:hover {
      animation-play-state: paused;
    }
    
    .loop__wrap ul+ul {
      animation: loop2 50s linear infinite;
    }
    
    .loop__wrap a {
      width: auto;
      display: block;
      height: 100%;
    }
[/code]

[code]

    <div class="loop__wrap">
      <ul>
        <li>
          <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
        </li>
      </ul>
      <ul>
        <li>
          <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
        </li>
        <li>
          <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
        </li>
      </ul>
    </div>
[/code]

もしくは、以下のように `ul` 要素の幅に合わせて画像幅を伸縮させることでも問題を解決出来ます。

[code]

    .loop__wrap ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row nowrap;
      flex-flow: row nowrap;
      flex: 0 0 100%; /* 追記 */
      margin: 0;
      padding: 0;
    }
    
    .loop__wrap ul li {
      width: 100%;
      display: inline-block;
      flex: 1; /* 追記 */
    }
    .loop__wrap ul li img {
      display: block;
      width: 100%; /* 変更 */
      height: 100%;
    }
    
[/code]

[code]

    @charset "UTF-8";
    @keyframes loop {
      0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
      }
      to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
      }
    }
    .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;
    }
    .loop__wrap ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row nowrap;
      flex-flow: row nowrap;
      flex: 0 0 100%; /* 追記 */
      margin: 0;
      padding: 0;
    }
    @media screen and (max-width: 768px) {
      .loop__wrap ul {
        margin: 0.2px;
      }
    }
    .loop__wrap ul li {
      width: 100%;
      display: inline-block;
      flex: 1; /* 追記 */
    }
    .loop__wrap ul li img {
      display: block;
      width: 100%; /* 変更 */
      height: 100%;
    }
    .loop__wrap ul li img + img {
      animation: loop2 50s linear infinite;
    }
    .loop__wrap ul:first-child {
      animation: loop 50s -25s linear infinite;
      backface-visibility: hidden;
      will-change: toransform;
    }
    .loop__wrap ul:hover {
      animation-play-state: paused;
    }
    .loop__wrap ul + ul {
      animation: loop2 50s linear infinite;
    }
    .loop__wrap a {
      width: auto;
      display: block;
      height: 100%;
    }
    
    @keyframes loop2 {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
      to {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
      }
    }
[/code]

[code]

    <div class="loop__wrap">
      <ul>
        <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
      </ul>
      <ul>
        <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
        <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
      </ul>
    </div>
[/code]


CC BY-SA 4.0
2019-08-16T17:12:54.807
57411
2019-08-16T17:12:54.807
32986
57373
answer