如何使用javascript/css在纯css旋转木马/幻灯片中导航？

我已经创建了一个简单的幻灯片，只使用CSS3动画和关键帧，我正试图找出如何创建导航箭头，使您能够快速浏览幻灯片

我想要一个“下一个”和“上一个”按钮/箭头，单击该按钮/箭头可滑动到幻灯片中的每个视频。我一直在尝试使用CSS，但运气不太好，我想知道是否有人有一个我可能忽略的解决方案

如有任何建议，将不胜感激

这里有一个简单的滑块来演示我所拥有的。。。

HTML

---

我将使用Javascript进行用户交互

这是一个简单的教程

希望这有帮助

下面是一个JSFIDLE，它应该会让您产生这样的想法：）

---

嘿，谢谢你的推荐，我能很容易地将它与我目前拥有的东西结合起来吗？只需在下一个/上一个按钮中使用javascript，并保留所有其他css？你必须稍微修改你的css，但是的，这对你应该有用。我希望小提琴能帮上忙，这看起来像我需要的一样。谢谢，我也能有一个上一个按钮吗？当然，但我实际上想提供一个想法，而不是一个解决方案；-）这是最新的提琴：如果这符合你的需要，别忘了投票并标记为接受答案。

<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>    

.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;
 }

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

        position = (position + 25) % 100;

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