禁用 Carousel Prev Next 按钮

Question

Hello I need to disable Previous and Next anchors in the following script if it show first and last div respectively. Here is the fiddle for it. I have several anchors which shows the corresponding div when clicked. I also have Previous and next anchors which when clicked go to next and previous divs respectively.

I am looking to disable "Prev" in case it is showing the first div ie div0 and to disable "Next" in case it is showing the last div ie div4. Also please let me know if the code is broken somewhere. Thanks

    <a class="prev">prev</a>  &nbsp;
    <a class="next">next</a>
    <a class="anc" id="an0">A1</a>
    <a class="anc" id="an1">A2</a>
    <a class="anc" id="an2">A3</a>
    <a class="anc" id="an3">A4</a>
    <a class="anc" id="an4">A5</a>



    <div class="zdivs">
            <div id="q0" class="hidepiece">
                Lorem ipsum dolor sit amet
            </div>
            <div id="q1" class="hidepiece">
                 consectetuer adipiscing elit
            </div>
            <div id="q2" class="hidepiece">
                sed diam nonummy nibh euismod tincidunt 
            </div>
            <div id="q3" class="hidepiece">
                laoreet dolore magna aliquam erat volutpat
            </div>
            <div id="q4" class="hidepiece">
                Ut wisi enim ad minim veniam
            </div>
    </div>

And here is the jQuery for hiding all divs with class name 'hidepiece' and show them one by one on clicking anchors

<!--One by one navigation class anc hidepiece-->
<script>
$(document).ready(function() {
$("div.hidepiece").hide();
$("a.anc").click(function() {
    var id = $(this).attr("id");
    var divId = id.replace("an", "q");
    $("div.hidepiece").hide();
    $("div#" + divId).fadeIn("slow");
    $("#zdivs").scrollTop(0);//scrolls zdiv to top
  });
});
</script>

<!--previous next class zdivs-->
<script>
$(document).ready(function(){
$(".zdivs div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$(".next").click(function(){
  $("#zdivs").scrollTop(0);
    if ($(".zdivs div:visible").next().length != 0)
        $(".zdivs div:visible").next().fadeIn("slow").prev().hide();
    else {
        $(".zdivs div:visible").hide();
        $(".zdivs div:first").fadeIn("slow");
    }
    return false;
});

$(".prev").click(function(){
  $("#zdivs").scrollTop(0);
    if ($(".zdivs div:visible").prev().length != 0)
        $(".zdivs div:visible").prev().fadeIn("slow").next().hide();
    else {
        $(".zdivs div:visible").hide();
        $(".zdivs div:last").fadeIn("slow");
    }
    return false;
  });
});
</script>

Answer 1

Actually this is all you need:

 $('.Gal').each((i, Gal) => { let c = 0; // Counter to keep track of current slide index const $slides = $('.Gal-slides > *', Gal), $prev = $('.Gal-prev', Gal), $next = $('.Gal-next', Gal), $buttons = $('.Gal-nav button', Gal), tot = $slides.length, anim = () => { $slides.removeClass('is-active').eq(c).addClass('is-active'); $buttons.removeClass('is-active').eq(c).addClass('is-active'); // Comment the following lines if you want always PREV/NEXT visible $prev.toggle(c > 0); $next.toggle(c < tot - 1); }; $prev.add($next).on('click', ev => { c = ev.currentTarget == $next[0] ? ++c : --c; if (c > tot - 1) c = 0; if (c < 0) c = tot - 1; anim(); }); $buttons.on('click', ev => { c = $buttons.index(ev.currentTarget); anim(); }); anim(); // init });

 .Gal { position: relative; height: 100px; } .Gal-slides > * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #ddd; transition: 0.4s; opacity: 0; visibility: hidden; pointer-events: none; } .Gal-slides > *.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .Gal-prev, .Gal-next { position: absolute; top: 50%; transform: translateY(-50%); } .Gal-prev { left: 0; } .Gal-next { right: 0; } .Gal-nav { position: absolute; bottom: 0; width: 100%; text-align: center; } .Gal-nav button.is-active { background: red; }

 <div class="Gal"> <div class="Gal-slides"> <div class="is-active">1 Lorem ipsum dolor sit amet</div> <div>2 consectetuer adipiscing elit</div> <div>3 sed diam nonummy nibh euismod tincidunt</div> <div>4 laoreet dolore magna aliquam erat volutpat</div> <div>5 Ut wisi enim ad minim veniam</div> </div> <button type="button" class="Gal-prev">Prev</button> <button type="button" class="Gal-next">Next</button> <div class="Gal-nav"> <button type="button" class="is-active">1</button> <button type="button">2</button> <button type="button">3</button> <button type="button">4</button> <button type="button">5</button> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

Answer 2

Check the visibility of Div - q0 and Div q4.

if (!$("").css('visibility') === 'hidden') { }

Accoridng to the return value enable and disable next and prev buttons