javascript - Initialise slider after jQuery load -
i using jquery slider (swiper) in project. initialising slider works fine if load page, when loading in new content (with slider) html files slider not initialise. current steps:
creating new section:
var section = $('<section class="cd-section overflow-hidden '+newsection+'"></section>').appendto(maincontent);
loading content html file new section
section.load(newsection+'.html .cd-section > *', function(event){...})
;
i'm trying initialise after load event, not working.
section.load(newsection+'.html .cd-section > *', function(event){ if(typeof swiper == "undefined") { console.log("ready rumble"); $.getscript('js/swiper.jquery.min.js', function() { var swiper = new swiper('.swiper-container', { pagination: '.swiper-pagination', paginationtype: 'progress', nextbutton: '.swiper-button-next', prevbutton: '.swiper-button-prev', slidesperview: 'auto', centeredslides: true, spacebetween: 30, grabcursor: true, }); }); } });
how can slider initialise after load event?
i resolved issue using following:
- the index page needs have swiper style in head.
- call
slidername.update(true)
after load event, update slider after dom manipulation.
see http://www.idangero.us/swiper/api further reference on update function.
Comments
Post a Comment