Positioning arrows on left and right inner sides of image

blumar's Avatar

blumar

26 Feb, 2014 11:54 PM

Hey Dmitry,
The issue that i`m trying to resolve is about positioning left and right arrow on the inner sides of image.
I have image that is resizing depending of browser height and is horizontal centered.
Please take a look at attached scheme.

Thanks in advance,
Sho

  1. Support Staff 1 Posted by Dmitry Semenov on 27 Feb, 2014 05:38 PM

    Dmitry Semenov's Avatar

    Hello,

    Sorry, there is no such option. You'll need to involve some JS to implement this feature, to detect position of image and re-align the arrows. Slider JS API documentation is here - http://dimsemenov.com/plugins/royal-slider/documentation/#api

    Dmitry

  2. 2 Posted by blumar on 27 Feb, 2014 11:29 PM

    blumar's Avatar

    Hey Dmitry,

    thanks. This is what i figured out - close as i can.
    A bit laggy but works for now.
    Wrapping emenents.
    Then repositioning elements.

    jQuery(document).ready(function( $ ) {
    
        $('.rsArrow, .rsFullscreenBtn').wrapAll('<div class="arrow-container">');
    
        var slider = $(".new-royalslider-1").data('royalSlider');
        //slider.ev.on('rsAfterSlideChange', function(event) {
        slider.ev.on('rsAfterSlideChange', function(event) {
            var element = $('.rsSlide > .rsContent:visible').find('img[class*="rsImg"]');
            var currentWidth = element.width();
            $('.arrow-container').animate({'width': currentWidth});
        });
    
        slider.ev.on('rsAfterContentSet', function(event) {
            var element = $('.rsSlide > .rsContent:visible').find('img[class*="rsImg"]');
            var currentWidth = element.width();
            $('.arrow-container').animate({'width': currentWidth});
        });
    
        // Reposition on resize
        $(window).resize(function() {
            var element = $('.rsSlide > .rsContent:visible').find('img[class*="rsImg"]');
            var currentWidth = element.width();
            $('.arrow-container').css('width', currentWidth)
        });
    
    });
    

    Best,
    Sho

  3. Support Staff 3 Posted by Dmitry Semenov on 01 Mar, 2014 08:47 AM

    Dmitry Semenov's Avatar

    To make it a bit smoother, consider using CSS transitions instead of jQuery.animate function.

    Dmitry

  4. 4 Posted by blumar on 01 Mar, 2014 10:21 PM

    blumar's Avatar

    Thanks Dmitry.
    Perfect.
    I`ll go to rate the slider with 10 stars :)

    Sho.

  5. blumar closed this discussion on 01 Mar, 2014 10:21 PM.

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