で自動画像スライドショーを作成する

私はあなたの自動画像のスライドショーを作成する場合はお手伝いします.ここでは、HTMLとCSSだけで作られた自動画像スライダーを作成しました.
はい、あなたは正しい
このスライダーは、HTMLとCSSだけで作られ、そのイメージが自動的に変更されます.しかし、JavaScriptを使用してスライダーを作成しました.しかし、多くのユーザーにとって、それは少し複雑に思えました.それがどのように働くかについて学ぶWatch its live demo.
それで、私はこのデザインを作りました.最初のスライダは、HTMLによって作成された画像が追加されました.それから、私はCSSで設計されて、自動的にイメージを変えるように手配しました.

の自動スライドショー

HTML CSSのこのAutomatic Image Sliderは、あなたが見るために驚くほど簡単な方法で作成されました.
最初にシンプルな箱を作りました.ボックスwidth: 500pxと10 pxの境界線を使用します.国境の使用を大幅にこのイメージスライダの美しさを強化しています.

HTMLコード

次のコードは、スライダとイメージの構造が追加されたHTMLコードです.ここでは4画像を使用しています.

<!--Basic structure of slider-->
<div class="container">
<!--Area of the images-->
   <div class="wrapper">
      <img src="https://filmswot.files.wordpress.com/2018/01/coco_dominates_chinese_box_office_.jpg">
      <img src="https://www.foundry.com/sites/default/files/inline-images/Images_003_0.jpg">
      <img src="https://www.foylefilmfestival.org/sites/default/files/COCO%20main%20image%203.jpg">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2017%2F11%2Fcoco_c330_56b_pub-pub16n-186_rgb-2000.jpg">
   </div>

</div>

CSSコード

以下のコードは、画像スライダーをデザインし、画像の自動変換を行うCSSです.

スライダーの基本構造はいくつかのCSSによって設計されています.

次に、画像は設計される.画像の幅はスライダーの幅に等しい.そうすると、アニメーションは像の間で加えられて、keyframeによって、起動した.👉👉 簡単なロジックがここでイメージを変更するために使用されている.ここで、アニメーションの合計時間は、画像の量によって分割されます.その時、我々はイメージを見ます.
その時、我々はそのイメージを見るつもりです.ここでは4画像が使用されている.それで、我々は合計時間の25 %まで各々のイメージを見ることができます.
アニメーションの合計時間は16秒ですので、各画像for 4 secondsを見ることができます.

/*The webpage has been designed*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #ffffff;
}

/*Basic structure of slider*/
.container{
    width: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 15px black;
}

/*Area of images*/
.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}
/*Animation activated by keyframes*/
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

うまくいけば、あなたはHTML CSSでこのAutomatic Image Slideshowについてのどんな質問も持ちません.あなたが質問をするならば、コメントで知らせてください.
私はJavaScriptによって多くの高度なイメージスライダの前にチュートリアルを共有している.JavaScriptを知っていれば、その自動画像スライダーのチュートリアルを見ることができます.