Slider picture setting

Your style is not so good in terms of slide. If I use Wootmart slider, everything is ok, except the speed of the slide which is very slow. But if I use the banner carousel. The speed is good but the position of the pagination and next/previous icons are not good. So, there’s no any good way to go with.

Your css code just put the pagination icon in place but not the next/previous icon. And When I try to click on the next icon, it’s not working like slider. Have to use mouse to drag to make it slide

Try to add the following CSS code also

.woodmart-carousel-container .banners-carousel .owl-nav > div {
    color: #FFF;
}
.woodmart-carousel-container .banners-carousel .owl-nav .owl-prev {
    left: 5px;
}
.woodmart-carousel-container .banners-carousel .owl-nav .owl-next {
    right: 5px;
}

No, still not working after adding all of your css code given. https://www.dropbox.com/s/12f4z9rsh2642sq/sc49.png?dl=0

Arrows are on the image now https://gyazo.com/110057f277174994ff4203be675999b1

Now it’s ok, thanks. At that time I don’t know why it’s not updated. I custom font css but it’s also not updated. Now both the fonts and arrows are now updated.

Just one thing. In mobile view, how can I remove this space as described here https://www.dropbox.com/s/7tq5gh89rzwrt31/Screenshot_20191106_224301%20%281%29.jpg?dl=0

– To remove that space in mobile view I add this css code .whb-header {margin-bottom:0px!important;}to Custom CSS for mobile and Custom CSS for mobile landscape. But it’s not working.

– To add margin bottom I don’t know what to do for mobile. However, in desktop it looks ok for me.

You just need to add a negative margin top -40px for the row with the slider and add some margin to the bottom as well. You can do this with WPBakery page builder without custom CSS.

Actually I know how to add the margins there and I already tried but it applies this change to all desktop and mobile view. I just want to change this margin only in the mobile view and in the home page only.

OK, then try to use the following CSS code instead

@media (max-width: 767px) {
.home .banners-carousel {
	margin-top: -40px;
	margin-bottom: 40px;
}
}

It’s ok now. But after you give me css code to custom style on dot and arrow icons, it seems that blank content jumping comes when I reload a page in mobile. Look at this video https://www.dropbox.com/s/ww61h27dgr9urya/video_20191107_221150.mp4?dl=0 and notice the margin or padding bottom, a blank space, appear below the first slide and disappear when the page finishes the load.

Not only happens in mobile but in desktop also. Check this screenshot https://www.dropbox.com/s/df73n2b9hshk8f2/sc60.png?dl=0

Try to add the following code also

body [data-hide_pagination_control=no] .owl-carousel:not(.owl-loaded) {
    padding-bottom: 0 !important;
}

Work perfectly! Thanks! But I’m afraid this style will not work after the next update.

Don’t worry, after the update, all changes will be staying.

Regards.

[Author]

Posts