Question

I have this bxslider code.

$(function(){
  $('#slider1').bxSlider({
    infiniteLoop: false,
    hideControlOnEnd: true
  });
});

and ihave this ajax code:

$(function () {
$.get('/Scripts/PagedList/PagedList.Mvc.Template.html', function (pagerTemplate) { // get template for pager
// create our pager control object
var pagedList = $.pagedList(
$.template(null, pagerTemplate), // convert into compiled template
function(pageNumber){
return '/home/ajax/#' + pageNumber; // give the pager control the url for loading this page
},
{ pagesToDisplay: 10 } // optional page render options
);

function showNamesAndPagerControl(p) {
$.getJSON("/home/ajaxpage", { page: p ? p : 1 }, function (data) { // default to page 1
$("#namesList")
.attr("start", data.pager.FirstItemOnPage) // update the <li> numbers
.html($("#namesTemplate").tmpl(data.names)); // show the names for this page
$("#namesPager").html(pagedList.render(data.pager)); // update the pager control
}).error(function () {
// if we hit an error (such as a 404), try loading the first page
if (p !== 1) // don't do this if we just tried to load the first page
showNamesAndPagerControl(1);
});
}

// get current url hash (ex: "#3" for page 3)
var hash = window.location.hash;
if (hash)
hash = hash.slice(1); // chop off the leading "#"

// load whatever the currently requested page is
showNamesAndPagerControl(hash);

$(".PagedList-pager a").live("click", function (ev) {
ev.preventDefault(); // don't let the page actually navigate
var pageNumber = $(this).data('page'); // load the pagenumber from the link's data-pager attribute
showNamesAndPagerControl(pageNumber);
window.location.hash = pageNumber; // update the url hash
});
});
});

I want to integrate this ajax to bxslider.

how can i do it?

Answer 1

To use this with ajax is depending on how your data comes back from your server. If it’s coming back and has already been formatted on the server side, then you should be able to just do:

$.getJSON({
    success:function(data){
                $(data).appendTo($('wherever'));
                $(data).find('#yourItem').bxSlider();
            }
}

If it’s not formatted server side, then you just have to format it in your javascript and then apply bxSlider() to it. I feel like maybe I’m not quite getting your question?

If you’re still having problems feel free to clarify a little more if you’re struggling with the ajax portion of it, or applying the bxslider more.