1

estoy queriendo utilizar owl slider en alguna directiva, o en alguna vista de angular pero no me está funcionando correctamente, ya que se renderiza el HTML pero el jQuery no está actuando.

A Owl slider, lo puse dentro de una directiva, pero no me está cargando. Cuando lo pongo afuera de una directiva, como código nativo de HTML sin ninguna relación con Angular, funciona perfectamente. Mi código es el siguiente:

Directiva:

  .directive('owlSlider', function () {
    return {
      templateUrl: '../../views/slider.html',
      restrict: 'AE',
      link: function postLink(scope, element) {
        $(element).owlCarousel({
            navigation: true, // Show next and prev buttons
            slideSpeed: 300,
            paginationSpeed: 400,
            singleItem: true,
            navigationText: ["", ""]
        });
      }
    };
  });

Llamo a la directiva:

//HTML

<owl-slider class="owl-slider-full owl-carousel owl-theme light-pagination square-pagination dark-pagination-without-next-prev-arrow main-slider"></owl-slider>"

Contenido html de la directiva (es el templateUrl de la directiva)

   
<div class="item owl-bg-img" style="background-image:url('img/slider1.jpg');"></div>    
3
  • 1
    Hola Federico. Bienvenido a Stackoverflow en español. Con el código que pones no es suficiente para reproducir tu problema y así poder ayudarte. Edita tu pregunta y agrega el código html y javascript que tienes y así obtendrás una respuesta.
    – devconcept
    Commented el 12 jul. 2016 a las 12:19
  • Donde defines la clase owl-bg-img? Intentaste usando esa clase y jquery puro? Puedes verificar que la plantila se carga en la pestaña network de las herramientas de desarrollador del navegador? Pregunto porque a mi me está funcionando pero tuve que modificar clases css para lograrlo ya que owl carrousel no funciona usando imagenes de fondo sin hacer algunas modificaciones.
    – devconcept
    Commented el 12 jul. 2016 a las 17:30
  • Sí, era un problema de las clases que estaban definidas en otro documento que no incluí ya que pensé que owl-bg-img era nativa del plugin. Muchísimas gracias por la ayuda! Commented el 12 jul. 2016 a las 18:16

1 respuesta 1

1

Por defecto owl carrousel está diseñado para trabajar con tags <img> pues cuando usas backgrounds debes especificarle height a los elementos para que no se collapsen.

elemento colapsado

Aquí te dejo un demo funcionando donde las imagenes tienen un alto fijo de 200px, puedes cambiarlo al tamaño que gustes.

angular.module('app', [])
  .directive('owlSlider', function() {
    return {
      template: '<div class="item orange owl-bg-img" style="background-image: url(http://www.owlgraphic.com/owlcarousel/assets/img/demo-slides/touch.png)"/>' +
        '<div class="item yellow owl-bg-img" style="background-image: url(http://www.owlgraphic.com/owlcarousel/assets/img/demo-slides/css3.png)"/>',
      restrict: 'AE',
      link: function postLink(scope, element) {
        $(element).owlCarousel({
          navigation: true, // Show next and prev buttons
          slideSpeed: 300,
          paginationSpeed: 400,
          singleItem: true,
          navigationText: ["", ""]
        });
      }
    };
  });
.orange {
  background: #ff8a3c;
}
.yellow {
  background: #ffd800;
}
.owl-bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" />
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" />
<div ng-app="app">
  <owl-slider class="owl-slider-full owl-carousel owl-theme light-pagination square-pagination dark-pagination-without-next-prev-arrow main-slider"></owl-slider>
</div>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.