使用 fullPage.js moveTo 有什么问题？

Question

I want to make a button to move a specific page...like if I click the #move_to_slide2 , then the page moves to slide2, but the moveTo function doesn't work.

There is only one section and 4 slides.

How can I make the move to button?

<div class="section" anchor="s0">
    <div class="slide" data-anchor="slide1">
        <div class="container w-1/3 mx-auto">
            <div class="my-40">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="text-xl font-bold text-center text-unifolio-blue">Getting Started</div>
                    <div class="flex w-full mt-5 items-center justify-center">
                        <p id="move_to_slide1">
                        <p class="w-full h-6 rounded-full bg-unifolio-blue cursor-pointer"></p>
                        </p>
                        <div class="h-px w-full bg-gray-400"></div>
                        <p id="move_to_slide2">
                        <p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
                        </p>
                        <div class="h-px w-full bg-gray-400"></div>
                        <p id="move_to_slide3">
                        <p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
                        </p>
                        <div class="h-px w-full bg-gray-400"></div>
                        <div class="flex w-full mb-5 items-center text-center justify-center">
                            <p id="move_to_slide1">
                            <p class="w-full h-6 text-xs text-unifolio-blue cursor-pointer">아이디 및 비밀번호 설정</p>
                            </p>
                            <div class="h-px w-full bg-white"></div>
                            <p id="move_to_slide2">
                            <p class="w-full h-6 text-xs text-gray-400 cursor-pointer">개인정보 입력</p>
                            </p>
                            <div class="h-px w-full bg-white"></div>
                            <p id="move_to_slide3">
                            <p class="w-full h-6 text-xs text-gray-400 cursor-pointer">핸드폰 인증</p>
                            </p>
                            <div class="h-px w-full bg-white"></div> 

this is my script.

<script>
    $(document).ready(function() {
        $('#fullpage').fullpage({
            //options here
            autoScrolling:true,
            scrollHorizontally: true
        });
        $('#move_to_slide1').click(function(){
        fullpage_api.moveTo(1,slide1);
        });
        $('#move_to_slide2').click(function(){
        fullpage_api.moveTo(1,slide2);
        });
        $('#move_to_slide3').click(function(){
        fullpage_api.moveTo(1,slide3);
        });
        $('#move_to_slide4').click(function(){
        fullpage_api.moveTo(1,slide4);
        });
    });
</script>

Answer 1

You are not passing the correct parameters to moveTo .* 2nd param should be the slide anchor string or the slide index.

For example:

fullpage_api.moveTo(1, 1); // using slide index
fullpage_api.moveTo(1, 'slide1');  // using slide anchor