Question

我在我的项目中使用bxslider。它在完成1个循环并再次到达第一个滑动时引起跳跃。我在StackOverflow上看到了与此问题相关的问题，但它没有解决我的问题。我不知道是什么导致了这个bug。

代码：

    <ul class="bxslider">
                    <li class = "slide_1">
                        <div class = "header">
                        <h2 class = "heading"> Left Heading </h2> 
                        <h3 class = "inner_heading">Middle Heading</h3>
                            <span id="date" class = "date">Date on right</span>
                        </div>

                        <hr class = "after-heading">
<Here there is a table1>                        
<hr class = "before-2nd-table">
<Here there is table 2>
                        <hr class = "before-key-table">
<Here there is table 3> 
                   </li>
                    <li class = "slide_2">
                        <div class = "header">
                        <h2 class = "heading"> Left Heading </h2> 
                        <h3 class = "inner_heading">Middle Heading</h3>
                            <span id="date" class = "date">Date on right</span>
                        </div>

                        <hr class = "after-heading">
<Here there is a table1>                        
<hr class = "before-2nd-table">
<Here there is table 2>
                        <hr class = "before-key-table">
<Here there is table 3> 
                   </li>
                    <li class = "slide_3">
                        <div class = "header">
                        <h2 class = "heading"> Left Heading </h2> 
                        <h3 class = "inner_heading">Middle Heading</h3>
                            <span id="date" class = "date">Date on right</span>
                        </div>

                        <hr class = "after-heading">
<Here there is a table1>                        
<hr class = "before-2nd-table">
<Here there is table 2>
                        <hr class = "before-key-table">
<Here there is table 3> 
                   </li>

                    <li class = "slide_4">
                        <div class = "header">
                        <h2 class = "heading"> Left Heading </h2> 
                        <h3 class = "inner_heading">Middle Heading</h3>
                            <span id="date" class = "date">Date on right</span>
                        </div>

                        <hr class = "after-heading">
<Here there is a table1>                        
<hr class = "before-2nd-table">
<Here there is table 2>
                        <hr class = "before-key-table">
<Here there is table 3> 
                   </li>

                </ul>

编辑：这就是我初始化它的方式。

        $(window).ready(function () {
            var slider = $('.bxslider').bxSlider({
                autoHover: true,
                auto: true,
                adaptiveHeight: true,
                responsive: true,
                speed: 1500,
                autoControls: true,
                pause: 8000,
            });    
        });

EDIT2：

这是我的CSS。

.slide_1, slide_2, .slide_3, .slide_4 {
    height: 60em;
}

.heading {
    position: absolute;
    top: 1px;
    cursor: pointer;
}
table{
    margin: 0 auto;
}
hr {
    border: 0;
    border-top: 1px solid #EEE;
}
.after-heading {
    margin-bottom: 6px;
}

.before-2nd-table {
    margin-top: 10px;
    margin-bottom: 20px;
}

.before-key-table {
    /*margin-top: 7px;*/
    margin-bottom: 5px;
}
.table > tbody > tr > td {
    border-top: none; 
    padding: 3px;
.inner_heading {
    text-decoration: underline;
    font-weight: bold;
}

有人可以帮忙吗？

bxslider会在第一张幻灯片上跳转

0 个答案: