slides show before initialization in 100% width slider,

tminto's Avatar

tminto

23 Jun, 2015 07:51 PM

Hello!
 
I am using the content slider for our mobile website. The content slider is set to width of 100% (and max-width 650px). All the slides flash for a moment before they are hidden so I'm trying to figure out how to fix that. I know there is another similar topic already posted but I can't seem to figure out a fix for it. Here is my code:

<style type="text/css">
    .contentSlider {
    width: 100%;
    max-width:650px;
    margin:auto;
    }
    .contentSlider,
    .contentSlider .rsOverflow,
    .contentSlider .rsSlide,
    .contentSlider .rsVideoFrameHolder,
    .contentSlider .rsThumbs {
    background: #eee;
    color: #000;
    }
    .contentSlider .rsSlide,
    .contentSlider .rsOverflow {
    background: #eee;
    }
    .contentSlider h3 {
    font-size: 24px;
    line-height: 31px;
    margin: 12px 0 8px;
    font-weight: bold;
    }
    .contentSlider img {
    max-width: 100%;
    height: auto;
    display: block;
    }
    .content-slider-bg {
    width: 86%;
    padding: 24px 7%;
    background: #eee;
    }

</style>
<div class="content-slider-1 royalSlider contentSlider rsUni">
<div>
<img class="rsImg" src="/Images/PageGraphics/9998/MOBILE/screen1.jpg" data-rsw="850" data-rsh="905">
</div>
<div>
<img class="rsImg" src="/Images/PageGraphics/9998/MOBILE/screen2.gif" data-rsw="850" data-rsh="905">
</div>
<div>
<img class="rsImg" src="/Images/PageGraphics/9998/MOBILE/screen3.jpg" data-rsw="850" data-rsh="905">
</div>
<div>
<img class="rsImg" src="/Images/PageGraphics/9998/MOBILE/screen4.jpg" data-rsw="850" data-rsh="905">
</div>
<div>
<img class="rsImg" src="/Images/PageGraphics/9998/MOBILE/screen5.jpg" data-rsw="850" data-rsh="905">
</div>
</div>
<script>
function ShowSlider() {
// Please note that autoHeight option has some conflicts with options like imageScaleMode, imageAlignCenter and autoScaleSlider
// it's recommended to disable them when using autoHeight module
$('.content-slider-1').royalSlider({
autoHeight: true,
arrowsNav: true,
fadeinLoadedSlide: false,
controlNavigationSpacing: 10,
controlNavigation: 'bullets',
imageScaleMode: 'none',
imageAlignCenter:false,
loop: false,
loopRewind: true,
numImagesToPreload: 6,
keyboardNavEnabled: true,
sliderTouch: true,
arrowsNavAutoHide: false,
arrowsNavHideOnTouch: false,
usePreloader: false
});
}

thanks.

  1. Support Staff 1 Posted by Dmitry Semenov on 24 Jun, 2015 01:58 PM

    Dmitry Semenov's Avatar

    Hello,

    Add some class to div elements that you added for each slide (or remove them), and hide them via CSS, e.g.:

    .royalSlider > .your-root-slide-class-name {
        display:none;
    }
    

    http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slid...

    Dmitry

  2. 2 Posted by tminto on 24 Jun, 2015 06:37 PM

    tminto's Avatar

    Hi Dmitry,

    If I put:

    .royalSlider .rsImg

     it does hide the slides, however royalSlider > .rsImage does not do
    anything.
    Why would that be?

    The other thing is that even though
    .royalSlider .rsImg hides those slides, the slide show does not become
    visible again at all.

    Here is the page:
    http://test.yorkphoto.com/Content.aspx?Page=tarbiahelptest

    Thanks for the help,

    Tarbia

  3. Support Staff 3 Posted by Dmitry Semenov on 24 Jun, 2015 07:03 PM

    Dmitry Semenov's Avatar
    <div class="royalSlider ...">
        <div class="your-root-slide-class-name">
          <img class="rsImg" src=..." /> 
        </div>
        <div class="your-root-slide-class-name">
          <img class="rsImg" src=..." /> 
        </div>
        ...
    
    .royalSlider > .your-root-slide-class-name {
    display:none;
    }
    

    or

    <div class="royalSlider ...">
        <img class="rsImg" src=..." /> 
        <img class="rsImg" src=..." /> 
       ...
    
    .royalSlider > .rsImg {
    display:none;
    }
    

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

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