Revolution Slider

Home Forums Porto – Responsive HTML5 Template Revolution Slider

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10013487
    wardsdesign
    Participant

    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.0
    #10013492
    Support
    Keymaster

    Hello, 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


    #10013505
    wardsdesign
    Participant

    Perfect. Thank you!


Viewing 3 posts - 1 through 3 (of 3 total)

This topic is marked as "RESOLVED" and can not rceive new replies.