CODEWITHSUNDEEP
javascriptcsssliderresponsive-designbjqs
thomasp423
thomasp423

Reputation: 367

How to make BJQS larger and responsive

I'm trying to make the bjqs larger than it is out of the box as well as utilize its responsive feature. The issue with doing this on the slide animation version of the slider is that I can still see other not in focus slides. I'm using css to size it instead of the js it provides because that doesn't seem to work. It supposedly is supposed to set max values if responsive is true but regardless it doesn't work for me.

Easiest way to see my issue is to download from here http://www.basic-slider.com/ and web dev tools. But here is my code regardless:

css: 

#news-box-advertising {max-width: 100% !important;   }

.bjqs-wrapper {width: 1600px !important; }

.bjqs-slide img {width: 100% !important; }

.bjqs-slide .widgetDropped{ width: 100%; margin: 0px; }
.bjqs-slide .widgetDropped .Panel_contentMiddle{padding: 0px;}
.bjqs-slide .widgetDropped .Panel_contentMiddle > p{display: none;}
.bjqs-slide #ctl00_ContentPlaceHolder1_widgetLayout_rptWidgets_ctl02_widgetContainer_ctl00_pnlFormattedMsgBox { background:transparent; border:0px; max-width: 100% !important; height: 100%;}
.brdcrmhdr + br{display: none;}
 ul.bjqs{ position:relative; list-style:none; padding:0; margin:0; overflow:hidden; display:none;}
li.bjqs-slide{  position:absolute; display:none;}
ul.bjqs-controls{width: 100%; height: 100%; margin: 0 !important; padding: 0; z-index: 99; position: absolute; top: 0; }
ul.bjqs-controls.v-centered li a{position:absolute;width:45px;text-indent:-9999px;  height: 100%; }

js:

$('#news-box-advertising').bjqs({
        commented out // 'height' :  500;
        commented out // 'width' : 1500; 
        'animtype' : 'slide',
        'centermarkers': false,
        'responsive' : true
    });

Upvotes: 0

Views: 2772

Answers (1)

antistandard
antistandard

Reputation: 41

I added 'height' : 'auto',

in my js call. so where you have

height : 500 commented out,

change that to 'height' : 'auto',

and uncomment it so it is read.

I also left width out completely and didn't add any value there in my js.

Hope this helps.

James

Upvotes: 1

Related Questions