sliderkit自适应大小

其实这个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);
    });