Unslider: Ensure images stay centered even on smaller screen resolutions

Question

Unslider: Ensure images stay centered even on smaller screen resolutions

Utilizing Unslider in a recent project from .

Managed to align the slider halfway, but facing an issue with off-center slides on resolutions of 1920px and lower. The image width is 3940px.

Attempted to implement the code snippet from this answer like so:

$(function () {
        $('.banner').unslider();
        AdjustSliderImgWrapper();
    });

    $(window).resize(AdjustSliderImgWrapper);

    function AdjustSliderImgWrapper() {
        var left = (parseInt($('.banner > li > img').width()) - $('.banner > li').innerWidth()) / -2;
        $('.banner > li > img').css('left', left);
    }

However, no success. Also tried:

$(".banner img").each(function () {
        $(this).css("margin-left", -this.width / 2);
    })

and:

background-position: center center !important;

Here's the code snippet:

javascript jquery html css unslider

Answer 1

Answer №1

Personally, I opt for a different method. While I'm unsure if your particular slider has the capability to animate divs, one alternative is to set the image as a background image within that div. Then simply utilize background-size: cover;, allowing the browser to automatically select the optimal size for you.

Answer 2

Personally, I opt for a different method. While I'm unsure if your particular slider has the capability to animate divs, one alternative is to set the image as a background image within that div. Then simply utilize background-size: cover;, allowing the browser to automatically select the optimal size for you.

Answer 3

Answer №2

One effective solution involves organizing the images by wrapping them in a parent class and assigning a child class to each image,

<span class="parent"><img class="child"...>

To center the images properly, follow these steps:

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Additionally, include an overflow:hidden; property in the .banner ul li to prevent any overlapping of divs.

Answer 4

One effective solution involves organizing the images by wrapping them in a parent class and assigning a child class to each image,

<span class="parent"><img class="child"...>

To center the images properly, follow these steps:

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Additionally, include an overflow:hidden; property in the .banner ul li to prevent any overlapping of divs.

Unslider: Ensure images stay centered even on smaller screen resolutions

Answer №1

Answer №2

Similar questions

JSON conversion error: Unable to convert circular structure to JSON - locate problem within JSON structure

How can you confirm the validity of a dropdown menu using JavaScript?

CSS to target every second visible tr element using the :nth-child(2n)

Uncover a section of text from HTML using the Beautiful Soup module

How can I dynamically update the URL parameter based on the selected option in a dropdown list?

prevent unnecessary duplicate database queries for generating metadata in the upcoming 13 or 14 instances

Implementing Dynamic Weight-based Pricing with CodeIgniter and AJAX

Isotope animation glitches causing malfunction

Is it possible to remove certain 'css-' class names that MUI automatically applies to its components? (Using Next JS and MUI)

Automatically filling in options in a drop-down menu based on the selection made

The <a> tag with href attribute is mistakenly identified as an external link when used in conjunction with the <base> tag

Step-by-step guide on starting Edge with Open package on Windows 10

How to effectively merge DefaultTheme with styled-components in TypeScript?

Remove newline character from HTML code using Python 3.2 and urllib module

The Info Box in Google Maps seems to be ignoring the click event

"Patience is key as we await the resolution of a promise within the confines of an emitter

Messages traced by log4javascript are not being displayed

Maintaining checkbox state using fetch arrays

Failure to Present Outcome on Screen

FitText.js malfunctioning