Responsive for mobiles

Hello,

Thanks for reaching here.

Refer below screen-short and set bxSlider setting properly.
https://prnt.sc/ovfvxc

Let me know if you are any other query.

Thanks,

• This reply was modified 5 years, 7 months ago by Ketan Patel.

Hello,

Thanks for your reply, but that setting doesn’t work properly:

– it shows just 1 image and nothing else on mobile portrait mode. Not nice, but ok.
– it shows 1,5 images on mobile landscape mode. Before it was better to show 3 images next to each other.
– it shows just 1 image on 4K desktop. This is completely useless, because I need to show the 3 images next to each other and there is plenty of space available. That’s definitively not responsive at all.

Is there any change to keep the layout for desktops and mobile landscape mode (because there is sufficient space available), but just change the layout for mobile portrait mode (or maybe in case of very low resolutions) and then show the 3 images beneath each other. That would be much better than hiding 2 completely.

Thank you & best regards,

Rico

Hello,

Thanks for reaching here.

Please choose the loop setting value true.

Please follow this screenshot: https://prntscr.com/ovkk6f

Thanks,

Hello,

Thanks for the guidance.

This improves the layout on 4K desktop to 2,5 images (instead of 1). The rest remains the same: 1 image on mobile portrait view and 2,5 images on mobile landscape view.

But it should show

3 images beneath each other on mobile portrait view
3 images next to each other on mobile landscape view or desktops

Thanks,

Rico

Hello @salsatrips

As you said “3 images beneath each other on mobile portrait view” and “3 images next to each other on mobile landscape view or desktops”, this is only possible if you disable the slider in mobile view OR you use a grid method instead of slider.

Also if you need a perfect 3 image view in the desktop, please play with slide width option and try 350.

There is some issue with “touchEnabled” in BXSlider and we are doing some experiment with this so its kind request to you try Flex Slider 2 OR Owl Carousel 2 OR Swiper Slider type of SlidersPack.

But in your case best plugin for you is : Album and Image Gallery plus Lightbox where you can use shortcode [aigpl-gallery popup="false" grid="3" link_target="blank"]

By using this plugin you can display 3 images beneath each other on mobile portrait view and 3 images next to each other on mobile landscape view or desktops.

Here you can check the Demo and scroll to “Gallery Grid”. Right now in demo we are showing lightbox but you can disable this by using shortcode parameter popup=”false”. This will enable the external link.

Please let me know if there is anything.

Hello,

the FlexSlider shows just 2 images. On the mobile I can move them to the right, so that the 3rd image appears, but on the desktop that wasn’t possible and it’s also not really user friendly.

Reducing the slide width to 350, would work for 4K desktop, but shows just 2 images on mobile landscape and just 1 image on mobile portrait view. Or – in case I change from 1 to 3 images for mobiles – then there are the 3 very small images that are not responsive, like in my initial issue.

Owl Slider/Carousel 2 fits the best with (each) 3 images, 0 padding, and auto width = false. In any scenario I see 3 images next to each other. Obviously in mobile landscape view the images are still too small, but it’s okay with the caption below the image. However that’s not really responsive I think. But I keep this setting as of now.

In case you are working on the plugin, it would be great if you would improve the responsiveness of bxSlider to show the images beneath (instead next to) each other, once there is not sufficient space or, alternatively, that the user can enter an amout of pixel (width) from when it should change between beneath and next to each other.

Anyhow, thank you for the support
& best regards,

Rico

Hello @salsatrips

Have you tried the album and image gallery plugin?

show the images beneath (instead next to) each other Is not possible with the slider. It’s only possible if we disable the slider in mobile view with custom code.

• This reply was modified 5 years, 7 months ago by Anoop Ranawat.

Hello,

okay, I see. I keep the information in mind, but I don’t want to install a further plug-in and I use the Sliders Pack also on other pages.

Thank you