Ali Bahaari Ali Bahaari - 4 months ago 14
Javascript Question

How to not display Prev Button & Next Button in Slider?

I wanted if First Slide of slider is showing to user Prev Button shouldn't show & when Last Slide is showing, Next Button shouldn't show ...

I have wrote these codes but doesn't work ... :

Note: Every Slide that has .ji-active Class, Shows to user ...

if ($('.ji-slider div:last').hasClass('ji-active')) {
$('.ji-next-btn').css('visibility', 'hidden');
} else {
$('.ji-next-btn').css('visibility', 'visible');
}

if ($('.ji-slider div:first').hasClass('ji-active')) {
$('.ji-pre-btn').css('visibility', 'hidden');
} else {
$('.ji-pre-btn').css('visibility', 'visible');
}


What is my mistake ?

This is my HTML :

<div class="ji-slider" data-animation="fadeIn">
<div class="ji-active">
<img src="Images/Slider (1).png">
<p class="ji-caption">This Is First !</p>
</div>
<div>
<img src="Images/Slider (2).png">
<p class="ji-caption">This Is Second !</p>
</div>
<button type="button" class="ji-pre-btn">&#10094;</button>
<button type="button" class="ji-next-btn">&#10095; </button>
</div>

Answer

Use simple css, left arrow hidden for first slide and right arrow for last =)

if it didn't work add !important like visibility: hidden !important;

select first slide with class .ji-active than go to sibling with class .ji-pre-btn and hide, for last slide i use :last-of-type selector because you need select last div if use :last-child then be selected "next" button.

sorry for my bad English.

img{
  display:block;
  background-color: black;
  width: 100px;
  height: 100px;
}
.ji-slider{
  background-color: #eee;
}
.ji-slider > div:first-child.ji-active ~ .ji-pre-btn{
  visibility: hidden;
}
.ji-slider > div:last-of-type.ji-active ~ .ji-next-btn{
  visibility: hidden;
}
<div class="ji-slider" data-animation="fadeIn">
            <div class="ji-active">
                <img src="Images/Slider (1).png">
                <p class="ji-caption">This Is First !</p>
            </div>
            <div>
                <img src="Images/Slider (2).png">
                <p class="ji-caption">This Is Second !</p>
            </div>
            <button type="button" class="ji-pre-btn">&#10094;</button>
            <button type="button" class="ji-next-btn">&#10095; </button>
        </div>

Comments