slickNext not working in center mode slick slider

I am having a situation where on clicking on first slide of slider, i need the carousel to move to next slide. Below is the code which i am using to create a slider

var $myanimSlider = $('.animslider').slick({
    dots: true,
    arrows: true,
    slidesToShow: 3.6,
    slidesToScroll: 1,
    vertical: false,
    autoplay: false,
    autoplaySpeed: 2500,
    infinite: false,
    focusOnSelect: true,
    touchMove: true,
    speed: 500,
    centerMode: true,
    centerPadding: '0',    
    cssEase: 'linear',
    prevArrow: '<div class="animslick_nav prev-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
    nextArrow: '<div class="animslick_nav next-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
    appendDots: $('.animDots'),
    responsive: [
        
        { breakpoint: 767,
            settings: {
                arrows: true,
                dots: true,
                slidesToShow: 1
            }
        }
    ]
}).slickAnimation();

and i was trying to use the slickNext on click of first slide so that it may move to second slide.

$('#slick-slide00').click(function() {
    $myanimSlider.slick("slickNext");
});

slick-slide00 is the id of first slide but the above code is not working.

Can someone help me understand what is the issue and there is no errors in the console also.