Need to make my Website's slider responsiveness just like a reference website.

ayush.apply's Avatar

ayush.apply

19 May, 2017 07:22 AM

Hello, I m creating a website for a client and my client needs to work on a slider in their website's projects page (http://www.appsofy.com/APY007/projects/csun-valley-performing-arts-center/). I have used RoyalSlider for the same. Just the problem is my client needs the slider looks like the way it works at http://tea.se website, as he has given us this website's homepage slider for reference considering is responsiveness in all kinds of screens as the caption area row under the slider is always there even if I reduce its height to the minimum. Whatever the proportion is the caption will always show at the bottom of the screen without scrolling. Just the image used to crop, but that's ok. Can you guys help me with that as I have created this form of the slider in the first link I've given to you, but cannot lock the caption bar in the bottom of the screen, the way it is functioning at http://tea.se website?

  1. Support Staff 1 Posted by Dmitry Semenov on 19 May, 2017 01:51 PM

    Dmitry Semenov's Avatar

    Hello,

    Slider dimensions can be controlled from Size & Scaling section of options, you're probably looking for auto-scale-slider option, not auto-height.

    More info about scaling at http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

    Dmitry

  2. 2 Posted by ayush.apply on 23 May, 2017 05:15 AM

    ayush.apply's Avatar

    Hello Dmitry,
    Trying to do the same but cannot arrange the viewport proportion as our image size has the ratio of 3:2 inspite of 2:1. This is creating scrolling at laptop or desktop view but not cropping itself as the way I saw in my reference website (http://tea.se). Please have a look at the reference website as the way it is showing the full height image within the slider in mobile /Tab View and giving a strip of white space in the bottom when the slider reaches the tip of the bottom white strip. Need it look the same way.
    Regards,
    Aayush

  3. Support Staff 3 Posted by Dmitry Semenov on 23 May, 2017 06:31 AM

    Dmitry Semenov's Avatar

    The site that you linked disabled all auto-scaling options and calculates size manually via JS, you can set any size to root element of slider at any time.

    E.g. here is an example on how to make it fill 100% width/height. http://jsfiddle.net/DmitrySemenov/Z23Hp/

    http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-str...

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Screen_Shot_2017-05-19_at_12.51.29_PM.png 949 KB
  • Screen_Shot_2017-05-19_at_12.50.56_PM.png 217 KB
  • Screen_Shot_2017-05-19_at_12.50.34_PM.png 1.09 MB
  • Screen_Shot_2017-05-19_at_12.49.57_PM.png 685 KB

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

Generic

? 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