Question

我正在尝试使用这个图书馆，但我不明白我是怎么做的，并且＃34; Reload＆＃34;当窗户大小改变时滑块。

所以我所做的就是：

这是我加载到页面中的js脚本，以便创建Slider。

jQuery(function ($) {
'use strict';
(function () {
    var $frame = $('#centered');
    var $wrap = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        horizontal: 1,
        itemNav: 'centered',
        smart: 1,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 7,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1,

        // Buttons
        prev: $wrap.find('.prev'),
        next: $wrap.find('.next')
    });
}());

(function () {
    var $frame = $('#smart');
    var $slidee = $frame.children('ul').eq(0);
    var $wrap = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        smart: 1,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 3,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        pagesBar: $wrap.find('.pages'),
        activatePageOn: 'click',
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1,

        // Buttons
        forward: $wrap.find('.forward'),
        backward: $wrap.find('.backward'),
        prev: $wrap.find('.prev'),
        next: $wrap.find('.next'),
        prevPage: $wrap.find('.prevPage'),
        nextPage: $wrap.find('.nextPage')
    });
}());
});

我的问题是，当屏幕的宽度小于时，我想将滑块从水平更改为垂直。 600px的。

所以我从这样的事情开始：

$(window).resize(function () {
        if ($(window).width() < 600) 
            $("#centered").attr("id", "smart");
            $frame.sly('reload');
        } else {
            $("#smart").attr("id", "centered");
            $frame.sly('reload');
        }
    });

但是我无法让它工作，因为我是JavaScript / Jquery的新手，这使得它变得更加困难。

Sly Library的相关文档位于：https://github.com/darsain/sly/tree/master/docs

提前致谢。

Answer 1

$(window).resize(function () {
    if ($(window).width() < 600) 
        $("#centered").attr("id", "smart");
        reload();
    } else {
        $("#smart").attr("id", "centered");
        reload();
    }
});
function reload(){
         var $frame = $('#centered');
var $wrap = $frame.parent();

// Call Sly on frame
$frame.sly({
    horizontal: 1,
    itemNav: 'centered',
    smart: 1,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 7,
    scrollBar: $wrap.find('.scrollbar'),
    scrollBy: 1,
    speed: 300,
    elasticBounds: 1,
    easing: 'easeOutExpo',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,

    // Buttons
    prev: $wrap.find('.prev'),
    next: $wrap.find('.next')
});
}

狡猾的JavaScript库

1 个答案: