Home › Forums › Porto – Responsive HTML5 Template › FAQ’s › How to load different Revolution Slider for different devices
- This topic has 0 replies, 1 voice, and was last updated 9 years, 2 months ago by
Support. This post has been viewed 7390 times
Viewing 1 post (of 1 total)
-
AuthorPosts
-
November 27, 2015 at 9:08 am #10012193
Support
KeymasterLoad 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 } } } });
-
AuthorPosts
Viewing 1 post (of 1 total)
This topic is marked as "RESOLVED" and can not rceive new replies.