Slider picture setting

Hi, my slide picture size is 792px x 288px. I want to display this exact size in full in the slider. What the setting would be? Every time I add a picture, it looks big and the resolution is low.

I also want the slider to scale responsively when viewing in mobile or desktop.

Hello,

You have to use the high quality images for your slide and you can adjust your slider size by adjusting the columns as in the screenshot: https://jmp.sh/CcCCOhM

Also you can adjust the height of your slider by edit your slider from Slides >> Slider >> Your slider “homeslider”: https://jmp.sh/BD0Xhjp

Best Regards.

second image slide not showing in mobile.

I have two image slides as you can see it showing in the desktop http://somup.com/cq6v2Dfh7r
However, in mobile it’s not showing as you can see in the attached video.

video https://www.dropbox.com/s/w26fvte1gwdg8hb/LINE_MOVIE_1572444934431.mp4?dl=0

Hello,

Kindly undo your custom CSS from custom CSS for mobile under theme settings and also deactivate your third party plugins and then clear your site and browser cache. Also switch to your parent theme.

I have test with other new slides but always the slide on second number did not display image. Just follow the above steps this will surely fix the issue.

Best Regards.

I’ve followed your instruction but it’s not working.

Hello,

I have test your site as you are using “homeslider” and your second slide image not shown in the mobile devices.

When I test the second slide by changing image it displays the image So the conclusion is something is wrong with that specific image. You need to change the image which you used as a featured image in your second slide of homeslider from Slides >> homeslide2.

Screenshot for clarification: https://jmp.sh/6kIqmAj

Best Regards.

What do you mean? The two images of my slides are the same size. If the size is the matter, the two images wouldn’t show at all. Only the image in the first slide shows, not the second one. So now I use the image of the first slide, which is working, for the second slide, which is not working. The result is still the same.

Hello,

I mean that the issue is with your second image. When I used some other image in the second slide.

It works just fine. You can check in the below video for clarification: https://jmp.sh/sFOzsZx

So that’s why I suggest you to use some different image in your second slide.

Best Regards.

The first picture works. I try to use the first picture for the second slide. It doesn’t work.

Hello,

You can check in the below video that I used the first image in the second slide also and it works just fine.

Screenshot: https://jmp.sh/7jScYf4
Video: https://jmp.sh/8vrsUiJ

It might be your cache issue.

Best Regards.

I removed the two images and re-uploaded the new ones to the two slides. All the two images are 792px x 288px. The first image is 147 KB and the second one is 97.3 KB. I exported these two images from Adobe Illustrator with the same setting. So what’s wrong with the second image in the second slide? The second image works in the desktop but why not in mobile mode. What’s the requirement size or resolution for the second image to work in the second slide?.

Unbelievably this becomes an issue.

Hello,

Could you please deactivate all of you third party plugins and switch to the parent version of theme.

Also I noticed that you are currently using an old version of theme so kindly update your theme and plugins then check back your site. If the issue is still there, just let me know. I will help you out.

Best Regards.

– The theme is the latest vetsion

– I have followed all your instructuction but it is not working

You didn’t disable the child theme, all external plugins and all kind of caches on your website and server yet https://gyazo.com/6f3961cbdcc6467c49e0734a2212df17
Please, do all these steps first and then check the issue again.
You can also try to use our banner carousel element instead of the slider.

– I have disable the plugins and switch to the parent theme as you can see here http://somup.com/cqXn1Gfipf

– I’ve purged cache on cpanel and disable it as you can see here https://www.dropbox.com/s/1zs7harvfzuvtxm/sc34.png?dl=0

– My website links to cloundflare and I also purged cache in cloudflare and turn on development mode to disable it as you can see here https://www.dropbox.com/s/qcbqxr954z6jcgv/sc36.png?dl=0

– I cleared cache in mobile browser and check again but still all of this doesn’t solve the issue. https://www.dropbox.com/s/jcdn5fq1cncucq1/LINE_MOVIE_1572681223290.mp4?dl=0

Now I have to switch back to the child theme and enable the plugins as I have to work on my site. If you want to test it, you just login and disable the plugins and change the theme to the parent theme. I already disabled all the cache for you.

Have you tried our banners carousel element instead of the slider?

Already tried but I don’t know how to use your banner carousel. I already opened a related ticket before. Up too now I still don’t get it. You can see here https://www.dropbox.com/s/4ala5k0vyhevrsg/sc37.png?dl=0 When I open your banner carousel. I don’t see any option to upload pictures to make a slider.

Our banners carousel is a container element. Inside the element on WPBakary page interface, you see the “plus” button where you can put your images as Banner elements. Then they will create a kind of slider similar to our WoodMart slider but with banners.

Where is that “plus” button? Screenshot pls

Banner carousel has auto slide? I think I prefer using the slider.

Now I know how to use your banner carousel. I recommend you add clear tutorial in your documentation.

Hey, now the second image in the second slide are now working.

– These icons in the banner carousel don’t position into the image like in the slider. https://www.dropbox.com/s/vxhevhd69ceuhu5/sc40.png?dl=0

– Especially in the mobile view https://www.dropbox.com/s/ml2zv0eafmebu3j/sc51.jpg?dl=0

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.banners-carousel .owl-dots {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
 .banners-carousel .owl-dots .owl-dot:not(.active):hover span {
	border-color: #FFF;
}
.banners-carousel .owl-dots .owl-dot span {
	border-color: rgba(255,255,255,.4);
}
.banners-carousel .owl-dots .owl-dot.active span {
	border-color: #FFF;
	background-color: #FFF;
}

Why I have to use such css code to fix this? And after update this css code will be override. This is a bug in your banner carousal? Because this’s something that should work by default, like the slider.

No, our banners carousel has a bit different style then the slider. Just keep the code in the Custom CSS section.

Well, this style is not good style as it leaves space. This is not common style for slide manner. I’ve never seen the pagination icons and the next/previous icon stays out of the image. The common style is the style in the slider. My question is.. will I have a problem with this css style if I update the time?

[Author]

Posts