aibo77

@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;}
}

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 7 years, 11 months ago by aibo77.
• This reply was modified 7 years, 11 months ago by aibo77.
• This reply was modified 7 years, 11 months ago by aibo77.

(@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 7 years, 11 months ago by aibo77.
• This reply was modified 7 years, 11 months ago by aibo77.
• This reply was modified 7 years, 11 months ago by aibo77.
• This reply was modified 7 years, 11 months ago by aibo77.

found the reason, it was “.wpsisac-slick-carousal” not “slider” I was using. now it works. still need to change the color of arrows 🙂

and how to change the color of arrows from black to white (the arrow symbol)?

@nirviewpoint

I’ve changed it to “Simple Lightbox” plugin 😉