Fullwidth Slider on Mobile: Center all Images or change x-position indivually

Dear Andy,

I added the snippet, without the desired effect. Please compare slide 6 (the last slide), where I added:

li.slide-6 {
  left: -100px !important;
}

Results:
Not only the image of slide 6 moves to the left, also the textbox does so.
When switching to the next/prev slide the image jumps out of focus.

Cheers,
Simon

Dear Yigit,

I did as you asked, but without desired effect. When switching i.e. from slide 1 to slide 6 there appears to be something broken, the image jumps. The text is now in normal position again. The other slides look well, only from slide 5 to slide 6 and slide 1 to slide 6, it seems to break the moving of the images… All other slides look as expected.

Cheers,
Simon

• This reply was modified 9 years, 2 months ago by parperei.

Dear Andy,

thanks for the information. Now, the source looks like this:

@media only screen and (max-width: 767px) {
 	.home #full_slider_1 img {
        min-width: auto !important;
		height: 130px !important;
    } 
	li.slide-6 img {
		min-width: 100% !important;
}

When you look at the slider, you will see that all images appear to be vertically stretched (i.e. the picture of slide-2: yellow sign on the grey clouds).
I tried to get rid of this non-proportional scaling by using min-width (example = slide 6).
Unfortunately, it does not work for me, maybe because I made a mistake in “li.slide-6 img”?

May you help me to achieve that all slider-images appear with 100% width?

Then everything would be fine. :)

Cheers!

Dear Andy,

I refer to the mobile view: everything lower than @media only screen and (min-width: 768px), lines 1666… in the css-file.
There, the slider images don’t have the correct aspect ratio: they are stretched in height.

Is it possible to let the slider-images appear unstretched, while presevering the height (so that the text stays readable)?

I imagine, the slider-images inside the container could be cropped on the left and right side, via overflow:hidden… but how? :|

Hey Andy!

sorry, it must be the hot weather here in Germany;)

I attached two images, first one shows imageslide with wrong aspect ratio.
Second one shows my attempt, what I was able to achieve until now.

Meanwhile I stumbled upon an idea of Josue, to just add a second slider with optimized images for mobile version. The idea is to hide the desktop slider on mobile and vice versa.

So to put it short: Issuee is solved due to a different approach.

I hope this is okay for you, because I caught your time and now I decided to move on with an other idea. But it seems too complicated to get proper results with just one slider…

Kind regards and again: ice-cold greetings from Germany to Switzerland! :)

Cheers!