“上一個”和“下一個”按鈕不起作用

Question

當我單擊“上一個”和“下一個”按鈕時，幻燈片沒有啟動。

這是一個運行良好的網站： https://www.jqueryscript.net/demo/mobile-json-carousel/

這是我在 CodePen 上的代碼： https://codepen.io/Krzysiek_39/pen/poNLbgx

您知道如何縮短幻燈片的 JavaScript 代碼嗎？

我將非常感謝您的幫助。

<div class="header-container">

    <div class="menu-container">

        <div class="menu">
            <a>MENU</a>
        </div>
  
    </div>
    
</div>

    <div class="panel">
        <div class="box">
        
            <div class="slider_wrapper">
            
                <div class="slider">
                
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span></a>
                    </div>
                    
                </div>
                
                <div class="slider_btn prev_btn">previous</div>
                <div class="slider_btn next_btn">next</div>
                
                <ul class="slider_list_wrapper">
                    <li class="slider_list active_slide"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                </ul>
      
            </div>
            
        </div>
    </div>
  

Answer 1

當我單擊“上一個”和“下一個”按鈕時，幻燈片沒有啟動。

這是一個運行良好的網站： https://www.jqueryscript.net/demo/mobile-json-carousel/

這是我在 CodePen 上的代碼： https://codepen.io/Krzysiek_39/pen/poNLbgx

您知道如何縮短幻燈片的 JavaScript 代碼嗎？

我將非常感謝您的幫助。

<div class="header-container">

    <div class="menu-container">

        <div class="menu">
            <a>MENU</a>
        </div>
  
    </div>
    
</div>

    <div class="panel">
        <div class="box">
        
            <div class="slider_wrapper">
            
                <div class="slider">
                
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span></a>
                    </div>
                    
                    <div class="slider_img_wrapper">
                        <a href="#"><img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span></a>
                    </div>
                    
                </div>
                
                <div class="slider_btn prev_btn">previous</div>
                <div class="slider_btn next_btn">next</div>
                
                <ul class="slider_list_wrapper">
                    <li class="slider_list active_slide"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                    <li class="slider_list"></li>
                </ul>
      
            </div>
            
        </div>
    </div>