Hi i want to run this code only when i want to take a print by pressing CTRL+p or clicking button " a href="javascript:window.print()" "

$(".slider").slick('unslick');

Hi i want to run this code only when i want to take a print by pressing CTRL+p or clicking button " a href="javascript:window.print()" "

$(".slider").slick('unslick');

• javascript
• jquery

• Please provide more in this question, a JSFiddle so people can test and provide some of the JavaScript and HTML. Thanks. – YaBCK Commented Oct 12, 2015 at 12:28

3 Answers 3

The way you can do this is by check for the beforePrint event and doing .unslick() when that event is happening.

Here is an example that i've e up with to show you how to do this:

$(function () {
    var $panel = $('<div class="panel">13</div>');
    var slickOpts = {
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
        prevArrow: '.btn-prev',
        nextArrow: '.btn-next'
    };
    // Init the slick
    $('#dashboard').slick(slickOpts);

    var beforePrint = function() {
        $('#dashboard').slick('unslick');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;

});

JSFiddle Example

Depending on what you are trying to do, you could just use a media query or a separate CSS file set to print media to apply different styles for printing.

@media print {
    .slider: {
        display: none;
    }
}

I'm not sure what 'unslick' does exactly, but if you are just trying to hide some elements on the page, you could do that with CSS.

The mentioned jQuery didn't work in every occasion, so I manipulated it with CSS.

This worked for me on slick.js version 1.8.0

@media print {
  .slick-track {
    flex-direction: column !important;
  }
  .slick-list {
    overflow: visible !important;
  }
  .slick-slider .slick-track,
  .slick-slider .slick-list {
    width: auto !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
  }
  .slick-track .slick-slide {
    display: block !important;
    overflow: visible !important;
  }
  .slick-arrow,
  .slick-dots,
  .slick-track .slick-cloned {
    display: none !important;
  }
}