Изменить ширину слайдера при изменении размера окна - PullRequest
Новая
       18

Изменить ширину слайдера при изменении размера окна

0 голосов
/ 19 марта 2019

Я пытаюсь изменить размер ползунка, чтобы заполнить ширину ползунка при изменении размера окна, я перепробовал много вариантов, но единственный, который я мог получить, это сломать кнопки «предыдущий / следующий» на ползунке?

Мой текущий 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 });

    }

};
...