0

Estoy trabajando en Angular y estoy tratando de darle estilos a elementos de la libreria Swiper pero no logro hacer que se implementen. He asignado clases, ID, he seleccionado la misma etiqueta, he asignado el !important y nada. El .swiper si he podido manipularlo pero lo que son las listas no.

HTML:

<div class="container-fluid">
  <div class="col-12" id="text-sec-1">
    <h1 class="text-center">Explorar real mundo virtual con <span class="text-teycorp">Teycorp</span>.</h1>
  </div>

  <div class="col-12" id="img-sect-1">
    <img src="../../../assets/img/sec1/GameWorld.svg" alt="">
  </div>

  <div class="col-12" id="herramientas">
    <div class="expanding-collection" id="content">

      <!-- Slider main container -->
      <swiper
      #swiper

      [slidesPerView]="2"
      [spaceBetween]="10"
      [pagination]="{ clickable: true }"
      [navigation]="true"
      [grabCursor]="true"

      class="mySwiper"
      >
        <ng-template swiperSlide>Slide 1</ng-template>
        <ng-template swiperSlide>Slide 2</ng-template>
        <ng-template swiperSlide>Slide 3</ng-template>
      </swiper>
    </div>
  </div>
</div>

CSS:

.swiper {
  width: 100%;
  height: 100px;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;

}
.swiper-slide{
  background: red;
}

1 respuesta 1

0

Aquí una solución.

Cuando hice mi pregunta no me dejó añadir el TS, espero que esta vez me lo permita.

En el TS hay que hacer un encapsulado saber más sobre el encapsulado para eso hay que importar ViewEncapsulation y implementar en el decorador del componente el ViewEncapsulation.None para poder hacer una manipulación de estilos de manera Global.

Archivo TS:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

import Swiper, { Pagination, Virtual } from 'swiper';
import SwiperCore, { SwiperOptions, Navigation } from 'swiper';
SwiperCore.use([Virtual, Navigation]);


@Component({
  selector: 'app-section1',
  templateUrl: './section1.component.html',
  styleUrls: [
    './section1.component.scss',
    './section1.component.css',
  ],

  // Esto es necesario para manipular Swiper en CSS
  encapsulation: ViewEncapsulation.None,
})
export class Section1Component implements OnInit {



  constructor() { }

  ngOnInit(): void {
  }

}

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.