Question

我有一系列可变宽度的图像。我想在旋转木马中旋转它们并选择'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'宽度，它可以使图像彼此相邻而没有间隙，但它也会阻止中间图像居中。

我想知道是否有人能想出办法达到我想要的效果？如果存在这样的事情，我会接触另一个插件，但看起来很长很难，我找不到适用于可变宽度图像的插件！

谢谢大家。

Answer 1

点击此链接http://samanthaswade.com/editorial.html

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

这是居中的图像解决方案enter link description here

$( function() {
// slider 1
    $( '#yourslider' ).lemmonSlider( {
        infinite: true
    });
});

Caroufredsel滑块 - 将可变宽度图像保留在滚动条的中心

1 个答案: