Incorporating slick.js with Angular, I am facing a challenge in adding a custom div with a dashed border after each image in my slick slider. This div should be positioned between the gaps of two slides. The slick slider is implemented with vertical scrolling, as shown below:
https://i.sstatic.net/EwEBr.png
(P.S. The above image illustrates a slider set up in a vertical format. As I do not have access to a picture editing tool on Linux, I rotated an image from the slick website vertically to showcase my objective)
The black dotted lines in the image represent a custom div with a black border, resembling what is described in the image below once perfectly placed between the gaps of two slides:
https://i.sstatic.net/MrwIp.png
I am struggling to find a way to attach this border with its unique styling preferences.
My Code:
slider-component.component.html
<!--slider image container-->
<div #slick class="mySlider" id="images">
<div class="item image-container" *ngFor="let data of serverData; let ind = index;"
id="imageContainer">
<img (load)="imageLoaded($event.target)"
src="{{ data['imageUrl'] }}"
class="img-fluid target slick-img"
[ngStyle]="{'zoom': zoom}"
alt="image container"
>
<!-- dashed ruler after every image slide -->
<hr class="dashed-line">
</div>
</div>
slider-component.component.ts
private slickSetting = {
slidesToScroll: 1,
slidesToShow: 1,
centerMode: true,
centerPadding: '50px',
arrows: false,
dots: false,
vertical: true,
verticalSwiping: false,
draggable: false,
};
private getSlick(): any{
return $(this.slick.nativeElement);
}
private initializeSlick() {
let slickElement = this.getSlick();
slickElement.slick(this.slickSetting);
}
What I Tried?
I have explored the documentation for slick and extensively searched on Google, but have been unable to find a satisfactory solution to this issue.
I also attempted using CSS by assigning the parent class position: relative and setting the dashed line div to position: absolute, but these methods did not work. Is there an effective approach for achieving this?
Why I am doing this?
The intention here is not just to implement a dashed border, but to insert a custom div between two slides of a slider. This custom div can be styled with borders, and I plan to incorporate additional functionalities in the future when users interact with the div.
edit1:
I tried MaxiGui's solution mentioned below and managed to display the dashed div beside my image, as shown in this snapshot:
https://i.sstatic.net/F7jHU.png
However, I aim to position this div at the bottom (in the gap between all images) of the vertical scroll slider.
Answer is below
If you are encountering a similar difficulty, refer to the initial answer followed by my solution which includes adjustments based on the preceding response.