1

Boa tarde pessoal, estou com um problema para remover a borda dos botões de navegação laterais utilizando o owl-carousel, encontrei algumas soluções porem nenhuma funcionou no meu código. Colocarei a baixo o link de uma delas e o meu código.

Pela forma que este projeto precisa ser feito, o HTML, CSS e javascript estão na mesma pagina.

https://stackoverflow.com/questions/33332387/owl-carousel-trying-to-remove-grey-border-around-nav

<HTML>
  <body>
  
    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">

    <!-- Default Theme -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">

    <!--  jQuery 1.7+  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Include js plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>



    <script>
        $(document).ready(function () {

            $('.main-content .owl-carousel').owlCarousel({
                
                loop: true,
                
                nav: true,
                navText: ["<img src='https://originhealth.com.br/wp-content/uploads/2019/12/Botão-Carousel-1-e1575493593214.png'>","<img src='https://originhealth.com.br/wp-content/uploads/2019/12/Botão-Carousel-2.png'>"],
                /*navText: [
                    '<i class="fa fa-angle-left" aria-hidden="true"></i>',
                    '<i class="fa fa-angle-right" aria-hidden="true"></i>'
                ],*/
                navContainer: '.main-content .custom-nav',
                responsive: {
                    0: {
                        stagePadding: 1,
                        margin: 0,
                        items: 1
                    },
                    600: {
                        
                        stagePadding: 200,
                        margin: 60,
                        items: 1
                    },
                    1000: {
                        
                        stagePadding: 200,
                        margin: 100,
                        items: 1
                        
                    }
                }
                
            });

        });
    </script>


    <style>
        .main-content {
            position: relative;


        }
        
        

        .custom-nav {
            position: absolute;
            top: 25%;
            left: 11.5%;
            right: 11.5%;


        }
        
        
        .owl-prev,
        .owl-next, .owl-next:focus, .owl-prev:focus {
            
            position: absolute;
            height: 100px;
            color: inherit;
            background: none;
            border: none;
            outline: none;
            z-index: 100;
            
            

        }    

        i {
            font-size: 2.5rem;
            color: #cecece;
        }

        .owl-prev {
            
               
            left: 0%;
        }

        .owl-next {
            right: 0%;
        }
        
        
    </style>


    <div class="main-content">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 1">
            </div>
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 2">
            </div>
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 3">
            </div>
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 4">
            </div>
        </div>
        <div class="owl-theme">
            <div class="owl-controls">
                <div class="custom-nav owl-nav">
                    
                </div>
            </div>
        </div>
    </div>



  </body>


</HTML>

3
  • 1
    Vc se refere às bolinhas?
    – Sam
    Commented 11/12/2019 às 16:51
  • Aos botoes laterais, vou editar na publicação. Commented 11/12/2019 às 16:55
  • 1
    Eu havia postado uma resposta e coloquei novamente. Dá uma olhada.
    – Sam
    Commented 11/12/2019 às 16:56

1 Resposta 1

2

Isso não é borda, é o background dos botões. Você pode remover colocando background: none !important; nas regras:

.owl-prev,
.owl-next, .owl-next:focus, .owl-prev:focus

Aproveite e acrescente nas mesmas regras o padding: 0 !important;, já que não vai ter cor de fundo, em tese não faz mais sentido ter padding.

Veja:

<HTML>
  <body>
  
    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">

    <!-- Default Theme -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">

    <!--  jQuery 1.7+  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Include js plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>

    <script>
        $(document).ready(function () {

            $('.main-content .owl-carousel').owlCarousel({
                
                loop: true,
                
                nav: true,
                navText: ["<img src='https://originhealth.com.br/wp-content/uploads/2019/12/Botão-Carousel-1-e1575493593214.png'>","<img src='https://originhealth.com.br/wp-content/uploads/2019/12/Botão-Carousel-2.png'>"],
                /*navText: [
                    '<i class="fa fa-angle-left" aria-hidden="true"></i>',
                    '<i class="fa fa-angle-right" aria-hidden="true"></i>'
                ],*/
                navContainer: '.main-content .custom-nav',
                responsive: {
                    0: {
                        stagePadding: 1,
                        margin: 0,
                        items: 1
                    },
                    600: {
                        
                        stagePadding: 200,
                        margin: 60,
                        items: 1
                    },
                    1000: {
                        
                        stagePadding: 200,
                        margin: 100,
                        items: 1
                        
                    }
                }
                
            });

        });
    </script>


    <style>
        .main-content {
            position: relative;


        }
        
        

        .custom-nav {
            position: absolute;
            top: 25%;
            left: 11.5%;
            right: 11.5%;


        }
        
        
        .owl-prev,
        .owl-next, .owl-next:focus, .owl-prev:focus {
            
            position: absolute;
            height: 100px;
            color: inherit;
            background: none !important;
            border: none;
            outline: none;
            z-index: 100;
            padding: 0 !important;
            
            

        }    

        i {
            font-size: 2.5rem;
            color: #cecece;
        }

        .owl-prev {
            
               
            left: 0%;
        }

        .owl-next {
            right: 0%;
        }
        
        
    </style>


    <div class="main-content">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 1">
            </div>
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 2">
            </div>
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 3">
            </div>
            <div class="item">
                <img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 4">
            </div>
        </div>
        <div class="owl-theme">
            <div class="owl-controls">
                <div class="custom-nav owl-nav">
                    
                </div>
            </div>
        </div>
    </div>



  </body>


</HTML>

1
  • 1
    Obrigado não só por resolver o problema, como também pela dica. Me ajudou muito. Commented 11/12/2019 às 17:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .