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:

javascriptjqueryhtmlcssunslider

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to locate index.html file in Docker container while dockerizing React application

I'm a newcomer to Docker and I'm looking to containerize my react app. The index.html file is located in the public folder within my react project. However, when I try to run the docker image, it fails with an error indicating that the index.html ...

javascriptnode.jsreactjsdockerdockerfile

The React component fails to render on the screen

Upon retrieving data from the database server, attempts to render it result in the data being shown in the console log but not displayed in the component. What could be causing this issue? useEffect(() => { readRequest().then(setTodos); c ...

javascriptreactjsvite

What are the best practices for preloading images, JavaScript, and CSS files?

Back in the late 90's, I was really passionate about creating websites from scratch. However, as I dove back into web development recently, I realized how much the landscape has changed since then. As more of a designer than a developer, I opted to us ...

phphtmlcss

The div background image in Vue.js is displaying a 404 not found error

I've encountered an issue while trying to set a background for a div. Strangely, when using the same relative path with an img tag everything works fine, but as soon as I try to achieve the same result with a div, I receive a 404 error. This img tag ...

htmlcssvue.js

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

htmlcss

WordPress posts dynamically load additional content

I attempted to implement a method for loading more posts using ajax without relying on plugins. Despite researching online and on stackoverflow, I was unable to find a solution that works for me. My goal is to have the flexibility to use this code in vario ...

phpjqueryajaxwordpress

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...

javascriptphphtmlmysqlajax

What is the best way to align 3 divs next to each other with spacing and borders?

I'm having trouble aligning three divs side by side. When I try to add borders and a small gap between each div, the third div ends up on a new line. Is there a way to automatically resize the divs so they fit together? HTML: <div class="trendi ...

htmlcsstwitter-bootstrap

The string obtained from input.getAttribute('value') is lacking one character

While developing e2e-tests for an angular application, I encountered a puzzling issue. When trying to retrieve the value from an using the .getAttribute('value') method, I noticed that a single character was missing. Checking the HTML properties ...

htmlangularjsprotractorend-to-end

Asynchronously updating a Django model instance in real-time

On my website, there is a button that allows users to view notifications as a drop-down without navigating away from the current page. I am interested in updating the unread field of every notification for a user from True to False when this button is clic ...

pythonhtmldjangoasynchronouscelery

An issue occurred during the compilation of an Angular6 project

I am embarking on my first Angular project and may not grasp every detail perfectly. In my search for guidance, I came across the command "ng build --prod" on Google and decided to give it a try. Everything seemed to be going smoothly at first until an err ...

htmlcssangularwebng-build

Live events are not showing up upon page load, but they work flawlessly on the local server

I am currently developing a project using Laravel and Angular. In this project, I am implementing the angular ui-calendar as well as utilizing the jQuery context menu plugin to create dynamic menus for each event. The versions I am working with are fullca ...

jqueryangularjslaravelui-calendar

Tips on displaying data in pie chart legend using react-chartjs-2

I am currently using a pie chart from react-Chartjs-2 for my dashboard. The requirement is to display both the label and data in the legend. I have implemented the following component in my application: import React, { Component } from "react"; ...

javascriptreactjsreact-chartjs-2

If I do not utilize v-model within computed, then computed will not provide a value

I'm fairly new to coding in JS and Vue.js. I've been attempting to create a dynamic search input feature that filters an array of objects fetched from my API based on user input. The strange issue I'm coming across is that the computed metho ...

javascriptvue.jsdynamicfilteringv-model

How to Perform a Method Call or Array Iteration in JSX within HTML

Encountering a new issue that I haven't faced before, this is my first time working on something like this and finding a solution is proving to be tricky. Currently, I'm using SendGrid to send an HTML email through a POST request in express on N ...

javascriptnode.jsreactjshtml-email

Add JSON data to a table using jQuery and AJAX

When I make an AJAX call to retrieve data, the success part of the code looks like this: $("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://.......s ...

javascriptjqueryjsonajax

Steps for displaying a jQuery dialog box with text retrieved from a JavaScript variable

Can a jQuery dialog box be opened using text stored in a JavaScript variable rather than retrieving it from a div element? ...

jqueryjquery-uijquery-ui-dialog

Tips for creating AngularJS nested transcludes

I'm currently delving into the world of angular directives/transclusion to manage the creation of custom panels within my application. Unfortunately, I seem to have hit a roadblock as the transcluded content is not displaying in the HTML. Below is th ...

javascriptangularjs

Assistance needed in extracting the body content utilizing javascript or jquery

I am looking to swap out the body content of one page with that of another. How can I retrieve the body content from the response text of the second page in order to make this replacement? Please assist me with this. Thank you in advance, Raja ...

javascriptjqueryajax

Tips for allowing a position:absolute <div> to expand as though it were containing a lengthy <p>innerText

This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...

htmlcsswidthcss-position