1

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>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.