jQuery #js #slick

initialize slick slider über klasse.js

 <div class="detailimages" data-aos="fade-up">
    <div class="slick">
        <f:for each="{product.positionImages}" as="image">
            <div>
                <a class="slickLightbox" href="<f:uri.image image='{image}' />">
                    <f:image image="{image}" height="320c" treatIdAsReference="1" alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
                </a>
            </div>
        </f:for>
    </div>
    <div class="slickThumb">
        <f:for each="{product.positionImages}" as="image">
            <div>
                <f:image image="{image}" height="65c" treatIdAsReference="1" alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
            </div>
        </f:for>
    </div>
</div>


 if($('.detailimages').length){
        $('.detailimages .slick').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            adaptiveHeight: true,
            asNavFor: '.detailimages .slickThumb'
        });
        $('.detailimages .slickThumb').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: '.detailimages .slick',
            dots: false,
            arrows: false,
            centerMode: false,
            focusOnSelect: true,
            adaptiveHeight: true,
            infinite: true
        });
    }