Question

我正在尝试将bxslider与不同大小的图像一起使用，我希望它们具有相同的高度和不同的宽度。我希望像http://bxslider.com/examples/carousel-demystified上的例子那样有一个旋转木马。这些示例工作正常，但是，我有300,400和500像素宽的图像，每个图像具有不同的高度，可以缩放到400px的相同高度。我不想调整图像的宽度，使它们相同或裁剪它。如何将bxslider与不同宽度的图像一起使用？

如果使用bxslider无法完成此操作，那么此行为是否已存在jquery插件？

示例：http://jsfiddle.net/GdD52/2/

<ul class="slider1">
    <li class="slide"><img src="http://placehold.it/140x130&text=FooBar1"/></li>
    <li class="slide"><img src="http://placehold.it/150x115&text=FooBar2"/></li>
    <li class="slide"><img src="http://placehold.it/130x160&text=FooBar3"/></li>
    <li class="slide"><img src="http://placehold.it/145x142&text=FooBar4"/></li>
</ul>

Answer 1

鉴于我对网络画廊的热爱，我想写一个小脚本来创建一个包含不同宽度图像的无限滚动图库：Fiddle
我知道你的愿望是改变画廊bxslider，但这个解决方案似乎是可以接受的我认为bxslider Gallery并没有给你这种可能性正如你可以在我的小提琴中看到的那样，有一个画廊，画面宽度不同该脚本只是一个例子，如果你投票我的答案我可以改进它。

<script type="text/javascript">
$(document).ready(function(){

    var wid=0;
    var maskWidth=0;
    var arr=[];
    $('#images img').each(function(i){
        wid+=parseInt($(this).attr('data-width'));
        arr.push($(this).attr('data-width'));
        if(i<3){maskWidth+=parseInt($(this).attr('data-width'));}
        });
    //set container width = 3* mor larger image
    var biggest = Math.max.apply( null, arr )*3;
    $('#container').css('width',biggest+'px');
    //set mask width= width of first 3 images
    $('#mask').css({'width':(maskWidth+36)+'px'});
    //set images width=width of all images
    $('#images').css({'width':wid+'px'});
    //set attribute data-last on thirdi image
    $('#images img:eq(2)').attr('data-pos','last');



    //next and prev click are differnent for the position of image div
    $('.next').click(function(e){
        e.preventDefault();
        var widthx=$('#mask').width();
        var next=parseInt($('#images').find('img[data-pos="last"]').next('img').attr('data-width'))+12;
        $('#images').find('img[data-pos="last"]').next('img').attr('data-pos','last');
        $('#images').find('img[data-pos="last"]:first').removeAttr('data-pos');
        var ind=$('#images').find('img[data-pos="last"]').index()+1;
        var collection=$('#images').find('img').slice(ind-3,ind);
        var newWidth=0;
         $(collection).map( function( i, element ) {
             newWidth+= parseInt($(element).data( 'width' )+12);
         });
         var diff=widthx-newWidth;  
         var delta=parseInt(next)+(diff);
         $('#images').animate({'left':'-='+(delta)+'px'},1000 );
         $('#mask').animate({'width':(newWidth)+'px'},1000,function(){
             $('img:first').appendTo('#images');
             $('#images').css({'left':'0px'});
        });
    });

    $('.prev').click(function(e){
        e.preventDefault();
        var widthx=$('#mask').width();
        $('img:last').prependTo('#images');
        var largh=parseInt($('img:first').attr('data-width'))+12;
        $('#images').css({'left':largh*-1+'px'});
        var collection=$('#images').find('img').slice(0,3);
        var newWidth=0;
         $(collection).map( function( i, element ) {
             newWidth+= parseInt($(element).data( 'width' )+12);
         });
         $('#mask').animate({'width':newWidth+'px'},1000);
         $('#images').animate({'left':'+='+largh+'px'},1000);
         $('#images img').removeAttr('data-pos');
         $('img:nth-child(3)').attr('data-pos','last');
    });

})
</script>

由于我喜欢这个问题在另一个FIDDLE，你会发现这个图库的另一个改进版本，其中包含树组中浏览图像的按钮
再次，脚本可以改进，下一步可能是：
N1让画廊反应灵敏 N2在jQuery插件中转换scipt

Answer 2

#bx-wrapper img {
    width: auto !important
}

但是我遇到触摸滚动问题。所以我要尝试owlCarousel。

Answer 3

好的，我只是想把这个基本代码作为一个想法 - FIDDLE。

这是一个开始，只要告诉我你想要的改变。它并不完美，因为其中一张图片太宽，但根据您的标准，这很容易修复。我所做的是在CSS中完成大部分样式，并将图片浮动到每个div中。

JS

var first, second, third;

var numphotos = $('.hidden img').length;

if(numphotos === 0)
  {
    first = 0; second = 0; third = 0;
  }
if(numphotos === 1)
  {
    first = 0; second = 1; third = 0;
    putphotos(first, second, third);
  }
if(numphotos === 2)
  {
    first = 0; second = 1; third = 2;
    putphotos(first, second, third);
  }
if(numphotos > 2)
  {
    first = 0; second = 1; third = 2;
    putphotos(first, second, third);
  }
$('.forward').on('click', function(){
  first = first+1;
  second = second+1;
  third = third+1;
  putphotos(first, second, third);
  if(third == numphotos)
  {
   first = 1; second = 2; third = 3;
   putphotos(first, second, third);
  }
});

function putphotos(first, second, third)
{
$( '.minishowme:nth-child(1)' ).html('');
$( '.minishowme:nth-child(2)' ).html('');
$( '.minishowme:nth-child(3)' ).html('');

$('.hidden img:nth-child(' + first + ')').clone().appendTo( '.minishowme:nth-child(1)' );
$('.hidden img:nth-child(' + second + ')').clone().appendTo( '.minishowme:nth-child(2)' );
$('.hidden img:nth-child(' + third + ')').clone().appendTo( '.minishowme:nth-child(3)' );
}

Answer 4

我希望像上面的示例一样有旋转木马 http://bxslider.com/examples/carousel-demystified。这些例子有效细...

该示例不是 center 幻灯片。它显示3个幻灯片与左上角角对齐。

要显示不同高度和宽度的图像，您应将它们对齐到相同的宽度

并且垂直居中于中间 - 演示：http://jsfiddle.net/tK9Wa/1/
或使用溢出：隐藏以达到相同的高度 - 演示：http://jsfiddle.net/6jQPg/3/

bxslider图像具有不同的宽度

4 个答案: