Basic jQuery Slider (bjqs) responsiveness issues

Question

I'm working with this Basic jQuery Slider (bjqs) and trying to get it to work responsively. Their changelog says the responsiveness of it is in "beta", so I'm guessing that's why it's kind of flakey.

Here's the url to the slider I'm implementing: http://test.hetzelcreative.com/hybrid/

There are basically two issues with it & they both have to do with loading the page at a small screen size (mobile phone width):

1. The images don't load proportionately and aren't fitting 100%
2. When you resize the browser up, the positioning gets all messed up and it even starts to duplicate the images and stack them vertically. A page refresh fixes this, but of course that's not acceptable

Also, in bjqs-1.3.min.js I have the width set to 854px and height to 481px. It was originally set to 400x300 or something. I'm wondering if this is the source of my problem. If I remove those w & h attributes though the whole thing doesn't work.

Solution 1

I've got similiar problem (about resizing up browser window) - but finally I've fixed it (or hack, You name it):

When You initialize the plugin, You can define dimensions (e.g. width) of the slider - and You should there put the largest possible value, because it will be the maximum size of single slide on Your page (shame that official documentation doesn't describe it this way) - so it should be Your (device) screen size:

width: window.screen.width,

and don't forget to make it responsive:

responsive: true,

and after initialization of the slider (it can be placed in the end of the document) You should trigger resize event to resize Your slider to current browser size (because if window won't be maximized slider will be bigger than it and not visible in 100%):

$(window).trigger('resize');

It works for me on newest firefox & chrome - not tested on IE & other stuff.

PS. In case if You are using slider pagination bullets and You want to keep them centered horizontally You should add this code before triggering resize event:

$(window).resize(function(){
  $('yourSliderId .bjqs-markers.h-centered').css({'left':0});
});

Solution 2

I had the issue where I got everything working responsively, except for the initial load on a smaller screen, like a smart phone. You could see the problem in my browser when I shrunk the screen down. It would be fixed when I resized the window though. It just would not work on the initial load.

I found a fix that worked for me. I grabbed the un-minified version of the bjqs-1.3.js and made a quick addition. Line 175 started out like this:

var conf_responsive = function() {

Then there is an if statement within that function that say this:

if(settings.animtype === 'slide'){

I put something inside THAT if statement, because my animation type was 'slide.' You may have to do something similar for the if(settings.animtype === 'fade'){ conditional if you're using fade.

But anyway, inside that if conditional, beneath the $(window).resize(function() {}), I called it like so:

$(document).ready(
function() {
$(window).trigger('resize'); 
 }
);

That seems to have fixed the issue I was having. Not sure this is the exact same problem that was posted here, but it might help someone looking for a solution to a related problem.

Solution 3

I gave this a try in a few different browsers. I'd say it has more than one or two small bugs when it comes to responsiveness.

Instead of trying to fix all of the problems bjqs has have you considered looking for one that was designed for responsiveness from the start instead?

• SequenceJS, looks very active and has a large github following
• FlexSlider, also has a large github following but the issues list looks a little long depending on which browsers you are targeting/etc

Comments

[Trevan Hetzel]

Problem is, the width is 100% of the body, so that doesn't work

[Trevan Hetzel]

But see I want the previous and next images to be visible too. Adding overflow:hidden makes the previous and next images not visible.