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

Share Improve this question Follow edited Oct 14, 2015 at 12:46 bytecode77 14.9k3131 gold badges117117 silver badges149149 bronze badges asked Oct 12, 2015 at 12:23 rmarifrmarif 54844 silver badges1313 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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;
  }
}