CSSスライダーがありませんスライド

Question

私はCSSスライダーを持っていますが、私はそれを自動スライドにすることはできません。

私は、ウェブサイトのスプラッシュページとして自動スライドにしようとしている背景の4つのdivsを持っています。 問題がデータサイクルかどうかわかりませんが、このためにJSチュートリアルを見つけるのがよいでしょうか？

誰でも助けることができる、してください

.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 100} 

       body 
       { 
        background: #3B242D; 
        font-family: 'Raleway', sans-serif; 
       } 
     html,body{height:100%; overflow: hidden} 
       .cycle-slideshow{position:fixed !important;top:0;bottom:0;left:0;right:0; z-index: 0} 
@keyframes slidy { 
0% { left: 0%; } 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 
    div#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 5s slidy infinite; 
} 



<!-- language: lang-html --> 

     <div id="slider"> 
<figure> 
    <div class="cycle-slideshow"> 

     <div class="item" 
      style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-1.png)"> 

      <div class="overlay"></div> 

     </div> 
     <div class="item" 
      style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-2.png)"> 

      <div class="overlay"></div> 

     </div> 
     <div class="item" 
      style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-3.png)"> 


      <div class="overlay"></div> 

     </div> 
     <div class="item" 
      style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-4.png)"> 


      <div class="overlay"></div> 

     </div> 

    </div> 
    </figure> 
</div> 

私はしかし、それはまだ仕事をdoes'nt、それで遊ぶのabitはより多くを持っていたし、これはより良いコードであると考えています。 DIVが多すぎる可能性がありますか？ DivのImがスライドまたはKeyframesに設定しようとしているかどうかわかりません。

ありがとうございました

Answer 1

Iveはこの問題を解決しました。

HTMLに背景を入れるのではなく、CSSで行い、スライドごとにアニメーションを作成しました。

<div class='slider'> 
    <div class='slide1'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2> 
<h1>ASIAN WEDDING 
DIRECTORY</h1> 
<h2> 
BRINGING YOU 
OUR ADVANCED SEARCH TOOLBAR</h2></div> 
</div> 
    <div class='slide2'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2> 
<h1>ASIAN WEDDING 
DIRECTORY</h1> 
<h2> 
USE #TAGS TO FIND YOUR PERFECT 
IMAGES FROM OUR SUPPLIERS</h2></div> 
</div> 
    <div class='slide3'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2> 
<h1>ASIAN WEDDING 
DIRECTORY</h1> 
<h2> 
WE’RE DOING THINGS IN A 
DIFFERENT WAY</h2></div> 
</div> 
    <div class='slide4'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2> 
<h1>ASIAN WEDDING 
DIRECTORY</h1> 
<h2> 
WITH THE SUPPORT FROM THE 
BIGGEST NAMES OUT THERE</h2></div> 

</div> 
</div> 
<div class="content"> 
     <a href="/home"><img class="logo-img" src="https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-logo.png" alt="" ></a> 
     <div class="btnContainer"> 
      <a href="https://thetaguk.com/site/home-2/" class="btn btnA">ENTER</a> 
     </div> 
    </div> 
     body 
     { 
      background: #3B242D; 
      font-family: 'Raleway', sans-serif; 
     } 

     h1{color:#fff; border-bottom:3px solid; border-top:3px solid;} 
     h2{color:#fff;} 
     .text{height:50%; width:30%; float:right;padding-right:5%;} 

    .slider{position:fixed !important;top:0;bottom:0;left:0;right:0; z-index: 0; } 
     .slider{background-position:inherit;background-size:cover;width:100%;height:100%; z-index: 1;} 
.slide1,.slide2,.slide3,.slide4,.slide5 { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.slide1 { 
    background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-1-image.png)no-repeat center; 
     background-size: cover; 
    animation:fade 12s infinite; 
-webkit-animation:fade 12s infinite; 

} 
.slide2 { 
    background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-2-image.png)no-repeat center; 
     background-size: cover; 
    animation:fade2 12s infinite; 
-webkit-animation:fade2 12s infinite; 
} 
.slide3 { 
    background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-3-image.png)no-repeat center; 
     background-size: cover; 
    animation:fade3 12s infinite; 
-webkit-animation:fade3 12s infinite; 
} 
.slide4 { 
    background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/spashpage-4-image-1.png)no-repeat center; 
     background-size: cover; 
    animation:fade3 12s infinite; 
-webkit-animation:fade3 12s infinite; 
} 
@keyframes fade 
{ 
    0% {opacity:1} 
    33.333% { opacity: 0} 
    66.666% { opacity: 0} 
    100% { opacity: 1} 
} 
@keyframes fade2 
{ 
    0% {opacity:0} 
    33.333% { opacity: 1} 
    66.666% { opacity: 0 } 
    100% { opacity: 0} 
} 
@keyframes fade3 
{ 
    0% {opacity:0} 
    33.333% { opacity: 0} 
    66.666% { opacity: 1} 
    100% { opacity: 0} 
} 
.btnContainer { margin-top: 20px; } 

     .btn { 
      display: inline-block; 
      background: #3B242D; 
      color: white; 
      padding: 10px 20px; 
      text-decoration: none; 
     } 
.logo-img{ 
      width: 320px; 
     } 
.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 100} 

     @media only screen and (max-width: 503px) { 
      .tag{ padding-left:30px; background-size:contain; } 
      .tag span{ font-size: 21px; } 
      .logo-img{ 
       width: 160px; 
      } 
      h1 { 
    color: #fff; 
    border-bottom: 1px solid; 
    border-top: 1px solid; 
    font-size: 18px; 
} 
     h2{color:#fff; font-size:14px;} 
     .text{height:50%; width:80%; } 
     } 
     @media only screen and (max-width: 768px){ 
    .cycle-slideshow .item{ 
    background-position:center center; 
} 
.tag.img-1 { 
    bottom: auto; 
    right: 10%; 
    top: 70px; 
} 
.logo-img { 
    width: 100px; 
} 
} 

ここ

https://codepen.io/Chazlie/pen/MOmdEX