Setting property of plugin dynamically based on browser width

I am currently implementing a accordion image slider into a project and the slider has the following optional settings.

$("#accordion").awsAccordion({
    type: "horizontal",
    cssAttrsHor: {
        ulWidth: "responsive",
        liHeight: 500,
        liWidth: 50
    },
    cssAttrsVer: {
        ulWidth: "responsive"
    },
    startSlide: 2,
    openCloseHelper: {
        openIcon: "plus",
        closeIcon: "minus"
    },
    openOnebyOne: true,
    classTab: "small",
    slideOn: "click",
    autoPlay: true,
    autoPlaySpeed: 3000
})

Where it says: type:"horizontal", I want to change this to: type:"vertical", When the browser width is under 768px, is that even possible.

Answers 1

  • try to make it variable

    $(function(){
    var x;
    if(window.width<786){
    x = "vertical";}else{
    x= "horizontal";}
    });
    

    and then you put your code here as defined below

    $("#accordion").awsAccordion({
      type: x , 
      cssAttrsHor:{
          ulWidth:"responsive",
          liHeight:500,
          liWidth:50
      },
    

Related Articles