Assign NAV command on buttons - Owl.Carousel

Question

Assign NAV command on buttons - Owl.Carousel

Asked 6 years, 2 months ago

Viewed 277 times

1

I would like to understand how I pull the NAV command from Owl.Carousel for my buttons already stylized in a separate div.

Example:

Sample code:

$(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">&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>

1

Apparently already worked there, not even time to answer rss. Good luck with the project!

– hugocsl

2018/09/13 at 11:42

1 answer

Browser other questions tagged javascript html css javascript-events owl-carousel

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-09-12T23:03:04+00:00

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

To get more stylish, create the button event inside the callback onInitialized of the component. The onInitialized triggers 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>
<link rel="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>

<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">&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>