Possible to have thumbnail carousel at bottom of page and on top of the slider image?

Masuga Design's Avatar

Masuga Design

24 Sep, 2012 09:26 PM

We would like our thumbnail carousel to still be at the bottom of the screen, but be literally on top of the main slider image, floating over it. We added a separate link/button to show the carousel. Once a user makes their carousel selection, the carousel hides itself again. The slider image would take up the entire height of the screen real-estate available, but isn't doing so. We're most of the way there on this, but the slider image is always leaving room at the bottom equal to the height of the thumbnails, so when the carousel hides itself, there is empty space there instead of the image taking up the full height of the screen.

We thought the discussion called How to position thumbnails, tabs or bullets above the slider? was our answer, but that is literally about moving the thumbnails to the top of the screen, not "above" or "on top of" the slider. We're not opposed to hacking the script up a bit to make it work in this case, so any pointers on how to achieve this would be much appreciated. Thanks!

  1. 1 Posted by Masuga Design on 25 Sep, 2012 03:37 AM

    Masuga Design's Avatar

    We have this working correctly when the page is first loaded, but any resize of the page causes the slider image to shrink up to leave room for where it calculates the carousel should be. All we're trying to do is force the slider images to always be 100% in height in this particular slideshow, with the carousel floating on top of the current image.

  2. Support Staff 2 Posted by Dmitry Semenov on 25 Sep, 2012 06:32 AM

    Dmitry Semenov's Avatar


    Please send me a link to page you're working on and draw me a picture about how exactly it should look like and I'll help you.


  3. 3 Posted by Masuga Design on 25 Sep, 2012 02:45 PM

    Masuga Design's Avatar

    Hi Dmitry, thanks for the offer to help. This is a very solid script...nice work.

    I set up an example for you here. We have a carousel button at the lower left that calls up the carousel. After selecting an image, the carousel hides itself again.

    We have a couple main issues at the moment.

    1) We want to force the image to be 100% of the viewable area height. This works when first loading the page, but resizing the browser sizes the height of the slider images to less than 100%, and we can't figure out how to force this to happen.

    2) The carousel thumbnails can scroll by dragging in a normal browser situation, but on an iPad, for example, we can't drag the carousel or select an image in it (probably because of some conflict with it sitting on top of the main slider image). If we enable arrows on the thumbs we can scroll them, but we still can't select one.

    Let me know if you need any more information from us. Thanks again.

  4. Support Staff 4 Posted by Dmitry Semenov on 25 Sep, 2012 03:59 PM

    Dmitry Semenov's Avatar
    1. If you want image to fill slider area on any resolution set imageScaleMode:'fill' and optionally imageAlignCenter:true

    2. You style thumbnails element in a weird way, for example you add some height:0option. Nothing is overlayed on top, inspect it with Adobe Shadow(Edge), this might be iPad bug related to overlayed CSS3 animations or not correct styling.


Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac