CODEWITHSUNDEEP
javascriptjquery
user6571878
user6571878

Reputation:

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>

Upvotes: 1

Views: 530

Answers (2)

Ivan Karaman
Ivan Karaman

Reputation: 1234

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>

Upvotes: 1

Kaushik Makwana
Kaushik Makwana

Reputation: 2576

Try it

<div class="ji-slider" data-animation="fadeIn"> <div class="ji-active first_slide"> <img src="Images/Slider (1).png"> <p class="ji-caption">This Is First !</p> </div> <div class=last_slide> <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>
If($(".first_slide").css("display") == "block"){
    $(".ji-pre-btn").hide();
    $(".ji-next-btn").show();
}else{
    $(".ji-pre-btn").show();
    $(".ji-next-btn").hide();
}

$(".ji-next-btn").click(function(){
$(".first_slide").hide();
});

$(".ji-pre-btn").click(function(){
$(".first_slide").show();
});

Upvotes: 0

Related Questions