如何使用JavaScript/css瀏覽純CSS輪播/幻燈片？

Question

我已經使用CSS3動畫和關鍵幀創建了一個簡單的幻燈片，我試圖弄清楚如何創建導航箭頭，讓您輕鬆瀏覽幻燈片。

我想要一個下一個和上一個按鈕/箭頭，滑動到幻燈片中的每個視頻點擊。我一直試圖用CSS來做，但沒有太多的運氣，我想知道是否有人可能有我可能忽略的解決方案。

任何建議，將不勝感激。

繼承人一個簡單的滑塊來證明我有什麼... http://jsfiddle.net/D5Qcw/5/

HTML

<div class="wrapper"> 

<div class="header"> 
    <h1>Logo Name</h1> 
    <p class="menu">Menu Button</p> 
</div> 

<div id="carousel"> 
    <ul class="video-list"> 
     <li> 
      <div class="content-wrapper"> 
       <div class="progress-bar"></div> 

       <h2>Content box</h2> 
       <div class="crossRotate">open button</div> 

       <p>Content box paragraph text <br/><br/>Play button 
       </p> 
      </div> 

      <div class="video-wrapper"> 
       <iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe> 
      </div>  
     </li> 
     <li> 
      <div class="content-wrapper"> 
       <div class="progress-bar"></div> 

       <h2>Content box 2</h2> 
       <div class="crossRotate">open button</div> 

       <p>Content box paragraph text <br/><br/>Play button 
       </p> 
      </div> 
      <div class="video-wrapper"> 
       <iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </li> 
     <li> 
      <div class="content-wrapper"> 
       <div class="progress-bar"></div> 

       <h2>Content box 3</h2> 
       <div class="crossRotate">open button</div> 

       <p>Content box paragraph text <br/><br/>Play button 
       </p> 
      </div> 
      <div class="video-wrapper"> 
       <iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </li> 
     <li> 
      <div class="content-wrapper"> 
       <div class="progress-bar"></div> 

       <h2>Content box 4</h2> 
       <div class="crossRotate">open button</div> 

       <p>Content box paragraph text <br/><br/>Play button 
       </p> 
      </div> 
      <div class="video-wrapper"> 
       <iframe width="100%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </li> 
    </ul>  
</div> <!-- /carousel --> 

</div>  

CSS

.wrapper { 
    position: absolute; 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    margin: 0; 
    padding:0; 
    z-index: 1; 
} 

.header { 
    position: absolute; 
    height: 20em; 
    z-index: 2; 
    width: 100%; 
    display: block; 
    padding-top: 2em; 
} 

h1 { 
    font-size: 20px; 
    color: blue; 
    z-index: 999; 
    float: left; 
} 

h2 { 
    position: absolute; 
    float: left; 
} 

p.menu { 
    position: absolute; 
    color: blue; 
    z-index: 999; 
    float: left; 
    right: 20px; 
} 

p { 
    position: absolute; 
    padding-top: 3em; 
} 

ul { 
    margin: 0; 
    padding: 0; 
} 

ul li { 
    list-style: none; 
} 

#carousel { 
    width: 100%; 
} 

#carousel .video-list { 
    position: relative; 
    width: 400%; 
    height: 100%; 
    transform: translateX(-100%); 
    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    -o-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    animation: slider 40s ease-in-out infinite; 
    -webkit-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite; 
    -moz-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite; 
    -o-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite; 
    -ms-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite; 
} 

@keyframes slider { 
    0% { transform: translateX(0%); } 
    23% { transform: translateX(0%); } 
    26% { transform: translateX(-25%); } 
    51% { transform: translateX(-25%); } 
    54% { transform: translateX(-50%); } 
    79% { transform: translateX(-50%); } 
    82% { transform: translateX(-75%); } 
    97% { transform: translateX(-75%); } 
    100% { transform: translateX(0%); } 
} 

@-webkit-keyframes slider { 
    0% { -webkit-transform: translateX(0%); } 
    23% { -webkit-transform: translateX(0%); } 
    26% { -webkit-transform: translateX(-25%); } 
    51% { -webkit-transform: translateX(-25%); } 
    54% { -webkit-transform: translateX(-50%); } 
    79% { -webkit-transform: translateX(-50%); } 
    82% { -webkit-transform: translateX(-75%); } 
    97% { -webkit-transform: translateX(-75%); } 
    100% { -webkit-transform: translateX(0%); } 
} 

@-moz-keyframes slider { 
    0% { -moz-transform: translateX(0%); } 
    23% { -moz-transform: translateX(0%); } 
    26% { -moz-transform: translateX(-25%); } 
    51% { -moz-transform: translateX(-25%); } 
    54% { -moz-transform: translateX(-50%); } 
    79% { -moz-transform: translateX(-50%); } 
    82% { -moz-transform: translateX(-75%); } 
    97% { -moz-transform: translateX(-75%); } 
    100% { -moz-transform: translateX(0%); } 
} 

#carousel .video-list li { 
    position: relative; 
    width: 25%; 
    height: 100%; 
    overflow: hidden; 
    display: inline-block; 
    float: left; 
} 

#carousel .video-list .content-wrapper { 
    position: absolute; 
    width: 100%; 
    height: 50%; 
    bottom: -130px; 
    z-index: 999; 
    background: rgba(255, 255, 255, 0.9); 
    -webkit-transition: bottom 1s; 
    -moz-transition: bottom 1s; 
    -o-transition: bottom 1s; 
    -ms-transition: bottom 1s; 
    transition: bottom 1s; 
} 

.progress-bar { 
    background: #000; 
    height: 5px; 
    width: 40px; 
    position: relative; 
    animation: mymove 10s infinite; 
    -webkit-animation: mymove 10s infinite; 
    -moz-animation: mymove 10s infinite; 
    -o-animation: mymove 10s infinite; 
    -ms-animation: mymove 10s infinite; 
    animation-timing-function: linear; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
    -o-animation-timing-function: linear; 
    -ms-animation-timing-function: linear; 
} 

@keyframes mymove { 
    from {left:0;} 
    to {right:-97%;} 
} 

@-webkit-keyframes mymove { 
    from {left:0;} 
    to {right:-97%;} 
} 

#carousel .video-wrapper { 
    position: relative; 
    top: 0%; 
    left: 0%; 
    width: 200%; 
    height: 200%; 
    z-index: 2; 
} 

#carousel .video-wrapper iframe { 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    min-width: 50%; 
    min-height: 50%; 
    margin: auto; 
    z-index: 2; 
} 

.crossRotate { 
    position: absolute; 
    font-size: 20px; 
    right: 0; 
    -webkit-transition-duration: 1s; 
-moz-transition-duration: 1s; 
-o-transition-duration: 1s; 
-ms-transition-duration: 1s; 
transition-duration: 1s; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    -ms-transition-property: -o-transform; 
    transition-property: transform; 
    z-index: 999; 
} 

.crossRotate:hover { 
    cursor: pointer; 
} 

Answer 1

我會用JavaScript來實現用戶交互

here是一個簡單的教程。

希望這有助於

這裏是一個的jsfiddle應該給你的想法:)

$(function() { 
    var position = 0; 
    $('#next').on('click', function (e) { 
     e.preventDefault(); 

     position = (position + 25) % 100; 

     $('#carousel .video-list').css('-webkit-transform', 'translateX(-' + position + '%)'); 
    }); 
}); 

http://jsfiddle.net/D5Qcw/6/