I have a strange behavior with a list templated with slicked list.
I have listed contents per month of creation. I used slicked list template to manage this list in order to open modal window and use Bootstrap 3 modal version. Into this modal window, I have a contents slideshow, which is a list of contents managed with slicked list too. It works nicely, except if the number of contents is less than 4. For 1, 2 or 3 contents, all contents overlap.
I tried to see what happens whith Firebug, but as soon as I click on Firebug, the contents move to their correct place. I attach the screenshot to show the result. Does anyone have any idea of what might happen ?
Thanks in advance
Here is the code created by the template for the list items :
<script type="text/javascript">
JCck.Core.baseURI = "/auxmarins2";
jQuery(document).ready(function(){jQuery('.my-slick-class').slick({
autoplay: true,
prevArrow: 'Previous',
nextArrow: 'Next',
dotsClass: 'slick-dots',
mobileFirst: true,
responsive: [{breakpoint: 768, settings: {slidesToShow: 2,}},{breakpoint: 992, settings: {slidesToShow: 3,}},],
swipeToSlide: true,
});
});
</script>
Hi Mlep
I have had a quick play and I think it has to do with Slick calculating position pre modal opening, and then recalculating after modal is open.
Might need to add some js to resolve
Discussion:
Carousel doesn't seem to behave if placed within a modal window #1085
Possible remedies:
slick-js-and-multiple-twitter-bootstrap-modal-windows
Bootstrap 3 + slick.js Multiple Modal window
Unfortunately I am not able to check further as going away today....
Bucklash
Oh, and also
The same slick is being used repeatedly with the same 'slick-class' for different slides.
Not sure if it's possible to do it like that.
They would all have to have different slick classes....
hmmm
... So maybe enure that 'this slick.js 'turned 'off' and that youadd the necessary code to your joomla templates js file so that it is only loadad once so to speak
...
Here is a way to dynamically apply to slick to your list results...
how-to-pass-this-to-slick-js-plugin-and-create-multiple-carousels-with-a-l