Mobile Slider Carousel Variable Height

Yep, I have the exactly same issue here (look at my previous post), and the arrows drop under a landscape photo because the height comes from the portrait photos. I also want the height of the slider to stay the same all the time, like it does on laptop. Thanks for posting this.

I tried to play around a bit with css (I am no expert with it), made some changes, but not a success yet.

I think the problem is there is some resolution based code/css somewhere, where the slider changes its behavior: it starts to show only 1 pic at time (nothing shows on the left and right), then the arrows drop down, and funnyli, the dots also dissappear! I hope I would be better at CSS, but maybe the plugin owner can help us ??

I played with these:

.variablewidthv img {
height: auto!important; /* height: 400px!important; */
width: auto !important;
}

.wpsisac-slick-carousal.design-6 .slick-image-slide {
margin: 0!important;
/* height: 400px!important; */
}

(@haije)

I’ve added the code to custom css:

@media only screen and (max-width: 40.0625em) {
.wpsisac-slick-carousal.design-6 .slick-image-slide{ height:200px !important; }
}

and now the container is the size that I want (though the navigation dots disappeared, but I can live with that). But portrait orientation photos are not scaled to fit container and are cropped from bottom. How to fix that?

I added some more code, and almost did what I want: now the images are shown correct height, just when there’s portrait image shown – there are no other images from left or right partially seen. the code looks like this:

@media only screen and (max-width: 40.0625em) {
.wpsisac-slick-carousal.design-6 .slick-image-slide{ height:200px !important; }
.variablewidthv img {height: 200px!important;
  width: auto !important;}
}

Is there a way to fix the slider to look like carousel, for images to be partially seen on left and right sides? and the navigation dots to be shown?

• This reply was modified 6 years, 8 months ago by aibo77.
• This reply was modified 6 years, 8 months ago by aibo77.
• This reply was modified 6 years, 8 months ago by aibo77.
• This reply was modified 6 years, 8 months ago by aibo77.

It’s simply this code that does the trick:

@media only screen and (max-width: 40.0625em) {
.wpsisac-slick-carousal.design-6 .slick-image-slide img{
  height: 200px !important;
  width: auto !important;}
}

but I still need the partially shown images from left and right sides when shown image is portrait orientation (it leaves white gaps on both sides and doesn’t look like carousel) and navigation dots if possible.

Hello,

No need to play with CSS here. AS per feedback from lots of users, we had disabled the variable width in mobile device.

If you want to play with it, just go to:

wp-slick-slider-and-image-carousel –> assets –> js –> wpsisac-public.js and open it. check
1) breakpoint : 639
2) breakpoint : 479,
3) breakpoint : 319

and set centerMode : true, variableWidth: true instead of false.

Hi dev,

your suggested changes have no impact to the carousel slider, it still looks broken on mobile if I don’t use the css code to make the fixed height and auto width. when it shows portrait orientation picture, it is shown in full height and makes the slider container bigger in height than when the picture is landscape orientation, also there’s no dots (though I made dots: true in those brakepoints) and navigation arrows are positioned by the portrait picture, and when smaller picture is shown they appear on the bottom of that picture. there is something wrong with the scaling or resizing of the carousel, as container picks height by portrait picture, when it’s width occupies full container’s width. my portrait and landscape pictures are same height, but different width, so I want them to show same height, but it doesn’t. I think something is wrong with the command “slidesToShow : 1”, because it always shows one slide that takes all container’s width, so the height of pictures are jumping. any suggestions?

• This reply was modified 6 years, 8 months ago by aibo77.
• This reply was modified 6 years, 8 months ago by aibo77.
• This reply was modified 6 years, 8 months ago by aibo77.

Yes I was right, I made the change at “slidesToShow : 1” from “1” to “(parseInt(slider_conf.slidestoshow) > 3) ? 3 : parseInt(slider_conf.slidestoshow)”, then added the css code:

@media only screen and (max-width: 40.0625em) {
.wpsisac-slick-carousal.design-6 .slick-image-slide img{
  height:200px !important;
  width: auto !important;}
}

and now it works and shows as it should, dots and height – everything works and looks as proper carousel ??

thanks for pointing me to right direction ??

Hi, thanks to you both.

So aib077, did you change only CSS or did you also change the code in .js?

@hajie

I’ve changed the code in .js to this:

breakpoint	: 639,
				settings	: {
					slidesToShow 	: (parseInt(slider_conf.slidestoshow) > 3) ? 3 : parseInt(slider_conf.slidestoshow),
					slidesToScroll 	: 1,
					dots 			: true,
					centerMode 		: true,
					variableWidth 	: true,
				}
			},{
				breakpoint	: 479,
				settings	: {
					slidesToShow 	: (parseInt(slider_conf.slidestoshow) > 3) ? 3 : parseInt(slider_conf.slidestoshow),
					slidesToScroll 	: 1,
					dots 			: true,
					centerMode 		: true,
					variableWidth 	: true,
				}
			},{
				breakpoint	: 319,
				settings	: {
					slidesToShow 	: (parseInt(slider_conf.slidestoshow) > 3) ? 3 : parseInt(slider_conf.slidestoshow),
					slidesToScroll 	: 1,
					dots 			: true,
					centerMode 		: true,
					variableWidth 	: true,

and added the css code to custom css:

@media only screen and (max-width: 40.0625em) {
.wpsisac-slick-carousal.design-6 .slick-image-slide img{
  height:200px !important;
  width: auto !important;}
}