一个文件中的多个javascript函数

Question

I used some bootstrap javascript functions and one swiper function in one file. Problem is the swiper function doesnt work if i put it last in the code. If I put it first it works fine but the other functions stop working. How to seperate them correctly so that each function is loaded fine.

/* SIDEBAR */           
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});


/* SIDEBAR COLLAPSE */  
$('.collapse').collapse()
$('.collapse-up').on('click',function(){
$('.collapse').collapse('hide');
});


/* ON/OFF BUTTON */ 
$("[name='checkbox']").bootstrapSwitch();

/* LOGIN MODAL*/  
$('#login').modal(options) ;


/* RATING SLIDER */
$('#rate').slider({
formatter: function(value) {
tooltip: 'always'
return   value + ' % ';
}
});


/* SWIPER */ 
    var swiper = new Swiper('.keyword-swiper', {
    slidesPerView: 2,
    scrollbarHide: true,
    grabCursor: true,
    paginationClickable: true,
    spaceBetween: 0,
    freeMode: true,
});

Answer 1

<!--scrollbar: '.swiper-scrollbar',--> is not valid JavaScript. You need to use the /* */ comment style:

var swiper = new Swiper('.keyword-swiper', {
/* scrollbar: '.swiper-scrollbar', */
slidesPerView: 2,

...

Or the // comment style:

var swiper = new Swiper('.keyword-swiper', {
// scrollbar: '.swiper-scrollbar',
slidesPerView: 2,

...

The JavaScript interpreter tries to interpret <!-- --> (an HTML comment) as JS code.