Home Forums Porto Template FAQ’s How to load different Revolution Slider for different devices

This topic contains 0 replies, has 1 voice, and was last updated by  Support 3 years ago. This post has been viewed 3084 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #10012193

    Support
    Keymaster

    Load different Revolution Slider for Desktop / Mobile:

    HTML:

    <!-- Desktop Revolution Slider Start -->
    <div class="slider-container rev_slider_wrapper hidden">
    	<div id="revolutionSliderDesktop" class="slider rev_slider">
    		<ul>
    			<li data-transition="fade">
    				<img src="img/slides/slide-bg.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="tp-caption top-label"
    					data-x="center"
    					data-y="center"
    					data-start="500"
    					data-transform_in="y:[-300%];opacity:0;s:500;">DESKTOP</div>
    
    			</li> 
    		</ul>
    	</div>					
    </div>
    <!-- Desktop Revolution Slider End -->
    
    <!-- Mobile Revolution Slider Start -->
    <div class="slider-container rev_slider_wrapper hidden">
    	<div id="revolutionSliderMobile" class="slider rev_slider">
    		<ul>
    			<li data-transition="fade">
    				<img src="img/slides/slide-bg.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="tp-caption top-label"
    					data-x="center"
    					data-y="center"
    					data-start="500"
    					data-transform_in="y:[-300%];opacity:0;s:500;">MOBILE</div>
    
    			</li> 
    		</ul>
    	</div>
    </div>
    <!-- Mobile Revolution Slider End -->

    (js/custom.js)

    var $revolutionSliderElem = '';
    
    if($.browser.mobile) {
    	$revolutionSliderElem = $('#revolutionSliderMobile');
    	$revolutionSliderDisabled = $('#revolutionSliderDesktop');
    } else {
    	$revolutionSliderElem = $('#revolutionSliderDesktop');
    	$revolutionSliderDisabled = $('#revolutionSliderMobile');
    }
    
    $revolutionSliderDisabled.parent().remove();
    $revolutionSliderElem.parent().removeClass('hidden');
    
    $revolutionSliderElem.revolution({
    	sliderType: 'standard',
    	sliderLayout: 'fullwidth',
    	delay: 9000,
    	gridwidth: 1170,
    	gridheight: 500,
    	spinner: 'spinner3',
    	navigation: {
    		keyboardNavigation: 'off',
    		keyboard_direction: 'horizontal',
    		mouseScrollNavigation: 'off',
    		onHoverStop: 'off',
    		touch: {
    			touchenabled: 'on',
    			swipe_threshold: 75,
    			swipe_min_touches: 1,
    			swipe_direction: 'horizontal',
    			drag_block_vertical: false
    		},
    		arrows: {
    			enable: true,
    			hide_onmobile: false,
    			hide_under: 0,
    			hide_onleave: true,
    			hide_delay: 200,
    			hide_delay_mobile: 1200,
    			left: {
    				h_align: 'left',
    				v_align: 'center',
    				h_offset: 30,
    				v_offset: 0
    			},
    			right: {
    				h_align: 'right',
    				v_align: 'center',
    				h_offset: 30,
    				v_offset: 0
    			}
    		}
    	}
    });

Viewing 1 post (of 1 total)