Assign NAV command on buttons - Owl.Carousel

Navigation
0

I would like to understand how I pull the Owl.Carousel NAV's command for my already styled buttons on a separate div.

Example:

Samplecode:

$(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><linkrel="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><divid="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">&lt;</button>
					<button class="button_cx" type="button">&gt;</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>
    
asked by anonymous 13.09.2018 / 00:16

1 answer

1

You can fire events prev.owl.carousel and next.owl.carousel by clicking the buttons. Just assign the two buttons a click event and trigger the Owl Carousel events above according to the clicked button.

To look more elegant, create the buttons event inside the% component callback of the component. onInitialized fires when the plugin has been initialized. ( Component documentation )

Your code should look like this: 

$(document).ready(function(){
   var owl = $('.owl-carousel'); // cria uma váriável para o elemento
   owl.owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      dots:false,
      onInitialized: function(){
         $("#navContainer .button_cx") // seleciona os botões
         .click(function(){
            var idx = $(this).parent().children().index(this); // pega o índice do botão clicado
            owl.trigger( (idx == 1 ? 'next' : 'prev') + '.owl.carousel'); // atribui o evento ao devido botão
         });
      }
   });
});

Let's see it working: 

$(document).ready(function(){
   var owl = $('.owl-carousel'); // cria uma váriável para o elemento
   owl.owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      dots:false,
      onInitialized: function(){
         $("#navContainer .button_cx") // seleciona os botões
         .click(function(){
            var idx = $(this).parent().children().index(this); // pega o índice do botão clicado
            owl.trigger( (idx == 1 ? 'next' : 'prev') + '.owl.carousel'); // atribui o evento ao devido botão
         });
      }
   });
});
/*apenas para exemplo*/ .item { height: 30px; background: red !important; }

* {
	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/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script><divid="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">&lt;</button>
					<button class="button_cx" type="button">&gt;</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>
    
13.09.2018 / 01:03
Python - KeyError Show data from the mysql database on a php / html page