Carousel Widget arrows

Hi @mstudioil

Could you please provide an example link or a screenshot for what you’re referring to so we can check if it’s doable?

Regards

This is what I made https://www.kte-soilwater.co.il/new/
Near the end of the page there is carousel with 6 flip boxes.
I have arrows on left and right, I want to move the arrows to the bottom of the carousel and make them one near the other.
I add image, the arrows are in black and on the bottom right, I do not know where they going to be right,left or center. it simple example.
this it the iamge
https://ibb.co/y6SBywC

I need to find the link I saw, but I don’t remember where I saw it

• This reply was modified 4 years, 3 months ago by mstudioIL. Reason: added link

Hi @mstudioil,

Actually, there’s no direct way to do that, but you can achieve that by adding a couple of custom CSS lines. So please copy/paste the code below into your page and let me know if it did the trick.

.premium-carousel-inner>a.carousel-arrow.carousel-prev {
    left: 93% !important;
    top: 102% !important;
}
.premium-carousel-inner>a.carousel-arrow.carousel-next {
    left: 80% !important;
   top: 102% !important;
}

Regards

Thanks,
will this be responsive? or I need to do some custom work for laptops, tablets and mobiles?

Hi @mstudioil ,

Here’s a custom CSS code that should be compatible with desktop, tablet, and mobile devices, so please copy/paste into your page and let me know if it works fine.

.premium-carousel-inner>a.carousel-arrow.carousel-prev {
    left: 93% !important;
    top: 102% !important;
}
.premium-carousel-inner>a.carousel-arrow.carousel-next {
    left: 80% !important;
   top: 102% !important;
}
@media only screen and (max-width: 460px)  {
.premium-carousel-inner>a.carousel-arrow.carousel-prev {
	left: 76% !important;
    top: 1% !important;
}
.premium-carousel-inner>a.carousel-arrow.carousel-next {
   right: 0 !important;
   top: 1% !important;
}
}
@media only screen and (min-width: 461px) and (max-width: 1024px)  {
.premium-carousel-inner>a.carousel-arrow.carousel-prev {
	left: 90% !important;
    top: 110% !important;
}
.premium-carousel-inner>a.carousel-arrow.carousel-next {
   right: 0 !important;
    top: 110% !important;
}
}

Regards.

Thanks, I checking it. it look great
if I want to place it in the left, I need to change “left” to “right” and “right” to “left”?

Hi @mstudioil,

Actually, you will need to use the code below:

.premium-carousel-inner>a.carousel-arrow.carousel-prev {
  right: 93% !important;
  top: 102% !important;
}
.premium-carousel-inner>a.carousel-arrow.carousel-next {
  right: 90% !important;
  top: 102% !important;
}
@media only screen and (max-width: 460px)  {
.premium-carousel-inner>a.carousel-arrow.carousel-prev {
	right: 85% !important;
  top: 100% !important;
}
.premium-carousel-inner>a.carousel-arrow.carousel-next {
  right: 80% !important;
  top: 100% !important;}
}
@media only screen and (min-width: 461px) and (max-width: 1024px)  {
.premium-carousel-inner>a.carousel-arrow.carousel-prev {
  right: 90% !important;
  top: 105%!important;
}
.premium-carousel-inner>a.carousel-arrow.carousel-next {
  right: 85% !important;
  top: 105% !important;
}
}

Regards.

Thanks, I still not sure where the client wants it.
If they want it in the center I need to the right/left for value looking right?
I did some checking and it is look like 45%

(How I can give the plugin more than 5 stars? I using other plugin for mega menu and the support is awful)

• This reply was modified 4 years, 2 months ago by mstudioIL.