Simply just add the following script
Script
$('#carousel-example-generic').on('slid', '', function() {
var $this = $(this);
$this.children('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left').addClass("hideElement");
$this.children('.left.carousel-control').hide();
} else{
$this.children('.left').removeClass("hideElement");
}
if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
$this.children('.right').addClass("hideElement");
}else{
$this.children('.right').removeClass("hideElement");
}
});
Add "hideElement" class on left parent element
Html
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
<li data-target="#carousel-example-generic" data-slide-to="1">2</li>
<li data-target="#carousel-example-generic" data-slide-to="2">3</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="slide-content" id="slide-1">
<p class="slide-content-left-1">Someone liked your profile. Now it's your turn.</p>
<p class="right-main">Review these profiles and check which you like.</p>
<p class="slide-content-left-2">When you both like each other, you'll get a match notification.</p>
</div>
</div>
<div class="item">
<div class="slide-content" id="slide-2">
<p class="slide-2-contetnt-1">To like the user, push here on the check mark.</p>
<p class="slide-2-contetnt-2">Or skip the profile by pushing the X mark, to see the next profile.</p>
</div>
</div>
<div class="item">
<div class="slide-content" id="slide-3">
<p>It's your turn now. Like as many as you want.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hideElement" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
Css
.hideElement {display:none !important;}
0 comments: