CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsbxslider
Charanjeet Kaur
Charanjeet Kaur

Reputation: 1197

bxSlider load slide from ajax

Is there a way I can insert a slide in bxSlider from ajax and it does not affect the smoothness!

I want to show the contents of only 1 slide on the page load and then clicking of next or prev will load the content accordingly.

Here is what I tried.

    <div id="slider1">
    <div class="hotProp pager">
    //Here is div content for the first time page load        
    </div>
    </div>

    <script type="text/javascript">
    $(function(){
            page_count = 0;
            var slider = $('#slider1').bxSlider({
            easing:'swing',
            controls: true,
    });

    $('#go-next').click(function(){
                    page_count += 1;                         
                    //send request for next four properties
                    script_name = "~$sf_request->getScriptName()`";
                    $.getJSON(script_name+"/frontend/projects", {page_count: page_count}, function(response){
                    div_content = '<div class="hotProp pager"><div class="clr"></div>';
                    //div_content is content for the next slide
                    $('#slider1').html(div_content);
                    });
       slider.goToNextSlide();
       return false;
       });
 });

It seems like I hijacked the content of slide :P

Please let me know how can I achieve this using API of bxSlider. I tried using buildPager, but couldn't get slideIndex as expected.

Upvotes: 0

Views: 8010

Answers (1)

somedev
somedev

Reputation: 488

well, the bxSlider now has an 'onSlideNext' and 'onSlidePrev' callback option in its settings. These callbacks are called just after you click the prev/next button and before the prev/next transition starts, respectively. you could use them to your advantage. For example : 

$('#your-slider').bxSlider({
     //some default settings here
     onSlideNext : function($slideElement, oldIndex, newIndex){
           //do your ajax here, for example:
           $.get('some-url',someDataObj,function(response){
                 $('#your-slider').append(response);
           });
     }
})

Fine tune as per your requirements, for more details, see their documentation on the available options at http://bxslider.com/options

Upvotes: 2

Related Questions