我正在尝试调整滑块的大小以填充窗口调整大小时滑块的宽度,我尝试了许多选项,但我唯一能使用的方法就是破坏滑块上的上一个/下一个按钮?
我当前的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 });
}
};