问题
I'm trying to use the bxslider with images of different sizes that I'd like to be the same height and different widths. I'd like to have a carousel like the examples on http://bxslider.com/examples/carousel-demystified. These examples work fine, however, I have images that are 300, 400, and 500 pixels wide, each with different heights that are scaled to the same height of 400px. I do not want to resize the width of the image so they are the same or crop it. How do I use bxslider with images of different widths?
If this cannot be done using bxslider, then does a jquery plugin already exist for this behavior?
Example: 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>
回答1:
Given my love for web galleries I thought to write a little script to create an infinite scrolling gallery with images of different width: Fiddle
I am aware that your wish was to change the Gallery bxslider but this solution seems acceptable
I think that bxslider Gallery does not give you this possibility
As you can see in my fiddle there is a gallery with images with differnt widths.
The script is just an example and it can be improved if you vote my answer I will improve it.
<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>
Since i like this question in this other FIDDLE you'll find another improved version of this gallery with the buttons for browse images in group of tree
Again, the script coul be improved the next step could be:
N1 make the gallery responsive
N2 transform the scipt in a jQuery plugin
回答2:
#bx-wrapper img {
width: auto !important
}
But I am having issues with touch scrolling. So I am going to try owlCarousel.
回答3:
Ok, I'm just going to throw this rudimentary code as an idea - FIDDLE.
It's a start, just tell me what changes you would want. It's not perfect, because one of the pictures is too wide, but given your criteria, that would be easy to fix. What I did is do most of the styling in CSS, and just float the pictures through each 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)' );
}
回答4:
I'd like to have a carousel like the examples on
http://bxslider.com/examples/carousel-demystified. These examples work fine...
The example does not center slides. It shows 3 slides aligned to the left up corner.
To display images with different height and width you should align them to the same width
- and either vertically center at the middle - demo: http://jsfiddle.net/tK9Wa/1/
- or use overflow:hide to make same height - demo: http://jsfiddle.net/6jQPg/3/
来源：https://stackoverflow.com/questions/23962985/bxslider-images-with-different-widths