画像を使ったスライドショー

この記事では、HTMLとCSSのコードを使用した自動画像スライドショーの作成方法を示しました.以前に君に見せたhow to make an automatic image slider . 私は、このデザインを作成するために、HTMLとCSSコードを使用しました.
私はこのイメージのスライドショーで9画像を使用している.我々は、一定の角度で各画像をきちんと配置することにより、円形の円を作成している.Aの場合simple automatic image slideshow , すべての画像は1つのボックスにあります.それらのイメージは時々変化します.しかし、この場合、私は特定の角度で各々のイメージを配置しました.ここで9枚の画像を使用しているので、それぞれの画像を40 degree angle .
下で、私は完全にステップバイステップの方法を私はHTMLとCSSのコードを使用して、このデザインを作った.

ステップ1 :基本的な構造を作成し、画像を追加する

まず、必要な画像を次のHTMLコードを使用して追加しました.私は9画像を使用している場合は、削減することができますまたはお好みの量を増やす場合.

   <div class="slider">
     <div class="rotator">
        <div class="items">
           <img src="img1.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img2.jpg" />
        </div>
        <div class="items">
           <img src="img3.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img4.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img5.jpg" />
        </div>
        <div class="items">
           <img src="img6.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img7.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img8.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img9.jpg" alt="items photo" />
        </div>
     </div>
  </div>

今、私はWebページの特定の背景色を設定しました.

    body{
      background: #0c3c53
    }

ステップ2：デザインCSSコードでスライドショー

このスライダーの構造を次のCSSコードを使って構築しました.ここでは350px width and 150px height 各スライダの.使いましたanimation: roter 29s linear infinite このスライドショーを回転させる.
ここでは一度スライダ全体を回転させる29秒を使用します.あなたがより速くこのスライダーを回転させたいならば、あなたはここで値を変えることができます.

 .slider {
    position: relative;
    width: 350px;
    margin: 50px auto;
    perspective: 1000px;
    padding-top: 120px;
    }
 .rotator {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 55%;
    height: 150px;
    transform-style: preserve-3d;
    animation: roter 29s linear infinite;
    }

ステップ3：画像のサイズを設定し、基本的なデザインを行う

今、私は各画像のサイズを決定している.ここでは、画像の高さと幅の100 %を使用しています.これは、画像が上部のスライダーの構造に正確に等しくなることを意味します.私はまた、美しさを高めるためにこれらのイメージの周りの境界線を使用している.

 .items {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: 2px solid white;
    }

 .items img {
    height: 100%;
    width: 100%;
    transition: all 3s ease;
    }

私はイメージにホバー効果を与えている.これらの画像をクリックすると、画像が少しずつズームされます.使用するtransform: scale (1.1) これにズームインする.
このズームの値を増加させたいならば、あなたはここで品質の量を増やすことができます.ここで私は1.1を使用することができます使用している1.4 or 1.5 あなたが望むならば.

 .items:hover img {
    transform: scale(1.1);
    }

ステップ4：@ keyframeルータを使っているスライダーを回転させてください

今、私はCSS@keyframes このスライダーを回転させる.これは、スライダが360回転する原因となります​​y軸に沿って.

 @keyframes roter {
    from {
    transform: rotateY(0deg);
    }
    to {
    transform: rotateY(360deg);
    }
    }

ステップ5 :特定の角度で画像を配置する

上の写真で見ることができるように、9枚の絵のうちの1つだけがここで見ることができます.これは、すべての画像が1つの場所に追加されているためです.次のCSSコードを使って、ある角度で画像を手配します.Transform: rotateY が使用されている.私は9画像を使用しているので、私は40度の角度で各画像を配置している.これにより、9個の画像が結合されて円が形成される.

 .items:first-child {
    transform: rotateY(calc(40deg)) translateZ(300px);
    }

 .items:nth-child(2) {
    transform: rotateY(calc(80deg)) translateZ(300px);
    }

 .items:nth-child(3) {
    transform: rotateY(calc(120deg)) translateZ(300px);
    }

 .items:nth-child(4) {
    transform: rotateY(calc(160deg)) translateZ(300px);
    }

 .items:nth-child(5) {
    transform: rotateY(calc(200deg)) translateZ(300px);
    }

 .items:nth-child(6) {
    transform: rotateY(calc(240deg)) translateZ(300px);
    }

 .items:nth-child(7) {
    transform: rotateY(calc(280deg)) translateZ(300px);
    }

 .items:nth-child(8) {
    transform: rotateY(calc(320deg)) translateZ(300px);
    }

 .items:nth-child(9) {
    transform: rotateY(calc(360deg)) translateZ(300px);
    }

上記の完全な画像のスライドショーを作成しました.このスライドショーtakes 29 seconds to rotate once . それは、我々が29秒後に各々の絵を見るということを意味します.
下記はホバー効果を使用しました.このスライダをマウスを介して回転するときに停止したり、これらの画像をクリックします.上記の私は無限のアニメーションを使用してスライドショーを回転させるように指示している.
現在、私は以下を使用するのを止めるように指示しましたanimation-play-state: paused あなたがそれをクリックするとき.

 .rotator:hover {
    animation-play-state: paused;
    }

このチュートリアルからどのようにこの自動画像スライドショーを作成したかを学びました.あなたはwatch the live demo あなたはそれがどのように動作するかを知りたい場合.
このタイプは既に多くを作りましたmore automatic image sliders . このスライダーが好きなら、それらのデザインを見ることができます.