[Off topic] Carousels In modals

support
1

Hello!

Basically, I am trying to make a “portfolio-grid” where I can show off work and have a description underneath.
Additionally I want to add a carousel in the modal to show off more works!

I am using the slick carousel in my project.

On the main page, the carousel seems to work fine, but when I try to put it into my modal, it seems to get buggy and I dont quite understand why.

I have made a testing repo here, simply clone it and run hugo server

The main work is inside of modals.html and static/js/myJS.js

I am certain that the code for my carousel is right, cause it works fine if I put it outside the modal, I just dont understand what is clashing with it while it is inside the modal.

Any tips and tricks are appreciated!

EDIT:

So I’ve tried to add this code into my js:

$('.modal').on('shown.bs.modal', function (e) {
	$('.your-class').slick('setPosition');
	$('.wrap-modal-slider').addClass('open');
})

This kind-of works, but whenever I first open my modal, the images are placed very buggily and after i interact with the carousel, it seems to work fine.

2

after i interact with the carousel, it seems to work fine.

More than likely that’s a jQuery issue and not Hugo. Check the console in your browser for Javascript errors, and check the docs and forums for Slick Carousel.

4

This a support forum for Hugo only and we do not offer support for JS plugins.

I am closing this topic because it is OT.