浏览器窗口中的 bxslider 中心图片答案

【问题标题】：bxslider center pics in browser-window浏览器窗口中的 bxslider 中心图片
【发布时间】：2013-08-21 22:23:46
【问题描述】：

我在我的网站中使用 bxslider。非常好的插件，但我想将滑块中间的图像（不同宽度）居中到窗口中间。像这样：

有人可以帮我解决这个问题吗？或者请任何人提供另一个插件的提示，这是做什么的。

【问题讨论】：

标签： bxslider

【解决方案1】：

这可能不是您想要的答案，但您可以将包含照片的每个 div 设置为恒定大小并调整照片大小以适合。您需要将包含 div 的整体设为 500px，而每张照片包含 div 100px。这会产生类似于你想要的效果..

【讨论】：

示例代码将用于使您的答案更清楚。本站很多人使用jsfiddle.net来演示javascript、css和html代码。

【解决方案2】：

也许你可以这样做

SOLUTION

检查涉及到的Jquery

$(document).ready(function () {
    $('#slider').bxSlider({
        auto: true,
        pause: 2000,
        autoHover: true,
        controls: false,
        maxSlides:3,
        displaySlideQty: 3,
        moveSlideQty: 1,
        onAfterSlide: function (currentSlide, totalSlides, currentSlideHtmlObject) {
            var $middleSlide = currentSlide + 2;
            $('#slider li').css({
                width:200
            });
            $('#slider li:eq(' + $middleSlide + ')').animate({
                width: 150
            }, 100);
        }
    });

});

【讨论】：