1

我有一系列可变宽度的图像。我想在轮播中旋转它们并选择“carouFredSel”，因为它似乎是我能找到的最可配置的一个。我希望其中一张图像始终在浏览器中水平居中。因此，对于传统的轮播图像，默认情况下会左对齐，但在这里我希望它们围绕视图中间的图像对齐，图像之间的间隙保持一致（10px）。这是一个例子：http ://coolcarousels.frebsite.nl/c/2/ 。这对于固定宽度的图像非常有用，但我的图像宽度可变。这个可变宽度是问题所在。

我做了一个快速模型来突出这一点。代码如下：

HTML：

<div class="strip">
    <div id="carousel">
        <div class="carousel-image">
            <img src="http://placehold.it/400x200" alt="" />                
        </div>
        <div class="carousel-image">
            <img src="http://placehold.it/117x200" alt="" />
        </div>
        <div class="carousel-image">
            <img src="http://placehold.it/317x200" alt="" />
        </div>
        <div class="carousel-image">
            <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="carousel-image">
            <img src="http://placehold.it/317x200" alt="" />
        </div>
        <div class="carousel-image">
            <img src="http://placehold.it/150x200" alt="" />
        </div>
    </div>
</div>

CSS：

.strip {
    height: 210px;
    background: #333;
    overflow: hidden;
}
.carousel-image {
    float:  left;
    width: 410px;
    height: 306px;
    text-align: center;
}
.carousel-image img {
    float: left;
    margin: 5px;
}

JS：

$(function () {

    $('#carousel').carouFredSel({
        width: '100%',
        align: 'center',
        items: {
            visible: 3,
            start: -1
        },
        scroll: {
            items: 1,
            duration: 1000,
            timeoutDuration: 3000
        },
        prev: '#prev',
        next: '#next',
        pagination: {
            container: '#pager',
            deviation: 1
        }
    });

});

小提琴：http: //jsfiddle.net/qqBus/

您将看到是否删除了“.carousel-image”宽度，它具有使图像彼此相邻而没有间隙的预期效果，但它也会阻止中间图像居中。

我想知道是否有人能想出一种方法来达到我想要的效果？如果存在这样的东西，我对替代插件持开放态度，但是看起来又长又难，我找不到适用于可变宽度图像的插件！

谢谢各位。

4

1 回答 1

0

检查此链接http://samanthaswade.com/editorial.html

这是没有居中图像的滑块插件http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php

这是居中的图像解决方案在此处输入链接描述

$( function() {
// slider 1
    $( '#yourslider' ).lemmonSlider( {
        infinite: true
    });
});
于 2013-10-14T14:45:49.767 回答