En un proyecto con Angular y Bootstrap, tengo un menú que esta debajo de un carousel
, cuando la página refresca en una vista que no sea el home
, el carousel
no se oculta a menos que le ponga un settimeout
.
Por ejemplo, si yo entro a http://localhost:4200/nosotros
el carousel
no se oculta, claro esto se logra cuando le pongo un settimeout
, pero yo quisiera que esté oculto desde el principio, sin ningún efectom solo el navbar
arriba. Pero, si la página la empiezas desde http://localhost:4200/home
todo estaría perfecto.
Nota: El código lo puse como referencia Angular, es una aplicación SPA y tiene un sistema de rutas. Sólo puse lo mas importante.
$(function () {
$('#carouselx').collapse({
hide: true
})
var ruta = "";
var ruta = window.location.pathname;
console.log(ruta)
if(ruta!='/home'){
setTimeout(function(){
$('#carouselx').collapse('hide');
},500 //nota no quiero depender de esta función para que se oculte por que hace un efecto extraño
// si le pongo un $('#carouselx').hide() se oculta pero al darle click a la vista home ya no
// el carousel ya no aparece
)
}
$('.nav-link').on('click', function () {
var ru = window.location.pathname
console.log(ru);
if (ru != '/home') {
$('#carouselx').collapse('hide');
} else if(ru=='/home'){
$('#carouselx').collapse('show');
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="carouselx" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/xcarousel1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/xcarousel2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/xcarousel3.jpg" alt="Third slide">
</div>
</div>
</div>
<app-header></app-header>
<router-outlet></router-outlet>