Reply To: Revolution Slider Slide Change Callback

#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.