Martin Carlin

I was using the excellent slick Carousel and needed to implement next and previous buttons to move the carousel in the desired direction, but also had to show and hide these buttons depending on the current slide as I didn't want to use the infinite functionality in this scenario.

First off, initialise the plugin using your desired options, I'd say that these are the minimum requirement but in this case I also had arrows set to false, dots set to true and was also using the lazyLoad option:

    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1

Then use the slick api to move the carousel when buttons are clicked:

$('.next').click(function() {

$('.previous').click(function() {

and, finally:

$('.steps').on('beforeChange', function(event, slick, currentSlide, nextSlide) {

    if (nextSlide == slick.slideCount - 1) {
    } else if (nextSlide != slick.slideCount - 1 && nextSlide != 0) {
    } else if (currentSlide == 0 || nextSlide == 0) {


I used beforeChange because using the afterChange meant the showing and hiding didn't happen until what felt like to be too late, since the new slide has to be in place before that code is executed.

As you may know, I am using the Bulma flexbox css framework for my personal Ghost theme.

As part of the framework, there are notifications and the framework also provides the ability to include a delete button for the notification, but it is completely static and doesn't do anything - yet.

I also had to add some CSS to fix the button for the notification:

.notification > button.delete {
  border: none;

which is strange as it seems fine on the Bulma site.

In addition to this, I added a new modifier class in the naming convention of the existing classes:

.is-hidden {
  display: none;

This class is then applied to the notification when the delete button is clicked.

To achieve that in jQuery, you can simply use this:

$(document).on('click', '.notification > button.delete', function() {
    return false;

You could optionally remove the element from the DOM completely by chaining the .remove() method, e.g.


See the Pen Bulma CSS Framework - Add Functionality to Dismiss Notifications by Martin Carlin (@martincarlin87) on CodePen.

You might think it’d just be a case of:

$('form input[type="submit"]').attr('disabled','disabled');

but that will prevent the form from submitting because the submit button is now disabled.

A better approach is to add a data attribute to the button and use that to determine if the form has already been submitted:

$('form').submit(function() {
    // when form is submitted for the first time
    // change button text
    // and prevent further form submissions
    if ($('form input[type="submit"]').data('submitted') == '1') {
        return false;
    } else {
        // I've also added a class and 
        // changed the value to make it obvious to the 
        // user that the form is submitting
        // but this is entirely optional
        // and you can customise this as you wish
        $('form input[type="submit"]')
          .attr('data-submitted', '1')


See the Pen jQuery – Prevent Multiple Form Submissions by Martin Carlin (@martincarlin87) on CodePen.