Variety of image widths displayed in bxslider

Question

Variety of image widths displayed in bxslider

I am currently facing a challenge while using the bxslider with images of varying sizes that I want to have the same height but different widths. My goal is to create a carousel similar to the ones shown in the examples on . While these examples work well, my images are 300, 400, and 500 pixels wide, each with unique heights scaled to a standard height of 400px. I do not wish to alter the image's width or crop it. How can I effectively utilize bxslider with images of various widths?

If bxslider cannot accommodate this requirement, is there an existing jquery plugin that offers this functionality?

For reference, you can view an example at: 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>

jquery css bxslider

Answer 1

Answer №1

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

However, I am encountering difficulties with touch scrolling. As a solution, I will experiment with using owlCarousel.

Answer 2

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

However, I am encountering difficulties with touch scrolling. As a solution, I will experiment with using owlCarousel.

Answer 3

Answer №2

Being a fan of web galleries, I decided to create a script for an infinite scrolling gallery with images of varying widths: Fiddle
I understand that you wanted to change the Gallery bxslider, but this solution seems viable.
In my opinion, the bxslider Gallery does not offer this functionality.
You can see in my fiddle that there is a gallery with images of different widths.
This script is just a demonstration and can be enhanced. If you like my answer, I will enhance it further.

<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'));}
    });
    // Setting container width = 3 times the width of the largest image
    var biggest = Math.max.apply( null, arr )*3;
    $('#container').css('width',biggest+'px');
    // Setting mask width = sum of width of first 3 images
    $('#mask').css({'width':(maskWidth+36)+'px'});
    // Setting images width = total width of all images
    $('#images').css({'width':wid+'px'});
    // Setting attribute data-last on third image
    $('#images img:eq(2)').attr('data-pos','last');

    // Next and previous clicks are handled differently based on the position of the 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;
        // Remaining code for incrementing gallery content goes here...
    });

    $('.prev').click(function(e){
        e.preventDefault();
        // Code for navigating back in gallery goes here...
    });
});
</script>

If you're interested, check out another improved version of this gallery in this FIDDLE, where you'll find buttons for browsing images in groups of three.
Once again, there is room for improvement. Some possible next steps include:
N1 - Making the gallery responsive
N2 - Transforming the script into a jQuery plugin

Answer 4

Being a fan of web galleries, I decided to create a script for an infinite scrolling gallery with images of varying widths: Fiddle
I understand that you wanted to change the Gallery bxslider, but this solution seems viable.
In my opinion, the bxslider Gallery does not offer this functionality.
You can see in my fiddle that there is a gallery with images of different widths.
This script is just a demonstration and can be enhanced. If you like my answer, I will enhance it further.

<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'));}
    });
    // Setting container width = 3 times the width of the largest image
    var biggest = Math.max.apply( null, arr )*3;
    $('#container').css('width',biggest+'px');
    // Setting mask width = sum of width of first 3 images
    $('#mask').css({'width':(maskWidth+36)+'px'});
    // Setting images width = total width of all images
    $('#images').css({'width':wid+'px'});
    // Setting attribute data-last on third image
    $('#images img:eq(2)').attr('data-pos','last');

    // Next and previous clicks are handled differently based on the position of the 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;
        // Remaining code for incrementing gallery content goes here...
    });

    $('.prev').click(function(e){
        e.preventDefault();
        // Code for navigating back in gallery goes here...
    });
});
</script>

If you're interested, check out another improved version of this gallery in this FIDDLE, where you'll find buttons for browsing images in groups of three.
Once again, there is room for improvement. Some possible next steps include:
N1 - Making the gallery responsive
N2 - Transforming the script into a jQuery plugin

Answer 5

Answer №3

Here's a simple code snippet I put together - check it out on this FIDDLE link.

This code is just a starting point, so please let me know what modifications you'd like to see. It's not flawless as one of the images may appear too wide, but that can be easily adjusted based on your requirements. Essentially, most of the styling is done in CSS with the images floated within each div.

JavaScript Section:


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;
    displayImages(first, second, third);
}
if (numPhotos === 2) {
    first = 0; second = 1; third = 2;
    displayImages(first, second, third);
}
if (numPhotos > 2) {
    first = 0; second = 1; third = 2;
    displayImages(first, second, third);
}

$('.forward').on('click', function(){
    first += 1;
    second += 1;
    third += 1;
    displayImages(first, second, third);
    
    if(third == numPhotos) {
        first = 1; second = 2; third = 3;
        displayImages(first, second, third);
    }
});

function displayImages(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 6

Here's a simple code snippet I put together - check it out on this FIDDLE link.

This code is just a starting point, so please let me know what modifications you'd like to see. It's not flawless as one of the images may appear too wide, but that can be easily adjusted based on your requirements. Essentially, most of the styling is done in CSS with the images floated within each div.

JavaScript Section:


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;
    displayImages(first, second, third);
}
if (numPhotos === 2) {
    first = 0; second = 1; third = 2;
    displayImages(first, second, third);
}
if (numPhotos > 2) {
    first = 0; second = 1; third = 2;
    displayImages(first, second, third);
}

$('.forward').on('click', function(){
    first += 1;
    second += 1;
    third += 1;
    displayImages(first, second, third);
    
    if(third == numPhotos) {
        first = 1; second = 2; third = 3;
        displayImages(first, second, third);
    }
});

function displayImages(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 7

Answer №4

I want a carousel similar to the ones shown on the website
http://bxslider.com/examples/carousel-demystified
. These examples are working well...

The current example does not align the slides in the center. Instead, it displays 3 slides aligned to the top left corner.

If you want to display images with different heights and widths, it is recommended to align them at the same width.

You can either vertically center them - check out the demo here: http://jsfiddle.net/tK9Wa/1/
Or you can use overflow:hidden to make them the same height - see the demo here: http://jsfiddle.net/6jQPg/3/

Answer 8

I want a carousel similar to the ones shown on the website
http://bxslider.com/examples/carousel-demystified
. These examples are working well...

The current example does not align the slides in the center. Instead, it displays 3 slides aligned to the top left corner.

If you want to display images with different heights and widths, it is recommended to align them at the same width.

You can either vertically center them - check out the demo here: http://jsfiddle.net/tK9Wa/1/
Or you can use overflow:hidden to make them the same height - see the demo here: http://jsfiddle.net/6jQPg/3/

Variety of image widths displayed in bxslider

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I adjust two overlapping divs for proper display?

Angular Material floating labels vanishing or being truncated when hovered over

Issues with the responsiveness of Bootstrap 4.5.0 grid system

Looking to modify the parsing of JSON data based on a specific string value - is this achievable?

Increase a variable within a looping structure using jQuery

Showcase data entries using jQuery data tables

Encountering an "unsupported media type" error while using jquery ajax with json in Spring MVC

How can I convert the stylesheet link from fonts.google.com into a CSS class and include it in my file.css as an internal style instead of an external one?

Node containing clickable buttons

What are the steps to employ a query string to display a specific image?

What is the best way to conceal a preloader using jQuery?

Jumping transitions in thumbnail images

What could be causing my website's screen resolution to not fit properly on mobile devices?

Retrieving a designated value from a jquery object sent via an ajax call

Having trouble with Jquery not applying or removing the selected class in the navigation menu

Conditionals in ng-class Syntax

AJAX request in jQuery version 1.4.4 and above will convert an empty array or object into a string

Showing a tooltip in Angular when a button is disabled

Choosing a combination of classes

Issues arise when the sub-menu does not function properly and overlaps with other elements of