在窗口调整大小时更改滑块宽度

时间:2019-03-19 18:50:29

标签: javascript slider window-resize

我正在尝试调整滑块的大小以填充窗口调整大小时滑块的宽度,我尝试了许多选项,但我唯一能使用的方法就是破坏滑块上的上一个/下一个按钮?

我当前的js如下所示,并且按我想要的方式工作,但没有调整函数的大小。朝着正确方向的一点将是惊人的

预先感谢

$(document).ready( function () {

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider').width();
var slideHeight = $('#slider').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ height: slideHeight, width: slideWidth });

$('#slider ul li').css({ height: slideHeight, width: slideWidth });

$('#slider ul').css({ height: slideHeight, width: sliderUlWidth });

$('#slider ul li:first-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 1000, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');            
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 1000, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });

};


$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});

});

我正在尝试实现该功能的功能,该功能可以正常工作但破坏了滑块prev / next

$(window).on('resize', resizeSlider).trigger('resize');

function resizeSlider() {

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider').width();
var slideHeight = $('#slider').height();
var sliderUlWidth = slideCount * slideWidth;

var $window = $(this),
wide = Math.ceil($window.width()),
previousWidth = $window.data('previousWidth');

if (wide > previousWidth) {

    $('#slider').css({ height: slideHeight, width: slideWidth }));

    $('#slider ul li').css({ height: slideHeight, width: slideWidth });

    $('#slider ul').css({ height: slideHeight, width: sliderUlWidth });

    }

else if (wide < previousWidth) {

    $('#slider').css({ height: slideHeight, width: slideWidth });

    $('#slider ul li').css({ height: slideHeight, width: slideWidth });

    $('#slider ul').css({ height: slideHeight, width: sliderUlWidth });

    }

};

0 个答案:

没有答案