Question

我刚刚创建了css以显示在旋转木马/滑块中，如果图像通过div但我无法创建下一个箭头并且返回以逐个玩拇指

这是我的完整css和html，没有javascript代码https://jsfiddle.net/vydxam3y/

我不知道如何使用javascript来完成此操作。

这是我的css：

.thumbnail-slider {
    position: relative;
    overflow: hidden;
    visibility: visible;
    *zoom: 1
}
.thumbnail-slider ul{list-style:none;padding:0;margin:0;width:2000em}
.thumbnail-slider ul li {
    float: left;
}
.thumbnail-slider .thumb+a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.thumbnail-slider .arrow {
    background: #000;
    background: rgba(0, 0, 0, 0.5);
    height: 50px;
    opacity: 0;
    padding: 0 10px;
    position: absolute;
    width: 50px;
    z-index: 52;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out false;
    -o-transition: opacity 0.2s ease-in-out false;
    transition: opacity 0.2s ease-in-out
}
.thumbnail-slider .arrow.arrow-left:after,
.thumbnail-slider .arrow.arrow-right:after {
    color: #fff;
    display: block;
    margin: 15px 0;
    text-align: center
}
.thumbnail-slider .arrow.arrow-right {
    right: 0px
}
.noTouch .thumbnail-slider:hover .arrow {
    opacity: 1
}
.noTouch .thumbnail-slider ul {
    position: absolute;
    -webkit-transition: left 0.4s ease-in-out;
    -moz-transition: left 0.4s ease-in-out false;
    -o-transition: left 0.4s ease-in-out false;
    transition: left 0.4s ease-in-out
}
.touch .thumbnail-slider {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto
}
.touch .thumbnail-slider .arrow {
    display: none !important
}
.thumbnail-slider .arrow:after {
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.thumbnail-slider .arrow {
    top: 42px
}
.thumbnail-slider .arrow:after {
    font-size: 20px;
    font-size: 2rem
}
.thumbnail-slider .arrow.arrow-left:after {
     font-family: FontAwesome;
    content: "\f095";
}
.thumbnail-slider .arrow.arrow-right:after {
    font-family: FontAwesome;
    content: "\f095";
}
.thumbnail-slider .video-tag-list img {
    display: block
}
.thumbnail-slider .video-tag-list li.face {
    margin-left: 5px;
    height: 165px;
    width: 113px
}
.thumbnail-slider .video-tag-list li.channel,
.thumbnail-slider .video-tag-list li.category {
    margin-left: 5px;
    height: 165px;
    width: 180px
}
.thumbnail-slider .video-tag-list li:first-child {
    margin-left: 0
}
.thumbnail-slider .video-tag-list li.category img,
.thumbnail-slider .video-tag-list li.face img,
.thumbnail-slider .video-tag-list li.channel img {
    height: 134px
}
.thumbnail-slider .thumb {
    display: block;
    margin-bottom: 3px
}
.thumbnail-slider .thumb:before {
    content: ""
}
.thumbnail-slider .name {
    display: inline-block;
    max-height: 30px;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word
}
.noTouch .video-tag-list li:hover .thumb:before,
.noTouch .video-tag-list li.active .thumb:before {
    border-width: 3px
}
.noTouch .video-tag-list .thumb:before {
    border: 0 solid #00b1ff;
    bottom: 0;
    left: 0;
    outline: 1px solid #fff;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 51;
    -webkit-transition: border 0.15s ease-in-out;
    -moz-transition: border 0.15s ease-in-out false;
    -o-transition: border 0.15s ease-in-out false;
    transition: border 0.15s ease-in-out
}
.noTouch .video-tag-list .thumb {
    position: relative
}

我应该使用jquery吗？或者它也可能与纯粹的CSS？

Answer 1

我认为这就是你要找的东西。 http://getbootstrap.com/javascript/#carousel

Answer 2

嘿，为什么不为缩略图滑块采用 owlcarousel 。

它非常易于使用...在这里查看演示：
http://www.owlgraphic.com/owlcarousel/#demo

带有纯CSS或javascript的缩略图滑块

2 个答案: