Wordpress doesn't execute jquery code correctl

问题:

I have worked with the google map api and a carousel system to have a nice list of locations.

Locally the script works perfect and without any issues.

I'm currently using: https://github.com/haripaddu/jQuery-Vertical-Carousel

At first when integrating the code the functions wouldn't work and I saw on other posts the solution was to wrap it hence it's what I did but the script still doesn't work.

What doesn't work is the fact that even if I have 10 li the carousel doesn't start it just displays all my li.

Edit: From what iv'e tested what I think is happening is that the jQuery wrap doesn't allow the $.fn to work properly as it is never the $(".recentArticles") that is returned but always the full DOM element.

I have tried:

jQuery(document).ready(function(){ /*my code*/ });

Also:

jQuery(document).ready(function($){ /*my code*/ });

I also had to wrap the line:

 var currentItemOffset = $("> :nth-child(" + currentItem + ")", carouselGroup).offset();

Like this:

var currentItemOffset = jQuery(function($) {$("> :nth-child(" + currentItem + ")", carouselGroup).offset();});

Otherwise I would get an error.

In my functions.php I also made sure to include jQuery when enqueuing my javascript:

wp_enqueue_script( 'verticalCarousel', get_template_directory_uri() . '/js/jQuery.verticalCarousel.js', array( 'jquery' ), '5.0.9', false );

However even with all this is still doesn't work no animation, it displays all the events even if I have 4.

HTML:

<div class="sidebarLocation">
    <div class="recentArticles">
        <div class="recentArticlesHeader">
            <a href="#" class="ca_goUp"><i class="fas fa-chevron-up"></i></a>
        </div>
            <ul id="sidebarLocation" class="recentArticlesGroup vc_list sidebarLocationUl" style="">
                <li id="0"><a href="javascript:zoomIn(0,6,'Header 1')" class="card"><img src="lopburi.jpg"><div class="cardContent"><h4>Header 1</h4><p></p><p>address</p>
<p></p><p></p><p>[phone]</p>
<p></p></div></a></li>
                <li id="1"><a href="javascript:zoomIn(1,6,'Header 2')" class="card"><img src="bangi.jpg"><div class="cardContent"><h4>Header 2</h4><p></p><p>address</p>
<p></p><p></p><p>[phone]</p>
<p></p></div></a></li>
                <li id="2"><a href="javascript:zoomIn(2,6,'Header 3')" class="card"><img src="portklang.jpg"><div class="cardContent"><h4>Header 3</h4><p></p><p>address</p>
<p></p><p></p><p>[phone]</p>
<p></p></div></a></li>
                <li id="3"><a href="javascript:zoomIn(3,6,'Header 4')" class="card"><img src="factory.jpg"><div class="cardContent"><h4>Header 4</h4><p></p><p>address</p>
<p></p><p></p><p>[phone]</p>
<p></p></div></a></li>
            </ul>
        <div class="recentArticlesFooter">
            <a href="#" class="ca_goDown"><i class="fas fa-chevron-down"></i></a>
        </div>
    </div>
</div>

JavaScript:

jQuery(document).ready(function($){
    $.fn.verticalCarousel = function(myoptions) {
        var carouselContainerClass = "vc_container";
        var carouselGroupClass = "vc_list";
        var carouselGoUpClass = "ca_goUp";
        var carouselGoDownClass = "ca_goDown";

        var options = myoptions;
        var carouselContainer;
        var carouselGroup;
        var carouselUp;
        var carouselDown;
        var totalItems;

        var setContainerHeight = (function(){
            var containerHeight = 0;
            var marginTop = 0;
            if (options.showItems == 1){
                containerHeight = $("> :nth-child(" + currentItem + ")", carouselGroup).outerHeight(true);
            }
            else{
                for (i = 1; i <= options.showItems; i++) {
                    containerHeight = containerHeight + $("> :nth-child(" + i + ")", carouselGroup).outerHeight(true);
                }
            }
            var nextItem = options.showItems + currentItem;
            marginTop = $("> :nth-child(" + nextItem + ")", carouselGroup).css("marginTop");
            containerHeight = containerHeight - parseInt(marginTop);
            $(carouselContainer).css("height", containerHeight);
        });
        var setOffset = (function(){
            var currentItemOffset = jQuery(function($) {$("> :nth-child(" + currentItem + ")", carouselGroup).offset();});
            console.log(currentItemOffset);
            var carouselGroupOffset = $(carouselGroup).offset();
            var offsetDiff = carouselGroupOffset.top - currentItemOffset.top;
            $(carouselGroup).css({
                "-ms-transform": "translateY(" + offsetDiff + "px)",
                "-webkit-transform": "translateY(" + offsetDiff + "px)",
                "transform": "translateY(" + offsetDiff + "px)"
            })
        });

        var updateNavigation = (function(direction){
            console.log(currentItem);
            if (currentItem == 1){
                $(carouselUp).addClass("isDisabled");
            }
            else if (currentItem > 1){
                $(carouselUp).removeClass("isDisabled");
            }
            if(currentItem == totalItems || currentItem + options.showItems > totalItems){
                $(carouselDown).addClass("isDisabled");
            }
            else if (currentItem < totalItems){
                $(carouselDown).removeClass("isDisabled");
            }
        });

        var moveCarousel = (function(direction){
            if (direction == "up"){
                currentItem = currentItem - 1;
            }
            if (direction == "down"){
                currentItem = currentItem + 1;
            }
            updateNavigation();
            setContainerHeight();
            setOffset();
        });

        return this.each(function() {
            $(this).find("." + carouselGroupClass).wrap('<div class="' + carouselContainerClass + '"></div>');
            carouselContainer = $(this).find("." + carouselContainerClass);
            carouselGroup = $(this).find("." + carouselGroupClass);
            carouselUp = $(this).find("." + carouselGoUpClass);
            carouselDown = $(this).find("." + carouselGoDownClass);
            totalItems = $(carouselGroup).children().length;
            updateNavigation()
            setContainerHeight();
            setOffset();
            $(carouselUp).on("click", function(e){
                if (currentItem > 1){
                    moveCarousel("up");
                }
                e.preventDefault();
            });
            $(carouselDown).on("click", function(e){
                if (currentItem + options.showItems <= totalItems){
                    moveCarousel("down");
                }
                e.preventDefault();
            });
        });
    };
});
 jQuery(document).ready(function($){
        $(".recentArticles").verticalCarousel({
             currentItem: 1,
             showItems: 2,
        });
 });