Jquery 不同宽度的bxslider图像

我正在尝试将bxslider用于不同大小的图像，我希望它们具有相同的高度和不同的宽度。我想要一个像上面例子一样的旋转木马。这些示例工作得很好，但是，我有300、400和500像素宽的图像，每个图像具有不同的高度，可以缩放到相同的400px高度。我不想调整图像的宽度，使它们相同或裁剪它。如何对不同宽度的图像使用bxslider

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

例如：

好的，我将把这个基本的代码作为一个想法-

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

JS

我想要一个像上面例子一样的旋转木马

http://bxslider.com/examples/carousel-demystified

。这些例子很有效 好的

该示例不使幻灯片居中。它显示了与左上角对齐的3张幻灯片

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

• 在中间垂直居中-演示：
• 或者使用溢出：隐藏以使高度相同-演示：

---

鉴于我对网络图库的热爱，我想写一个小脚本，创建一个具有不同宽度图像的无限滚动图库：
我知道您希望更改Gallery 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>

$（文档）.ready（函数（）{
var-wid=0；
var maskWidth=0；
var-arr=[]；
$（“#图像img”）。每个（函数（i）{
wid+=parseInt（$（this.attr（'data-width'））；
arr.push（$（this.attr（'data-width'））；
如果（i）
但是我在触摸滚动方面遇到了问题。所以我要试试。
请给我们看看你的代码。试试，说明中添加了
响应的
部分jsfiddle。每个事件播放两张幻灯片。这是假设发生的吗？@cr0ss-不，jsfiddle已更新。谢谢你推荐猫头鹰旋转木马。
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)' );
}

<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>

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