Next and Previous buttons break down once used

My slideshow works and cycles through the pictures. When I click the next or previous buttons this happens. http://i.imgur.com/4ONaGIL.png? http://i.imgur.com/wMKESuo.png?1 Does anyone know how to fix this? I need to keep my code how it is unless it is for some reason impossible to do this way which I'm pretty sure it is not. I copied and pasted my form from the page that loads first.

PHP/HTML

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ($_POST['action'] == 'Previous') {
        $index = $_POST['i'];
        if ($index == 0) {
            $index = count($pic_array) - 1;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        else {
            $index--;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>";
        }
        echo "<form action='gallery.php' method='post'>
            <div class='previous'>
                <button value='Previous' name='action'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </button>
            </div>
            <div class='next'>
                <button value='Next' name='action'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </button>
            </div>
            </div>
            <br>
           <input type='hidden'  name='i' value= '$index'>
           </form>";

    }
    if ($_POST['action'] == "Next") {
        $index = $_POST['i'];
        if ($index == count($pic_array) - 1) {
            $index = 0;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>";
        }
        else {
            $index++;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>";
        }
        echo "<form action='gallery.php' method='post'>
            <div class='previous'>
                <button value='Previous' name='action'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </button>
            </div>
            <div class='next'>
                <button value='Next' name='action'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </button>
            </div>
            </div>
            <br>
             <input type='hidden'  name='i' value= '$index'>
             </form>";
    }

} else {
    $index = 1;
    echo '<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>';
    echo "<div class='slide'>
            <img src= ".$dir.$pic_array[$index]." />
            <div class='slide-caption'>
                <h3 class='slide-title'> $titles[$index] </h3>
                <p class='des'> $descriptions[$index] </p>
            </div>";
    echo "<form action='gallery.php' method='post'>
            <div class='previous'>
                <button value='Previous' name='action'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </button>
            </div>
            <div class='next'>
                <button value='Next' name='action'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </button>
            </div>
            </div>
            <br>
            <input type='hidden'  name='i' value= '$index'>
           </form>";
}

CSS

.slide {
    display:inline-block;
    position: relative;
    height: 300px;
    width: 500px;
}
.slide img {

    display:block;
    max-width:100%;
    height: 300px;
    width: 500px;
 }
.slide-title {
    margin:0 6rem 1rem;
}
.des {
    margin: 0 6rem 0;
}
.slide-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    color: white;
    background-color: rgba( 0, 0, 0, 0.5 );
    opacity:0;
}
.previous {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    background-color: rgba( 0, 0, 0, 0.5);
}
.next {
    position: absolute;
    bottom: 0;
    opacity: 0;
    right: 0;
    background-color: rgba( 0, 0, 0, 0.5);
}

Javascript

$(function() {

$slide = $('.slide');
$caption = $slide.find('.slide-caption');
$next = $slide.find('.next');
$previous = $slide.find('.previous');

$slide.hover(function() {
        $caption.css('opacity', '1');
        $next.css('opacity', '1');
        $previous.css('opacity', '1');
    }, function() {
        $caption.css('opacity', '0');
        $next.css('opacity', '0');
        $previous.css('opacity', '0');
    }
);

});