php - スライドショーを前後にクリックします

Question

これは、写真 1 を開始するときに、写真 2 のスイッチをオンにしたときに「クリック」と言うことができるようにするためです。これにより、現在のフレーム 1 に戻ることができ、その前にさらに 10 枚の写真を待つ必要があります。再び表示されますが、クリックするだけで戻ることができます。

問題は今です。「写真」をクリックして前後に移動できるようにする必要があります。つまり、写真 3 にある写真 1 に戻りたい場合は、クリックして戻ることができます。

写真をクリックするだけで、前後に移動できるように、グーグルで検索しようとしています。

これが私のコードです。

PHP/mysqli

echo "<div id=\"slideshow\">";
    if ($stmt = $this->mysqli->prepare("SELECT navn, title FROM slideshow ORDER BY id DESC LIMIT 5")) { 
        $stmt->execute();

        $stmt->bind_result($navn, $title);

        while ($stmt->fetch()) {
        echo "<div>
        <img src=\"/indhold/img/tilbage.png\" id=\"tilbage\">
        <h3>$title</h3>
        <img src=\"/indhold/img/$navn\" alt=\"$title\" title=\"$title\">
        <img src=\"/indhold/img/frem.png\" id=\"frem\">
        </div>";
        }

        /* Luk statement */
        $stmt->close();

    } else {
        echo 'Der opstod en fejl i erklæringen: ' . $this->mysqli->error;
    }
    echo "</div>";

ここにcssコード：

#slideshow {
    width: 708px;
    float: right;
    margin-bottom: 42px;
    min-height: 99px;
}
#slideshow > div {
    position: absolute;

}
#slideshow > div h3 {
    position: absolute;
    bottom: -35px;
    padding: 11px;
    color: #ffffff;
    width: 97%;
    background-color: #002855;
}
#slideshow > div #tilbage {
    position: absolute;
    left: 6px;
    bottom: 35px;
    z-index: 1000;
}
#slideshow > div #frem {
    position: absolute;
    right: 6px;
    bottom: 35px;
    z-index: 1000;
}

ここにjqueryコード：

<script>
        $(function() {
            $("#slideshow > div:gt(0)").hide();
            setInterval(function() { 
              $('#slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
            },  9500);
        });
    </script>