Fullscreen stretch mode

Mr's Avatar

Mr

31 Aug, 2012 09:57 AM

Hi man,

First want to say:

Probably the best slider in the world!

I´ve got a question regarding the "stretch full mode" in "knowledge Base".
Thou I think i got it right, it would be very nice to get a confirmation from the master himself : )

Here is my markup, please check it, thanks man, keep it up!

<style>
    #full-width-slider {
          width: 100%;
          height:100%;
      }
       .fullWidth {
        overflow:hidden;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0px; /* height of thumbs (if not required set to 0) */
        height: auto;
        width: auto;
     }  
</style>
<div class="sliderContainer fullWidth clearfix">
    <div id="full-width-slider" class="royalSlider heroSlider rsMinW">
          
          <div class="rsContent">
            <img class="rsImg" src="../img/full-width/1.jpg" alt="" />
          </div>
          
          <div class="rsContent">
            <img class="rsImg" src="../img/full-width/2.jpg" alt="" />
          </div>
         
          <div class="rsContent">
            <img class="rsImg" src="../img/full-width/3.jpg" alt="" />
          </div>
          
          <div class="rsContent">
                <img class="rsImg" src="../img/full-width/4.jpg" alt="" />
         </div>
         
     </div>
</div>

jQuery(document).ready(function($) {
      $('#full-width-slider').royalSlider({
        arrowsNav: true,
        slidesOrientation: 'horizontal',
        transitionSpeed: 450,
        imageAlignCenter:true,
        allowCSS3OnWebkit:  true,
        numImagesToPreload:2,
        loop: false,
        keyboardNavEnabled: true,
        controlsInside: false,
        imageScaleMode: 'fill',
        arrowsNavAutoHide: false,
        autoHeight: false,
        autoScaleSlider: false,
        controlNavigation: 'bullets',
        thumbsFitInViewport: false,
        navigateByClick: false,
        slidesSpacing: 0,
        startSlideId: 0,
        autoPlay: false,
        transitionType:'move',
        globalCaption: true
      });
});
  1. Support Staff 1 Posted by Dmitry Semenov on 31 Aug, 2012 05:46 PM

    Dmitry Semenov's Avatar

    Hi,

    Markup is correct at first glance. What's the problem? Can you send me link to page?

    Dmitry

  2. 2 Posted by Mr on 31 Aug, 2012 06:30 PM

    Mr's Avatar

    Hi man!
    No problem, it works, awesome !

  3. 3 Posted by ericwilson777 on 31 Aug, 2012 11:40 PM

    ericwilson777's Avatar

    NICE JOB!!!

  4. Support Staff 4 Posted by Dmitry Semenov on 01 Sep, 2012 07:01 AM

    Dmitry Semenov's Avatar

    Btw, just noticed, any reason why you wrap img's with div's?

    It can be just

    <div class="sliderContainer fullWidth clearfix">
        <div id="full-width-slider" class="royalSlider heroSlider rsMinW">
    
                <img class="rsImg" src="../img/full-width/1.jpg" alt="" />
    
                <img class="rsImg" src="../img/full-width/2.jpg" alt="" />
    
                <img class="rsImg" src="../img/full-width/3.jpg" alt="" />
    
                <img class="rsImg" src="../img/full-width/4.jpg" alt="" />
    
         </div>
    </div>
    

    Dmitry

  5. 5 Posted by Mr on 02 Sep, 2012 04:26 PM

    Mr's Avatar

    Hi,

    Yes I know.
    I just had a lot of objects before in div class "rsContent" and wanted contoll of what to display in each slide.

  6. Dmitry Semenov closed this discussion on 03 Sep, 2012 07:00 AM.

Comments are currently closed for this discussion. You can start a new one.

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