HTML5 Slideshow Support Product Page
Answered
HTML5 Slideshow with Bootstrap
Asked 24 Jan 2014 08:37:42
1
has this question
24 Jan 2014 08:37:42 David Woolley posted:
How does one get HTML5 Slideshow to be responsive with Bootstrap 2?I've looked at your demo with the Fluid Grid where one sets the width to 100% & the height to 3 different pixel values according to the media query, but not sure how to set this height using Bootstrap.
Also having trouble centering the slideshow in a bootstrap cell - I've tried margin: 0 auto in the css, and aligning the cell content to centre, but this does not work.
Cheers
Dave
Replies
Replied 24 Jan 2014 10:14:31
24 Jan 2014 10:14:31 Teodor Kuduschiev replied:
Hello,
You need to use media queries in order to set the slideshow height on different screen sizes.
You need to use media queries in order to set the slideshow height on different screen sizes.
Replied 24 Jan 2014 11:41:11
24 Jan 2014 11:41:11 David Woolley replied:
Thanks - I could use Nivo Slider that works with Bootstrap. Easier to centre as well.
But my client wants the Ken Burns effect, so ....
Do you mean that HTML Slideshow can only work with Dreamweaver Fluid Grids, or can I use media queries somehow with Bootstrap to achieve this?
Cheers
Dave
But my client wants the Ken Burns effect, so ....
Do you mean that HTML Slideshow can only work with Dreamweaver Fluid Grids, or can I use media queries somehow with Bootstrap to achieve this?
Cheers
Dave
Replied 24 Jan 2014 11:48:04
24 Jan 2014 11:48:04 Teodor Kuduschiev replied:
You can use media queries with ANY site design. Note that the Ken burns effect is not available in responsive layout.
Read more about media queries.
Read more about media queries.
Replied 26 Sep 2014 02:27:34
26 Sep 2014 02:27:34 David Slentz replied:
Does this mean the Ken Burns effect is not at all possible to have in a responsive website ... or would it be possible to use the class "visible-lg" and have Ken Burns effect only on the large viewport? And then use something else for the other smaller views?
Replied 26 Sep 2014 07:18:17
26 Sep 2014 07:18:17 Teodor Kuduschiev replied:
Hi David,
Ken Burns effect is not available, when using the slides image placement set to Fill.
You can create a slideshow with ken-burns effect on for the visible-lg container, where the image placement is set to center and the slideshow has a fixed width/height.
Ken Burns effect is not available, when using the slides image placement set to Fill.
You can create a slideshow with ken-burns effect on for the visible-lg container, where the image placement is set to center and the slideshow has a fixed width/height.
Replied 28 Sep 2014 23:30:33
28 Sep 2014 23:30:33 David Slentz replied:
Thanks, Teodor.
I believe I used this concept with the Parallax Slider (following one of your examples) and I created a uniquely sized Parallax Slider for each of the four Bootstrap 3 size containers (lg, md, sm, xs) and it worked well.
Using your instructions, I attempted this on a website for all four Bootstrap containers. It works ... partially. That is, if you do not change the size of the window. If you change the size of the window, then the page needs to be refreshed before it will show up properly.
Is there any work-a-round for this problem, or did I not design I correctly?
I believe I used this concept with the Parallax Slider (following one of your examples) and I created a uniquely sized Parallax Slider for each of the four Bootstrap 3 size containers (lg, md, sm, xs) and it worked well.
Using your instructions, I attempted this on a website for all four Bootstrap containers. It works ... partially. That is, if you do not change the size of the window. If you change the size of the window, then the page needs to be refreshed before it will show up properly.
Is there any work-a-round for this problem, or did I not design I correctly?