Currently, I am utilizing Slick and jQuery for a carousel on my website. There seems to be an issue with the overriding style for the slick dots set in the component. Despite specifying the style in the component's CSS, the slick dots do not reflect this change when viewed on localhost. The default slick.css is being prioritized over the component's CSS.
Upon inspecting the internal stylesheet of the webpage, it is evident that the default slick.css & slick-theme.css are loaded before the component's CSS. This order should result in the component styles taking precedence, but for some reason, they are not applied correctly.
Below is the Angular.json configuration:
"styles": [
"src/styles.scss",
"node_modules/bulma/css/bulma.min.css",
"node_modules/slick-carousel/slick/slick-theme.css",
"node_modules/slick-carousel/slick/slick.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
],
Here is a snippet from my component SCSS file:
@import "../../shared_scss/mixin.scss";
@import "../../shared_scss/variables.scss";
/* Slider */
.carousel {
background-size: cover;
height: auto;
margin-top: 50px;
margin-bottom: 0 !important;
.carousel_item {
&:hover {
cursor: pointer;
}
}
.slick-dots {
bottom: 40px;
li button:before {
font-size: 20px;
}
li.slick-active button:before {
opacity: .75;
color: $neon-green;
}
}
}
// Responsive homepage carousel
@include breakpoint(xs) {
.carousel {
margin-top: 40px;
.slick-dots {
bottom: 5px;
}
}
}
Additionally, here is the TypeScript code from my component file:
import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';
import 'slick-carousel';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit, AfterViewInit {
ngAfterViewInit(): void {
// Slick carousel initialization
$('.carousel').slick({
slidesToShow: 1,
adaptiveHeight: true,
arrows: false,
dots: true,
infinite: true,
speed: 300
});
}
constructor() { }
ngOnInit() {
}
}