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;
}