Search code examples
javascriptjqueryhtmlrevolution-slider

Revslider slider image data-transition for left and right Navigation


In Revslider When I click left navigation arrow image should come from left side and When I click right arrow image should come from right side

Now I am using below data-transition for every image data-transition='parallaxtoright' image is coming from right even I click left arrow image is coming from right

Html Code Here:

<div class="fullwidthbanner">
<li data-transition="parallaxtoright" data-slotamount="10" data-speed="100"  data-masterspeed="300">

    <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
    <img src="img/slideshow/1.jpg">

</li>
</div>

jQuery Script Here:

        jQuery('#rev_slider_4').show().revolution({
        dottedOverlay: 'none',
        delay: 1500,
        startwidth: 585,
        startheight: 390,

        hideThumbs: 200,
        thumbWidth: 200,
        thumbHeight: 50,
        thumbAmount: 2,


        navigationType: "bullet",
        navigationArrows: "solo",
        navigationStyle: "round",

        touchenabled: 'on',
        onHoverStop: 'on',

        navigationHAlign: "center",
        navigationVAlign: "bottom",
        navigationHOffset: 0,
        navigationVOffset: 20,

        soloArrowLeftHalign: "left",
        soloArrowLeftValign: "center",
        soloArrowLeftHOffset: 20,
        soloArrowLeftVOffset: 0,

        soloArrowRightHalign: "right",
        soloArrowRightValign: "center",
        soloArrowRightHOffset: 20,
        soloArrowRightVOffset: 0,

        shadow: 0,
        fullWidth: 'on',
        fullScreen: 'off',

        stopLoop: 'off',
        stopAfterLoops: -1,
        stopAtSlide: -1,

        shuffle: 'on',

        autoHeight: 'off',
        forceFullWidth: 'on',
        fullScreenAlignForce: 'off',
        minFullScreenHeight: 0,
        hideNavDelayOnMobile: 1500,

        hideThumbsOnMobile: 'off',
        hideBulletsOnMobile: 'off',
        hideArrowsOnMobile: 'off',
        hideThumbsUnderResolution: 0,

        hideSliderAtLimit: 0,
        hideCaptionAtLimit: 0,
        hideAllCaptionAtLilmit: 0,
        startWithSlide: 0,
        fullScreenOffsetContainer: ''
    });

Thank you


Solution

  • Finally I found an Answer from All data-transition

    I used the data-transition='slidehorizontal' for all image.

    It solved my Problem :)