Please help me with the js code

Kal_HoangNov 14, 2023

Hi,

I like the way you build the template with async js. But I don't know how to use the plugin within my html. Ex: I want to have a flex slider (with thumbnail nav) on my page. I tried this way but it's not work:

<section id="content">
    <div class="content-wrap">
        <div class="container">
            <div class="fslider" data-arrows="true" data-animation="slide" data-controlNav="thumbnails">
                <div class="flexslider">
                    <div class="slider-wrap">
                        <div class="slide" data-thumb="https://loremflickr.com/400/300?random=1"><a href="#"><img src="https://loremflickr.com/1920/1280?random=1" alt="Image"></a></div>
                        <div class="slide" data-thumb="https://loremflickr.com/400/300?random=2"><a href="#"><img src="https://loremflickr.com/1920/1280?random=2" alt="Image"></a></div>
                        <div class="slide" data-thumb="https://loremflickr.com/400/300?random=3"><a href="#"><img src="https://loremflickr.com/1920/1280?random=3" alt="Image"></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
</section>

<script src="{{ 'assets/js/functions.js' | theme }}"></script>
<script>
window.addEventListener('pluginFlexSliderReady', () => {
    var flexpParent = new FlexSlider('.slider-wrap', {
        animation: "slide",
        controlNav: "thumbnails"
    });
});
</script>

Thanks

SemiColonWebSTAFFNov 17, 2023

Hello,

The Codes you are using is incorrect. Please follow the steps below:

Add the .customjs Class to the .fslider Element. Example:

<div class="fslider customjs" data-arrows="true" data-animation="slide" data-controlNav="thumbnails">

Use this JS Code as follows:

window.addEventListener('pluginFlexSliderReady', function() {
    jQuery('.fslider .flexslider').flexslider({
        selector: '.slider-wrap > .slide',
        animation: 'slide',
        controlNav: 'thumbnails',
    });
});

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.