Canvas Support

owl carousel

6 replies·opened Oct 13, 2020
F
fivepointsOct 13, 2020

Hi,
I need owl carousel next and prev arrows like your theme but only just with backgound in a circle, not in a rectangle.
I need some css border-radius: 50% somewhere. I need to change backgound colors of this circle and maintain arrows white.
how can I create this? now I'm using this but there is a grey rectangle as backgound.

<section id="slider" class="slider-element boxed-slider">
    <div class="container">
      <div id="oc-slider" class="owl-carousel carousel-widget" data-margin="0" data-items="1" data-animate-in="zoomIn" data-speed="450" data-animate-out="fadeOut"> <img src="../images/1.jpg" alt="Slider"> <img src="../images/2.jpg" alt="Slider"> <img src="../images/3.jpg" alt="Slider"> </div>
    </div>
  </section>

in this link you can see:
https://www.galvanotecnicagt.it/test/processi-produttivi/zincatura.html
use this access:
username: galvanotecnicagt
password: F@iWz@55

thanks
nicola

S
SemiColonWebSTAFFOct 14, 2020

Hello,

Consider using this CSS Code:

.slider-element .owl-nav [class*=owl-] {
	border-radius: 50%;
	width: 60px;
}

You can further add your custom CSS Properties according to your needs.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

F
fivepointsOct 14, 2020

hi, ok thanks now it works.
there is only this: arrows are not well centered.
I've just incresed font size but it does not depend on font size.
I'm using:

.slider-element .owl-nav .owl-prev {
  margin-left: 10px;
  text-align: center;
}

.slider-element .owl-nav .owl-next {
  margin-right: 10px;
  text-align: center;
}

but with text-align: center does not center well arrows.

how can I do?

thanks
nicola

F
fivepointsOct 14, 2020

ah, another thing is that I don't know how ro remove the white space in home page (see attached image).
I've tried with some css stuff but nothing.

thanks
nicola

S
SemiColonWebSTAFFOct 15, 2020

Hello,

  1. The Icons alignments are sometimes off because of the viewport of the Icons and not because of the CSS. If you try using some other icon, you will notice that the Icons are well-centered. Meanwhile, you can consider using the following CSS to move the Icons:
.slider-element .owl-nav [class*=owl-] i {
	position: relative;
	margin: 0;
}

.slider-element .owl-nav .owl-prev i {
	left: 0;
}

.slider-element .owl-nav .owl-next i {
	left: auto;
	right: 0;
}

Simply change the left Value in .owl-prev and right Value in .owl-next.

  1. There is a Default of 80px added to the .content-wrap DIV. To remove that space from the bottom, add the .pb-0 Class to the .content-wrap DIV.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

F
fivepointsOct 15, 2020

I thank you for your reply!
point 1 works fine, point 2 doesn't remove padding bottom space. I don't know why: I'm using pb-0 bootstrap class as you suggested, removed py-0, used py-0 and pb-0 on .content-wrap but nothing. tried using inline style with padding: 0 but nothing.
tried adding pb-0 on <section> tag too before .content-wrap but nothing.

I don't know why. I think is something related to bootstrap.

this is the link:
https://www.galvanotecnicagt.it/test/index.html
use this access:
username: galvanotecnicagt
password: F@iWz@55

thanks
nicola

S
SemiColonWebSTAFFOct 15, 2020

Hello,

We have just checked out your Codes and the issue is that there is a .bottommargin-lg Class defined on the .row DIV in the #contatti Section. Simply remove this Class and the blank space will be gone.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard