Home › Forums › Porto – Responsive HTML5 Template › Revolution Slider
- This topic has 2 replies, 2 voices, and was last updated 8 years, 1 month ago by wardsdesign. This post has been viewed 1957 times
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
February 9, 2016 at 10:24 pm #10013487wardsdesignParticipant
Is it possible to have a Revolution Slider that is contained inside a column? For example, I am using a right side bar design and I would like a slider that fits inside the <div class=”col-md-9″> </div>.
Template Version: 4.5.0February 9, 2016 at 11:15 pm #10013492SupportKeymasterHello, yes, you can see it in a container, like this:
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="slider-container rev_slider_wrapper"> <div id="revolutionSlider" class="slider rev_slider" data-plugin-revolution-slider data-plugin-options='{"sliderLayout": "auto", "delay": 9000, "gridwidth": 1170, "gridheight": 500}'> <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" data-x="177" data-y="180" data-start="1000" data-transform_in="x:[-300%];opacity:0;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div> <div class="tp-caption top-label" data-x="227" data-y="180" data-start="500" data-transform_in="y:[-300%];opacity:0;s:500;">DO YOU NEED A NEW</div> <div class="tp-caption" data-x="480" data-y="180" data-start="1000" data-transform_in="x:[300%];opacity:0;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div> <div class="tp-caption main-label" data-x="135" data-y="210" data-start="1500" data-whitespace="nowrap" data-transform_in="y:[100%];s:500;" data-transform_out="opacity:0;s:500;" data-mask_in="x:0px;y:0px;">WEB DESIGN?</div> <div class="tp-caption bottom-label" data-x="185" data-y="280" data-start="2000" data-transform_in="y:[100%];opacity:0;s:500;">Check out our options and features.</div> <div class="tp-caption" data-x="910" data-y="248" data-start="2500" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;s:1300;"><img src="img/slides/slide-concept-2-1.png" alt=""></div> <div class="tp-caption" data-x="960" data-y="200" data-start="3500" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-2.png" alt=""></div> <div class="tp-caption" data-x="930" data-y="170" data-start="3650" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-3.png" alt=""></div> <div class="tp-caption" data-x="880" data-y="130" data-start="3750" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-4.png" alt=""></div> <div class="tp-caption" data-x="610" data-y="80" data-start="3950" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-5.png" alt=""></div> <div class="tp-caption blackboard-text" data-x="640" data-y="300" data-start="3950" style="font-size: 37px;" data-transform_in="y:[300%];opacity:0;s:300;">Think</div> <div class="tp-caption blackboard-text" data-x="665" data-y="350" data-start="4150" style="font-size: 47px;" data-transform_in="y:[300%];opacity:0;s:300;">Outside</div> <div class="tp-caption blackboard-text" data-x="690" data-y="400" data-start="4350" style="font-size: 32px;" data-transform_in="y:[300%];opacity:0;s:300;">The box :)</div> </li> </ul> </div> </div> </div> </div> </div>
Note the sliderLayout option.
Kind Regards,
Jonas
February 10, 2016 at 2:02 pm #10013505wardsdesignParticipantPerfect. Thank you!
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
This topic is marked as "RESOLVED" and can not rceive new replies.