Question

嗨我想只在我想通过按CTRL + p或点击按钮＆＃34进行打印时运行此代码; a href="javascript:window.print()" "

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

Answer 1

您可以通过检查beforePrint事件并在事件发生时执行.unslick()来实现此目的。

这是一个我想出来如何做到这一点的例子：

$(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

Answer 2

根据您要执行的操作，您可以使用媒体查询或设置为print媒体的单独CSS文件来应用不同的打印样式。

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

我不确定'unslick'究竟是什么，但如果你只是试图隐藏页面上的某些元素，你可以用CSS做到这一点。

Answer 3

上面提到的 jQuery 并不是在所有情况下都有效，所以我用 CSS 来处理它。

这在 slick.js 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;
  }
}

在打印窗口中销毁滑块

3 个答案: