Javascript 定制的bxSlider下一步按钮在'；s盘旋_Javascript_Html_Css_Bxslider

Javascript 定制的bxSlider下一步按钮在'；s盘旋

javascript html css

Javascript 定制的bxSlider下一步按钮在'；s盘旋,javascript,html,css,bxslider,Javascript,Html,Css,Bxslider,我正在练习定制bxSlider方向按钮。正如你们所看到的，我改变了。bx控制方向a的宽度和高度以放置不同的背景图像。 “上一个”按钮工作正常，但“下一个”按钮似乎很奇怪。当我将鼠标悬停在它上面时，它会出现两个大小不同的相同图标。我怎样才能解决这个问题？图片如下： HTML/JS： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

我正在练习定制bxSlider方向按钮。正如你们所看到的，我改变了。bx控制方向a的宽度和高度以放置不同的背景图像。 “上一个”按钮工作正常，但“下一个”按钮似乎很奇怪。当我将鼠标悬停在它上面时，它会出现两个大小不同的相同图标。我怎样才能解决这个问题？图片如下：

HTML/JS：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bxSlider</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <h1>my beautiful moments</h1>
    <div class="slider">
        <div class="slide"><img src="./img/a.jpg" alt=""></div>
        <div class="slide"><img src="./img/b.jpg" alt=""></div>
        <div class="slide"><img src="./img/c.jpg" alt=""></div>
        <div class="slide"><img src="./img/d.jpg" alt=""></div>
        <div class="slide"><img src="./img/e.jpg" alt=""></div>
        <div class="slide"><img src="./img/f.jpg" alt=""></div>
    </div>

    <script>
        $(document).ready(function() {
            $('.slider').bxSlider({
                mode: 'fade',
                slideWidth: 500,
                auto: true,
                pause: 1800
            });
        });
    </script>
</body>

</html>

我自己想出来的

我必须在css中更多地指定类

CSS:

现在它工作得很好。

我自己想出来的

我必须在css中更多地指定类

CSS:

现在它工作得很好

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    text-align: center;
    text-transform: uppercase;
}

.bx-wrapper {
    box-shadow: none;
    border: none;
    margin: 1rem auto;
}

.bx-wrapper .bx-controls-direction a {
    width: 90px;
    height: 90px;
}

.bx-wrapper .bx-prev {
    left: -10rem;
    background: url('../img/arrow_t3_prev.png');
}

.bx-wrapper .bx-next {
    background: url('../img/arrow_t3_next.png');
    right: -10rem;
}

.bx-wrapper .bx-controls-direction .bx-prev {
    background: url('../img/arrow_t3_prev.png') no-repeat;
    left: -10rem;
}

.bx-wrapper .bx-controls-direction .bx-next {
    background: url('../img/arrow_t3_next.png') no-repeat;
    right: -10rem;
}