es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Fondo estático de Owl Carousel

21 Jul, 2023 Programación

Solo quiero que el texto cambie y que el fondo permanezca estático.
Aquí está mi código:

$('.owl-carousel').owlCarousel({
  nav: true,
  navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
  items: 1,
  responsiveClass: true,
  autoHeight: true,
  lazyLoad: true,
  lazyLoadEager: 2
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel longread_slider_text owl-lazy" style="background: url('https://picsum.photos/1000/300'); background-size: contain;
            background-repeat: no-repeat;
            background-position: center;">
  <div class="slide-item">
    <img src="https://picsum.photos/300/300" alt="image" style="opacity: 0;">
    <div class="text">
      <div>
        <span class="title">Título Uno</span>
      </div>
    </div>
  </div>
  <div class="slide-item">
    <img src="https://picsum.photos/300/300" alt="image" style="opacity: 0;">
    <div class="text">
      <div>
        <span class="title">Título Dos</span>
      </div>
    </div>
  </div>
</div>

Establezco el fondo para el carrusel y hago que las imágenes sean invisibles. Pero luego el fondo cubre los puntos de navegación.
¿Alguna idea de cómo implementar esto?

enter image description here

Actualización: Versión de Owl Carousel 2.3.4

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que solo cambie el texto y el fondo permanezca estático en Owl Carousel, puedes eliminar el estilo de fondo del div longread_slider_text y agregar un div separado dentro de cada diapositiva con la imagen de fondo y establecer la propiedad z-index del div interno más bajo que el contenido de la diapositiva. Aquí está el código actualizado:

    <!-- language: lang-html -->

<div class="owl-carousel longread_slider_text owl-lazy">
  <div class="slide-item">
    <div class="slide-background" style="background-image: url('https://picsum.photos/1000/300');"></div>
    <div class="text">
      <div>
        <span class="title">Título Uno</span>
      </div>
    </div>
  </div>
  <div class="slide-item">
    <div class="slide-background" style="background-image: url('https://picsum.photos/1000/300');"></div>
    <div class="text">
      <div>
        <span class="title">Título Dos</span>
      </div>
    </div>
  </div>
</div>

    Luego, puedes aplicar el siguiente CSS para posicionar correctamente el contenido de la diapositiva:

    .owl-carousel.longread_slider_text {
  position: relative;
}

.slide-item {
  position: relative;
  z-index: 1;
}

.slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

    Con la propiedad z-index, el contenido de la diapositiva estará sobre el fondo y los puntos de navegación no se cubrirán.

Comments are closed.