Revolution Slider Slide Change Callback

Home Forums Porto – Responsive HTML5 Template Revolution Slider Slide Change Callback

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10001457
    Support
    Keymaster

    binu_joseph:
    “Hi, This is a nice theme, I purchased it yesterday, I have a question There is a black area down of the image slider in the home page I noticed that the text in the black area ( gray in light home) is static, Can we change the text based on the slide show

    regards Binu”


    #10001459
    Support
    Keymaster

    Hello, the best way to do that is:

    1) Update the HTML, create one DIV (home-intro) for each slide you have (with the content you want to show) and set the attribute data-rel-slide with the slide number:

    <div class="home-intro" data-rel-slide="1">
    	<div class="container">
    
    		<div class="row">
    			<div class="col-md-8">
    				<p>
    					The fastest way to grow your business with the leader in <em>Technology.</em>
    					<span>Check out our options and features included.</span>
    				</p>
    			</div>
    			<div class="col-md-4">
    				<div class="get-started">
    					<a href="#" class="btn btn-lg btn-primary">Get Started Now!</a>
    					<div class="learn-more">or <a href="index.html">learn more.</a></div>
    				</div>
    			</div>
    		</div>
    
    	</div>
    </div>
    
    <div class="home-intro" data-rel-slide="2" style="display: none;">
    	<div class="container">
    
    		<div class="row">
    			<div class="col-md-8">
    				<p>
    					Slide 2 - The fastest way to grow your business with the leader in <em>Technology.</em>
    					<span>Check out our options and features included.</span>
    				</p>
    			</div>
    			<div class="col-md-4">
    				<div class="get-started">
    					<a href="#" class="btn btn-lg btn-primary">Get Started Now!</a>
    					<div class="learn-more">or <a href="index.html">learn more.</a></div>
    				</div>
    			</div>
    		</div>
    
    	</div>
    </div>

    2) Update the js (js/views/view.home.js) and add this:

    sliderApi.on("revolution.slide.onchange",function (e,data) {
    	$(".home-intro").hide();
    	$(".home-intro[data-rel-slide=" + data.slideIndex + "]").show();
    });

    (It should be added after the API is initilized, right here):

    Please let me know if you have any questions.

    Thanks.


    #10001865
    Support
    Keymaster
    This reply has been marked as private.
Viewing 3 posts - 1 through 3 (of 3 total)

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