bxslider multiple slider

run same controls on multiple slider

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<body>
    
    <!-- slider 1 -->
    <ul class="bxslider">
        <div class="hideme">&nbsp;<li class="">Slide 1</li></div>
        <div class="hideme">&nbsp;<li class="content">Slide 2</li></div>
        <div class="hideme">&nbsp;<li class="content">Because everyone has questions.
What is this "jQuery" you speak of?

jQuery is the most popular Javascript framework used today. It is used mostly for DOM manipulation (animating divs, changing dimensions, calculating positioning, etc..). However, it can be used for much more than that, such as AJAX, form validation, etc.. Almost every project in which I have played a role has used jQuery. So get to know it!
Nothing is working. What am I doing wrong?

Here is a list of things to check that should solve most "not working" problems:

    Is the jQuery library included in the <head> of the document?
    The jQuery library needs to be included BEFORE the jquery.bxslider.min.js file.
    Is the jquery.bxslider.min.js file linked properly? Usually people will upload the file to a js directory, then link to it like so: <script src="js/jquery.bxslider.min.js"></script>
    Using Firebug (http://getfirebug.com/), check the console for any errors. Any Javascript errors can and will prevent the slider from functioning properly.
    Are you calling .bxSlider() inside of a $(document).ready() call? For more info on the .ready() call, click here.

Does the parent element have to have the class "bxslider"?

Nope! The slider does not care if the parent element (<ul> in the homepage example) has a classname. Simply target the parent element using any jQuery selector you desire. The following example is a completely legit slider setup:</li></div>
        <div class="hideme">&nbsp;<li class="content">Slide 4</li></div>
        <div class="hideme">&nbsp;<li class="content">Slide 5</li></div>
   ...

JavaScript

jQuery(document).ready(function($){
    
    // launch bxslider
    var $contents = $('.bxslider .hideme');
    
    $('.bxslider').bxSlider({
        infiniteLoop: false,
        adaptiveHeight: true,
        onSlideBefore : function($slideElement, oldIndex, newIndex){ 
            $contents.eq(newIndex).find('li.content').hide()
        },
        onSlideAfter :  function($slideElement, oldIndex, newIndex){ 
            setTimeout(function(){
                $container = $contents.eq(oldIndex); 
                var $blankDiv = $("<div></div>");
                $blankDiv.append($container.find('li.content').html())
                var height = $blankDiv.height();
                $blankDiv.css('height', $blankDiv.height());
            },200);
            $contents.eq(oldIndex).find('li.content').show()       
        },
        onSliderLoad : function(index){
            $contents.eq(index).removeClass('content');
        }
    });
        
});