Major issues with jQuery Slider answer (bjqs)

Question

I am working with this core jQuery Slider (bjqs) and trying to get it working efficiently. Their changelog says its responsiveness is in beta, so I guess it's kind of elegant.

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

There are basically two problems, and both of them are related to loading a page with a small screen size (width of a mobile phone):

• Images do not load proportionally and do not fit 100%
• When you resize the browser, the positioning becomes spoiled and even starts duplicating images and folding them vertically. Updating the page fixes this, but of course it is unacceptable

Also, in bjqs-1.3.min.js my width is 854px and the height is up to 481px. It was originally set to 400x300 or something like that. I am wondering if this is the source of my problem. If I remove these attributes w and h, although all this will not work.

Answer 1

I have a similar problem (about resizing the browser window), but finally I fixed it (or hacked, you called it):

When you initialize the plugin, you can determine the size (for example, width ) of the slider - and you should set the maximum possible value, as this will be the maximum size of one slide on your page (it’s a shame that the official documentation does not describe it this way) - so this Your (device) screen size should be:

 width: window.screen.width, 

and don't forget to make it responsive:

 responsive: true, 

and after the slider is initialized (it can be placed at the end of the document). You must fire the resize event to resize your slider to the current browser size (because if the window is not maximal, the slider will be larger than it and it will not be displayed 100%):

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

It works for me on the latest firefox and chrome - not tested on IE and other things.

PS. In case you use slider paganing bullets and you want to keep them horizontal in the center. You must add this code before triggering the resize event:

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

Answer 2

I tried several different browsers. I would say that this has more than one or two small mistakes when it comes to responsiveness.

Instead of fixing all the problems you encountered, in your opinion, were you looking for the one that was created to respond from the very beginning?

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

Answer 3

I had a problem when everything worked quickly, except for the initial loading on a smaller screen, like a smartphone. You could see the problem in my browser when I was squeezing the screen. This would be fixed when I resized the window. It just wouldn't work with bootstrapping.

I found a fix that worked for me. I grabbed the non-minified version of bjqs-1.3.js and made a quick add. Line 175 began as follows:

 var conf_responsive = function() { 

Then this function has an if , which says the following:

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

I put something inside the THAT if because my type of animation was a “slide”. You may have to do something similar for if(settings.animtype === 'fade'){ conditional if you use fade.

But anyway, inside this condition, if it is under $(window).resize(function() {}) , I called it like this:

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

This is similar to the problem I am facing. Not sure if this is the same thing that was posted here, but it might help someone look for a solution to a related problem.

Answer 4

I would suggest setting the width of your slider to match the width of the max-width of the plugin.

i.e. in this case you have it 100%, it should be 854px.

Then add overflow:hidden; into the slider class so that you don't get the effect of the stack you're talking about.

Answer 5

I did not study the depth in the script due to time limitations. However, for what I would do, make sure the script is in a shell with a set width and height. Then set the script parameter to 100% width and 100% height.

Answer 6

To fix the width problem, you can get the width of the container div in the initialization:

 $(function () { $('#banner-slide').bjqs({ animtype: 'slide', height: 445, width: $("#banner-slide").width(), responsive: true, randomstart: true }); }); 

Answer 7

For those who are looking for a solution, here it is:

decide above to fix the width problem

for height problem, just apply x factor existing between height and width

Example

: if your slider images are two times bigger the longer, apply this:

 $(function () { $('#banner-slide').bjqs({ animtype: 'slide', width: $("#banner-slide").width(), height: $("#banner-slide").width() /2, responsive: true, randomstart: true }); });