Gostaria de entender como eu puxo o comando dos NAV's do Owl.Carousel para meus botões ja estilizados em uma div separada.
Código exemplo:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots:false,
})
});
* {
box-sizing: inherit;
}
.menu_horizontal {
position: relative;
/*padding: 0 11px;*/
box-sizing: border-box;
}
.trilho_classe {
/* Make this scrollable when needed */
overflow-x: auto;
/* We don't want vertical scrolling */
overflow-y: hidden;
/* For WebKit implementations, provide inertia scrolling */
-webkit-overflow-scrolling: touch;
/* We don't want internal inline elements to wrap */
white-space: nowrap;
/* If JS present, let's hide the default scrollbar */
.js & {
/* Make an auto-hiding scroller for the 3 people using a IE */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* Remove the default scrollbar for WebKit implementations */
&::-webkit-scrollbar {
display: none;
}
}
/* positioning context for advancers */
position: relative;
/*Crush the whitespace here*/
font-size: 0;
}
.trilho_classe_Contents {
float: left;
transition: transform .2s ease-in-out;
position: relative;
}
.trilho_classe_Contents-no-transition {
transition: none;
}
.trilho_classe_Link {
text-decoration: none;
color: #888;
/*Reset the font size*/
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: inline-flex;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
& + & {
border-left-color: #eee;
}
&[aria-selected="true"] {
color: #111;
}
}
.trilho_classe_Indicator {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 100px;
background-color: transparent;
transform-origin: 0 0;
transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}
.trilho_classe_Link2 {
text-decoration: none;
color: #888;
/*Reset the font size*/
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: inline-flex;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
& + & {
border-left-color: #eee;
}
&[aria-selected="true"] {
color: #111;
}
}
#caixas{
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 10px;
}
.conteudocaixas{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.imagemcaixas{
margin-top: 5px;
width: 12.15%;
max-width: 170px;
height: auto;
display: inline-block;
}
.position_btcx{
display: inline-block;
margin: 6px 10px 0 0;
float: right;
}
.button_cx{
background: #fff;
height: 30px;
width: 30px;
border: 1px solid #000;
border-radius: 5px;
margin-right: 5px;
}
.caixa1{
/*margin: 0 0.5% 0 0.5%;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div id="caixas">
<div class="caixa1">
<div class="menu_horizontal">
<nav id="trilho" class="trilho_classe">
<div id="trilhoContents" class="trilho_classe_Contents">
<a onclick="mostra('item1');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="true">Imagens</a>
<span id="indicador" class="trilho_classe_Indicator" style="transform: translateX(0px) scaleX(0.965781); background-color: rgb(0, 191, 255);"></span>
</div>
<div class="position_btcx" id="navContainer">
<button class="button_cx" type="button"><</button>
<button class="button_cx" type="button">></button>
</div>
</nav>
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
<div class="item"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt=""></div>
</div>
</div>
</div>
</div>