如何使用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进行用户界面

这是一个简单的教程。

希望这会有所帮助

这是一个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/