bxslider 不工作，它只是安排图像

Question

这是使用 bxslider 的示例之一，我在这里完成了所有操作我不确定图像 url 是否正确，但撇开这个不谈，bxslider 没有用。结果不是滑块，只是这样排列的：

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bxSlider</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script>
    $( function () {
        var mySlider = $( '#slide_banner' ).bxSlider( {
            mode: 'horizontal',
            speed: 500,        
            pager: false,     
            moveSlides: 1,    
            slideWidth: 100,  
            minSlides: 4,      
            maxSlides: 4,     
            slideMargin: 5,   
            auto: true,       
            autoHover: true,   
            controls: false   
        } );

        $( '#prevBtn' ).on( 'click', function () {
            mySlider.goToPrevSlide();  
            return false;              
        } );


        $( '#nextBtn' ).on( 'click', function () {
            mySlider.goToNextSlide(); 
            return false;
        } );
    } );
</script>
<style>
    * { margin: 0; padding: 0; }
    #banner_wrap { position: relative; width: 500px; margin: 0 auto; }
    #prevBtn { position: absolute; left: 0; top: 10px; }
    #nextBtn { position: absolute; right: 0; top: 10px; }
</style>
</head>

<body>
<div id="banner_wrap">
    <ul id="slide_banner">
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/nature" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/sports" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/transport" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/nightlife" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/abstract" alt="">
            </a>
        </li>            
    </ul>

    <p>
        <a href="#" id="prevBtn">
            <img src="images/prev_btn.png" >
        </a>
    </p>
    <p>
        <a href="#" id="nextBtn">
            <img src="images/next_btn.png">
        </a>
    </p>

</div>
</body>
</html>

Answer 1

即使您选择不使用寻呼机或控件，也可以使用 bxSlider 样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">

有几个可选的小更改，唯一与此工作演示和您的代码真正不同的是添加了样式表。

片段

    $( function () {
        var xSlider = $( '#slide_banner' ).bxSlider( {
            speed: 500,        
            pager: false,     
            moveSlides: 1,    
            slideWidth: 100,  
            minSlides: 4,      
            maxSlides: 4,     
            slideMargin: 5,   
            auto: true,       
            autoHover: true,   
            controls: false   
        } );

        $( '#prevBtn' ).on( 'click', function () {
            xSlider.goToPrevSlide();  
            return false;              
        } );


        $( '#nextBtn' ).on( 'click', function () {
            xSlider.goToNextSlide(); 
            return false;
        } );
    } );

* { margin: 0; padding: 0; }
    #banner_wrap { position: relative; width: 500px; margin: 0 auto; }
    #prevBtn { position: absolute; left: 0; top: 10px; }
    #nextBtn { position: absolute; right: 0; top: 10px; }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bxSlider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script>

</script>
<style>
    
</style>
</head>

<body>
<div id="banner_wrap">
    <ul id="slide_banner">
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/nature" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/sports" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/transport" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/nightlife" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://lorempixum.com/100/75/abstract" alt="">
            </a>
        </li>            
    </ul>

    <p>
        <a href="#" id="prevBtn">
            <img src="https://cdn1.iconfinder.com/data/icons/general-9/500/left_arrow-48.png" >
        </a>
    </p>
    <p>
        <a href="#" id="nextBtn">
            <img src="https://cdn1.iconfinder.com/data/icons/general-9/500/right_arrow-48.png">
        </a>
    </p>

</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
</body>
</html>

bxslider 不工作，它只是安排图像

bxslider is not working, it just arranges the images

html

jquery

bxslider

片段