ホームページ作成初心者です。チャットGPTでスライダーを聞いたら、以下のように出たのですが、横にスライドしました。本当は1枚ずつ、4秒くらいで、４枚変わってほしいです。infinite linearをeaseにするように。とチャットが言ったので、そのようにしたら、動きませんでした。どうしたらいいでしょうか？よろしくお願いします。\u0026lt;style\u0026gt;.slider { width: 1000px; overflow: hidden;}.slider-track { display: flex; animation: slide 10s infinite linear;}.slider img { width: 1000px; height: auto;}@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-1200px); } /* 1000px × 4枚分 */}\u0026lt;/style\u0026gt;

さじさん



\u0026gt;･･･本当は1枚ずつ、4秒くらいで、４枚変わってほしいです。･････



１．こういう事ですか、下記ソース↓



２．htmlの無い断片的な、css を貼り付けるのではなく、どこからか拾ってきたなら、そのURLを記述したり、問題となっている具体的ソース記述を提示するなどしてより具体的に説明したほうが、質問者には伝わります。



この様な質問は、お互いに消耗するだけです。↓

yahoo.co.jp/qa/question_detail/q10322883125">https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10322883125



３．参考ソース。

\u0026lt;!DOCTYPE html\u0026gt;

\u0026lt;html\u0026gt;

\u0026lt;head\u0026gt;

\u0026lt;meta charest=\u0026quot;UTF-8\u0026quot;\u0026gt;

\u0026lt;style\u0026gt;

div.slide-show {

width: 600px;

margin: 10px auto;

position: relative;

}



.main_img{

animation : anime 24s 0s infinite;

width: 100%;

height: auto;

opacity: 0;

position: absolute;

left: 0;

top: 0;

}

.main_img:nth-of-type(1) {

animation-delay : 0s;

}

.main_img:nth-of-type(2) {

animation-delay : 6s;

}

.main_img:nth-of-type(3) {

animation-delay : 12s;

}

.main_img:nth-of-type(4) {

animation-delay : 18s;

}



@keyframes anime {

0% {opacity: 0}

10% {opacity: 1}

20% {opacity: 1}

25% {opacity : 0;transform : scale(1.2);z-index : 9;}

33% {opacity: 0}

}

\u0026lt;/style\u0026gt;

\u0026lt;/head\u0026gt;

\u0026lt;body\u0026gt;

\u0026lt;div class=\u0026quot;slide-show\u0026quot;\u0026gt;

\u0026lt;img class=\u0026quot;main_img\u0026quot; src=\u0026quot;https://s.yimg.jp/images/ks/clap/image/category/40/2078297558.png\u0026quot; /\u0026gt;

\u0026lt;img class=\u0026quot;main_img\u0026quot; src=\u0026quot;https://s.yimg.jp/images/ks/clap/image/category/40/2078297526.png\u0026quot; /\u0026gt;

\u0026lt;img class=\u0026quot;main_img\u0026quot; src=\u0026quot;https://s.yimg.jp/images/ks/clap/image/category/40/2078297536.png\u0026quot; /\u0026gt;

\u0026lt;img class=\u0026quot;main_img\u0026quot; src=\u0026quot;https://s.yimg.jp/images/ks/clap/image/category/40/2078297543.png\u0026quot; /\u0026gt;

\u0026lt;/div\u0026gt;

\u0026lt;/body\u0026gt;

\u0026lt;/html\u0026gt;