Move main slider arrows outside container

richard's Avatar

richard

12 Dec, 2012 03:55 PM

Hi,

Can you tell me how to move the main slider arrows outside of the main container? I want to be able to position them below and to the right of the container.

Here's my existing code:




<script id="addJS">jQuery(document).ready(function() { 
  $('#gallery-2').royalSlider({
    fullscreen: {
     enabled: false, // Full screen mode with arrows to click
     nativeFS: true
    },
    controlNavigation: 'thumbnails', // Thumbnail options
     thumbs: {
            orientation: 'vertical',
        fitInViewport:false,
        touch:true,
        drag:true,
        appendSpan:false 
    }, // Main slider options
    transitionType:'fade',
    autoScaleSlider: false, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 600,
    loop: true,
    keyboardNavEnabled: true,
    arrowsNav:true,
    arrowsNavAutoHide:false,
    globalCaption:true,
    imageScalePadding:10, 
    imageAlignCenter:false,
    usePreloader:true,
    numImagesToPreload:4,
    controlsInside:true
 });
// reposition nav to left
   var slider = $('.royalSlider');
   slider.prepend(slider.find('.rsNav'));
});
</script>

Thanks.

  1. Support Staff 1 Posted by Dmytro Semenov on 12 Dec, 2012 10:14 PM

    Dmytro Semenov's Avatar

    Hi,

    Set option controlsInside:false and move them via CSS however you need.

    Or add your own arrows and control them via slider API.

    Dmitry

  2. 2 Posted by richard on 13 Dec, 2012 04:59 PM

    richard's Avatar

    Thanks.

    I'm trying to get a toggle switch that toggles the thumbnails on and off,
    but outside of the container. The best I've come up with is:

    <div class="rsContent">
            <img class="rsImg" src="../img/paintings/1.jpg" alt="This text will
    be IGNORED!" />
            <p class="rsCaption"><a class="plcaption-text"
    href="http://www.mysite.com">This caption text will be used.</a></p>
    <p class="showhide"><a class="show-hide" href="#">Thumbnails</a></p> <!--
    toggle switch -->
        </div>

    but the toggle switch is still inside the Royal Slider container whatever
    positioning I use. Manually inserting the toggle further down in the HTML
    document loses it's positioning relative to the controls when zooming in.

    Thank you for your help.

    Any thoughts?

    Richard

  3. Support Staff 3 Posted by Dmytro Semenov on 13 Dec, 2012 08:50 PM

    Dmytro Semenov's Avatar

    Don't really understand your issue, check this - http://help.dimsemenov.com/discussions/problems/610-is-it-possible-...

    Dmitry

  4. 4 Posted by richard on 14 Dec, 2012 11:04 AM

    richard's Avatar

    The 'Thumbnails' text in the bottom corner can't break out of the container. I'd like to position previous, thumbnails and next all below the container.

  5. Support Staff 5 Posted by Dmytro Semenov on 14 Dec, 2012 11:41 PM

    Dmytro Semenov's Avatar

    To reorder arrows to completely different container outside of slider just use jQuery, after slider initialization:

    $('.rsArrow').appendTo('.new-container');
    

    Dmitry

  6. Dmytro Semenov closed this discussion on 03 Feb, 2013 07:44 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