Search code examples
jqueryhtmlbxslider

bxslider is not working, it just arranges the images

This is one of the example with using bxslider and I did all the things in here I'm not sure the image url is right, but put aside this, bxslider didn't work. the results is not a slider, just arranged like this:

enter image description here

here is my codes

<!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>
Solution

  • Even if you opt out of using a pager or controls, use the bxSlider stylesheet:

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

    There's a couple of minor changes that are optional, the only thing that's really different from this working demo and your code is that the stylesheet was added.

    SNIPPET

        $( 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>