slider - 表示/非表示コードを使用して前のスライドを表示する

Question

表示/非表示コードを使用した簡単な手動テキスト スライダーがあります。すべて問題ありませんが、前のスライド ボタンをクリックすると、現在のテキストは非表示になりますが、前のテキストは表示されません。なぜ表示されないのですか？

これは私のhtmlコードです:

<div class="hand_1" id="hand_1">
    <img id="hand_img_1" src="myimage1.png" width="176.25" height="332.25" />
    <div class="hand_text_1">
        <h2>header</h2>
        <p>paragraph 1</p>
            <div class="connect-links">
                <a id="next_icon_1" href="#" ></a>
            </div>
    </div>
</div>

<div class="hand_2" id="hand_2" style="display:none;">
    <img id="hand_img_2" src="myimage2.png" width="176.25" height="332.25" />
    <div class="hand_text_2">
        <h2>header 2</h2>
        <p>paragraph 2</p>
            <div class="connect-links">
                <a id="next_icon_2" href="#"></a>
                <a id="previous_icon_2" href="#"></a>
            </div>                              
    </div>
</div>

これは私のjavascriptです：

$(document).ready(function(){
                            $('#next_icon_1').on("click", function(){
                            $('#hand_img_1').fadeOut('fast');
                            $('.hand_text_1').fadeOut('fast');
                            $('.hand_2').fadeIn('fast');
                                });                             
                            $('#previous_icon_2').on("click", function(){
                            $('#hand_img_2').fadeOut('fast');
                            $('.hand_text_2').fadeOut('fast');
                            $('.hand_1').fadeIn('fast');
                            });                             
                        });