Disable Prev Control on First Slide and Disable Next Control on Last Slide

Disable Prev Control on first slide and disable Next control on last slide

Solution

You can add the css pointer-events: none to your button. That css property disable all event on an element. So something like that.

// Slick stuff
   ...
   onAfterChange: function(slide, index) {
       if(index === 4) {
           $('.slick-next').css('pointer-events', 'none')
       }
       else {
           $('.slick-next').css('pointer-events', 'all')
       }
   }

And something on the same guideline for .slick-prev element.

In that solution you should get the function out of the config and only put a reference to it with something like this.

// Inside slick config
onAfterChange: afterChange

// Below somewhere
var afterChange = function(slide, index) { //stuff here }

Also check to see if there is a way to get the length of the slider and verify it instead of hardcoding 4 in the if statement. You can probably do something like $('.slide').length

Edit

Here's how to implement the afterChange() function.

$(document).ready(function(){
    $('.scrollable').slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 3,
        swipeToSlide: true,
        swipe: true,
        arrows: true,
        infinite: false,
     });

     $('.scrollable').on('afterChange', function (event, slick, currentSlide) {
    
        if(currentSlide === 2) {
            $('.slick-next').addClass('hidden');
        }
        else {
            $('.slick-next').removeClass('hidden');
        }

        if(currentSlide === 0) {
            $('.slick-prev').addClass('hidden');
        }
        else {
            $('.slick-prev').removeClass('hidden');
        }  
    })
});

And some CSS, If you wanna do animation you should do it here.

.slick-prev.hidden,
.slick-next.hidden {
    opacity: 0;
    pointer-events:none;
}

Hide/disable 'Next' button on last slide and 'Prev' button on first slide

To slide through the currently selected gallery, you need to get the slide number determined by the index of the trigger inside the parent gallery

I achieved this with

var slideNum = $(this).closest('.gallery').find('.lightboxTrigger').index(this);

What this does is finds the closest .gallery parent, and then indexes the triggers, instead of indexing all of them from the start.

Here's a working codepen: https://codepen.io/xhynk/pen/GQVWpm?editors=1010

Note: You didn't have any styles so I cobbled together some rather ugly ones real quick, also since your images were relative, I used "lorempixel" - so the actual images won't show up properly, and the slideshow will have 6 of the same image most likely, just for demonstration purposes.

The things of note in the JS are in the initial $('.lightboxTrigger').click(function(e) {

   if( slideNum == 0 ){
        $('.prev').hide();
    } else {
        $('.prev').show();
    }

    if( slideNum == size - 1 ){
        $('.next').hide();
    } else {
        $('.next').show();
    }

And similar code in the prev/next nav: $('body').on('click', '.slide-nav', function(e) {

    if( current == 0 ){
        $('.prev').hide();
    } else {
        $('.prev').show();
    }

    if( current == size - 1 ){
        $('.next').hide();
    } else {
        $('.next').show();
    }

As well as the indexing based on parent gallery mentioned above

var slideNum = $(this).closest('.gallery').find('.lightboxTrigger').index(this);

The gallery is also only filled with the images from the parent gallery instead of all of them, using:

$(this).closest('.gallery').find('.lightboxTrigger').each(function() {

And lastly this code will still fadeOut the gallery when closed as you had it, but it will also destroy it with remove after the fade is completed. This allows a new gallery to be indexed and used, without allowing a user to slide through them in an interconnected manner.

How to hide prev arrow on first item, next arrow on last item, and both arrow if single item: angular based project; no jquery?

from de documentation control via javascript

Bootstrap’s carousel class exposes two events for hooking into
carousel functionality. Both events have the following additional
properties:

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the ). Event type Description slide.bs.carousel Fires
immediately when the slide instance method is invoked.
slid.bs.carousel Fired when the carousel has completed its slide
transition.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

We know now that it's possible control when the carousel when change. But in Angular we don't usually use docuemnt.getElementById else a template reference variable and Viewchild. Also it's better use fromEvent rxjs operator than addEventListener. So first we are going to give template reference variable to our elements

<div #carousel id="carouselExampleControls" class="carousel slide"..>
    <div class="carousel-inner">
        <div #item *ngFor="let carousel of carousels; class="carousel-item">
             ....
        </div>
    </div>
</div>

See the two references variables carousel and item

The idea is create an observable in ngOnInit to know the "active carousel", so, in ngOnInit

  @ViewChildren('item') items:QueryList<ElementRef>
  @ViewChild('carousel',{static:true}) carousel!:ElementRef

  change$:any //<--our observable

  ngOnInit(){
    //enclosed under a setTimeout to give Angular time to
    //give value to "items" and "carousel"
    setTimeout(()=>{
      this.items.first.nativeElement.classList.add("active")
      this.change$=fromEvent(this.carousel.nativeElement,'slide.bs.carousel').pipe(
         startWith({to:0}),
         map((res:any)=>res.to))
    })
  }

See that if we write in our .html some like

Actual slider: {{change$|async}}

We are going to see how goes to 0 to imagenes length-1

Well, we can use this, remove the line before and put the buttons under a ng-container

<ng-container *ngIf="{ item: change$ | async } as actual">
  <button
    *ngIf="actual.item != 0"
    class="carousel-control-prev"
    ...
  >
    ...
  </button>
  <button
    *ngIf="actual.item < carousels.length - 1"
    class="carousel-control-next"
    ...
  >
    ...
  </button>
</ng-container>

(*) the use of the construction *ngIf="{prop:observable|async} as variable is very common and makes that the variable get's the value {prop:0} {prop:1}... etc. This makes not necessary makes two subscription to the observable.

A stackbliltz

How can I disable Previous button on start and Next button on the last slide in jQuery Cycle2 Malsup plugin?

This is actually done automatically if you set the data-cycle-allow-wrap option set to false in the cycle HTML. It will add the class disabled to the prev/next control if it is at the beginning/end of the slideshow. Then you just use CSS to style it so it hidden, or grayed out. No extra Javascript needed.

Here is a fiddle example: http://jsfiddle.net/X3kYY/

How to disable or hide carousel next/prev icons using jquery

This is my another answer as you need with fully customize by jQuery and you can define per page records show in data-showperpage="4".


I hope this below snippet help you lot.

$( document ).ready(function(){  var counting = 0;  var slideCounter = 0;  var slidePerpage = Number($("#records").attr("data-showperpage"));  var countSlides = $('#records tbody tr').length;  var totalSlideCount = Math.ceil(countSlides/slidePerpage);  if (countSlides>1) {    $('.carousel-control-prev').hide();    for (var i = 1; slidePerpage>=i; i++) {    $('#records tbody tr:nth-child('+i+')').addClass('active');   }  }  else if (countSlides==1) {    $('.carousel-control-prev,.carousel-control-next').hide();  }  
  //Prev Functionality  $('.carousel-control-prev').on('click', function(){   slideCounter = slideCounter-slidePerpage;    $('#records tbody tr').removeClass('active');   for(i = slideCounter+1; (slideCounter+slidePerpage)>=i; i++){    //console.log(i); // (4,5,6) // (7,8,9) //....    $('#records tbody tr:nth-child('+i+')').addClass('active');   }   counting = counting-1;   if (counting==0) {      $('.carousel-control-prev').hide();    }    else{      $('.carousel-control-prev,.carousel-control-next').show();    }  });

  //Next Functionality  $('.carousel-control-next').on('click', function(){   slideCounter = slideCounter+slidePerpage;  //3,6,9,12....   $('#records tbody tr').removeClass('active');   for(i = slideCounter+1; (slideCounter+slidePerpage)>=i; i++){    // console.log(i); // (4,5,6) // (7,8,9) //....    $('#records tbody tr:nth-child('+i+')').addClass('active');   }   counting = counting+1;   if (totalSlideCount==counting+1) {      $('.carousel-control-next').hide();    }    else{      $('.carousel-control-prev,.carousel-control-next').show();    }  });  });

.carousel-control-prev,.carousel-control-next{  width: 40px!important;  height: 40px!important;  position: absolute;  top: 0%;  margin-top: 5px;  border: 2px solid #888;  border-radius: 50px;  background: rgba(255,255,255,0.95);  opacity: 1;  cursor: pointer;}.carousel-control-prev-icon {  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;}.carousel-control-next-icon {  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;}.table-pagination tbody tr{ display: none;}.table-pagination tbody tr.active{ display: table-row;} 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container p-3 my-1">  <div class="row">    <div class="col-sm-12 position-relative">      <div class="table-responsive">        <table class="table table-bordered table-pagination" id="records" data-showperpage="4">          <thead>            <tr>              <th>#</th>              <th>S.No</th>              <th>Table #1</th>            </tr>          </thead>          <tbody>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>1</td>              <td>CP</td>            </tr>            <tr>              <td>                <input type="checkbox" id="indeterminate-checkbox" />              </td>              <td>2</td>              <td>BP</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>3</td>              <td>CR</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>4</td>              <td>CR</td>            </tr>            <tr>              <td><input type="checkbox" id="indeterminate-checkbox" /></td>              <td>5</td>              <td>CR</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>6</td>              <td>CP</td>            </tr>            <tr>              <td>                <input type="checkbox" id="indeterminate-checkbox" />              </td>              <td>7</td>              <td>BP</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>8</td>              <td>CR</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>9</td>              <td>CR</td>            </tr>            <tr>              <td><input type="checkbox" id="indeterminate-checkbox" /></td>              <td>10</td>              <td>CR</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>11</td>              <td>CP</td>            </tr>            <tr>              <td>                <input type="checkbox" id="indeterminate-checkbox" />              </td>              <td>12</td>              <td>BP</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>13</td>              <td>CR</td>            </tr>            <tr>              <td><input id="indeterminate-checkbox" type="checkbox" /></td>              <td>14</td>              <td>CR</td>            </tr>            <tr>              <td><input type="checkbox" id="indeterminate-checkbox" /></td>              <td>15</td>              <td>CR</td>            </tr>            <tr>              <td><input type="checkbox" id="indeterminate-checkbox" /></td>              <td>16</td>              <td>CR</td>            </tr>            <tr>              <td><input type="checkbox" id="indeterminate-checkbox" /></td>              <td>17</td>              <td>CR</td>            </tr>            <tr>              <td><input type="checkbox" id="indeterminate-checkbox" /></td>              <td>18</td>              <td>CR</td>            </tr>            <tr>              <td><input type="checkbox" id="indeterminate-checkbox" /></td>              <td>19</td>              <td>CR</td>            </tr>          </tbody>        </table>      </div>      <div class="left carousel-control-prev">        <span class="carousel-control-prev-icon" aria-hidden="true"></span>      </div>      <div class="right carousel-control-next">        <span class="carousel-control-next-icon" aria-hidden="true"></span>      </div>    </div>  </div></div>

var slideIndex = 0;