images slideshow for mobile display

7 posts by 3 authors in: Forums > CMS Builder
Last Post: March 19, 2014   (RSS)

By kitsguru - March 16, 2014 - edited: March 16, 2014

I use bxslider http://bxslider.com/

responsive, supports touch screens

Jeff Shields

Hi,

I've not personally used it, but I know a lot developers have started using bootstrap:

http://getbootstrap.com/

It's a HTML/CSS/JS framework designed to make responsive design easier. It also has an image carousel built into it.

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By willydoit - March 19, 2014 - edited: March 19, 2014

Hi kitsguru  thanks for that, the bxslider program works fine if all images are the same size but unfortunately ours arent so we run into display issues with that one.

By willydoit - March 19, 2014

Thanks Greg,

We already have the site design pretty much in place, its just the slider we need and we need one which doesnt create incompatibilities with other items within the design, we already have the jquery nivo slider in use and I did think it would be a simpe job to add another instance of that into the page but even that runs into issues. I have found a very simple responsive slider which works for me but am just running into issues with the display due to the images being different sizes. I need to somehow have the display in some form of container so that the different image heights dont cause the rest of the page to jump up or down on each image change making it unreadable,

The simple solution was to place it into a table with a fixed height equal to the largest image height that would be displayed which works okay, however the fixed height table isnt responsive and so when viewed on a mobile although the images are smaller I end up with lots of unwanted white space above and below because the table still allocates the height set at 450px.

I am afraid that my css knowledge isnt sufficient to know how to create an alternative to the table that would in itself be responsive and logic tells me that it isnt possible to create something with a fixed height and is also responsive so not sure where I go from here.

Hi willydoit,

I've posted some CSS which might help in this thread:

http://www.interactivetools.com/forum/forum-posts.php?Thumbnail-resizing-issue-79377

If your slide show system allows you to use div tags as well as image tags either of these might be a good solution.

This might be something we could help you with via consulting. If you send an e-mail to consulting@interactivetools.com, we can give you an estimate to fix the issue. 

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By kitsguru - March 19, 2014

Actually there is a setting in bxslider to account for this:

adaptiveHeight

I also have images of different sizes and this seem to handle it for me, I just set the width to the same and let height float.

Jeff Shields