Question

我正在使用BX滑块，与平时略有不同。

这是我的代码：

HTML：

<!-- + HEADER VIDEO SLIDER ... -->
            <div class="view-status-container">
                <div class="inner-container">   
                    <!-- SLIDING INSTRUMENT BACKGROUNDS -->
                    <ul class="screenshot-slider bxslider">
                        <li><div class="environment1"></div></li>
                        <li><div class="environment2"></div></li>
                        <li><div class="environment3"></div></li>
                    </ul>
                </div>
            </div>
            <!-- - HEADER VIDEO SLIDER ... -->

CSS：

/* VIEW STATUS ... */
.view-status-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-color: #939393;
}
.view-status-container .inner-container {
    width: 100%;
}
.screenshot-slider {
    display: block;
    margin: 0 auto;
    padding: 0px;
    list-style: none;
}
.screenshot-slider li {
    margin: 0px;
    padding: 0px;
}
.screenshot-slider img {
    width: 100%;
}
.environment1 {
    background-image: url(images/set_the_tone-willheader.jpg);
    background-repeat: none;
    background-position: right center top;
    background-size: cover;
    width: 100%;
    height: 400px;
}
.environment2 {
    background-image: url(images/set_the_tone-willheader.jpg);
    background-repeat: none;
    background-position: center center top;
    background-size: cover;
    width: 100%;
    height: 400px;
}
.environment3 {
    background-image: url(images/set_the_tone-willheader.jpg);
    background-repeat: none;
    background-position: right center top;
    background-size: cover;
    width: 100%;
    height: 400px;
}
.circle-holder {
    position: relative;
    left: 414px;
    width: 100px;
    margin: 0 auto;
    margin-top: -620px;
}
.circle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0 auto;
    z-index: 9998;
    border-radius: 50%;
    background-color: #65ade9;
    box-shadow: 0px 0px 6px #65b0ea;

}
#circle-1 {

}
#circle-2 {

}

Jquery BXSlider CSS：

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: 7%;
    background: url(../images/slider_arrow_left.png) no-repeat;
}

.bx-wrapper .bx-next {
    right: 7%;
    background: url(../images/slider_arrow_right.png) no-repeat;
}

.bx-wrapper .bx-prev:hover {
    background: url(../images/slider_arrow_left_hover.png) no-repeat;
}

.bx-wrapper .bx-next:hover {
    background: url(../images/slider_arrow_right_hover.png) no-repeat;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 62px;
    height: 112px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

我的代码存在两个不同的问题。第一个问题是，当我将鼠标悬停在左箭头按钮上时，它会消失，当它应该替换为另一个彩色箭头图像时。

我遇到的第二个问题是我无法将滑块图像点击到视频灯箱。

我尝试了很多东西，但却无法让它发挥作用。有人有解决或建议吗？

谢谢！

BXSlider箭头和图像

0 个答案: