分類: 方法

上面例子運行效率很差，在低版本的火狐中竟不能運行，所以如果真要做CSS 3D Cube是不推薦的。性能更佳的案例請參考：Create a CSS Cube。

本文更新於 2016/10/20。

其实这个sliderkit之前介绍过，只是那篇没有自适应的功能。用jquery实现元素的自适应，其实很简单。要实现这个slider自适应首先要设置这个slider属于photoslider-mini类自适应尺寸，然后让slider中的图片自适应尺寸。通过如下代码：

$(document).ready(function(){
    //slider图片尺寸是 960px*340px， container是slider的父容器
    var sliderWidth=$("div.container").width()>960 ? 960 : $("div.container").width();
    $("div.photoslider-mini").css({"width":sliderWidth,"height":sliderWidth*340/960});
    //如果使用了bootstrap的话，只要给img添加.img-responsive就可以了，效果更好
    $(".sliderkit-panel > img").css({"width":sliderWidth,"height":sliderWidth*340/960});
});

效果：

最终失败了，估计是和sliderkit的原理有关。另外还了解到要调用WordPress的jquery要像下面这样，因为它设置了jQuery.noConflict();

    jQuery(document).ready(function($) {
        //显示jquery版本号
        alert($.fn.jquery);
    });