title: Making the next and previous buttons into arrows
body: <p>I have a slideshow that has buttons for next and previous (I'm not using jquery) and I need to turn my next and previous buttons into arrows and I have no idea where to start. I couldn't find an answer anywhere else for this either.</p>
  
  <p>CSS</p>
  
  <pre><code>.slide {
      display:inline-block;
      position: relative;
  }
  .slide img {
      display:block;
      max-width: 100%;
      height: 300px;;
      width: 500px;
  }
  .slide img:hover + .slide-caption {
      opacity: 1;
  }
  
  .slide-title {
      margine:0 0 1rem;
  }
  .slide-caption {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 1rem;
      color: white;
      background-color: rgba( 0, 0, 0, 0.5 );
      opacity:0;
  }
  .slide-caption:hover {
      opacity: 1;
  }
  /*div.description {
      color:blue;
  }*/
  
  div.prev {
      text-align: left;
  }
  div.next {
      margin-left:400px;
      margin-top:0px;
  }
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>while ($row = $result-&gt;fetch_assoc()) {
      $pic_array[$count] = $row['pic_url'];
      $titles[$count] = $row['title'];
      $descriptions[$count] = $row['description'];
      $count++;
  }
  
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
      if ($_POST['action'] == 'Previous') {
          $index = $_POST['i'];
          if ($index == 0) {
              $index = count($pic_array) - 1;
              echo "&lt;div class='slide'&gt;
                       &lt;img src= ".$dir.$pic_array[$index]." /&gt;
                       &lt;div class='slide-caption'&gt;
                          &lt;h3 class='slide-title'&gt; $titles[$index] &lt;/h3&gt;
                          &lt;p&gt; $descriptions[$index] &lt;/p&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;";
          }
          else {
              $index--;
              echo "&lt;div class='slide'&gt;
                       &lt;img src= ".$dir.$pic_array[$index]." /&gt;
                       &lt;div class='slide-caption'&gt;
                          &lt;h3 class='slide-title'&gt; $titles[$index] &lt;/h3&gt;
                          &lt;p&gt; $descriptions[$index] &lt;/p&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;";
          }
          echo '&lt;form action="gallery.php" method="post"&gt;
          &lt;input type="submit" name="action" value="Previous"&gt;
          &lt;input type="submit" name="action" value="Next"&gt;';
          echo "&lt;input type='hidden' name='i' value= '$index'' &gt;";
  
      }
      if ($_POST['action'] == "Next") {
          $index = $_POST['i'];
          if ($index == count($pic_array) - 1) {
              $index = 0;
              echo "&lt;div class='slide'&gt;
                       &lt;img src= ".$dir.$pic_array[$index]." /&gt;
                       &lt;div class='slide-caption'&gt;
                          &lt;h3 class='slide-title'&gt; $titles[$index] &lt;/h3&gt;
                          &lt;p&gt; $descriptions[$index] &lt;/p&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;";
          }
          else {
              $index++;
              echo "&lt;div class='slide'&gt;
                       &lt;img src= ".$dir.$pic_array[$index]." /&gt;
                       &lt;div class='slide-caption'&gt;
                          &lt;h3 class='slide-title'&gt; $titles[$index] &lt;/h3&gt;
                          &lt;p&gt; $descriptions[$index] &lt;/p&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;";
          }
  
          echo '&lt;form action="gallery.php" method="post"&gt;
          &lt;input type="submit" name="action" value="Previous"&gt;
          &lt;input type="submit" name="action" value="Next"&gt;';
          echo "&lt;input type='hidden' name='i' value= '$index' &gt;";
  
  
      }
  
  } else {
      $index = 1;
      echo "&lt;div class='slide'&gt;
              &lt;img src= ".$dir.$pic_array[$index]." /&gt;
              &lt;div class='slide-caption'&gt;
                  &lt;h3 class='slide-title'&gt; $titles[$index] &lt;/h3&gt;
                  &lt;p&gt; $descriptions[$index] &lt;/p&gt;
              &lt;/div&gt;
           &lt;/div&gt;";
      echo '&lt;form action="gallery.php" method="post"&gt;
          &lt;div class="prev"&gt;
                  &lt;input type="submit" name="action" value="Previous"&gt;
          &lt;/div&gt;
          &lt;div class="prev"&gt;
          &lt;input type="submit" name="action" value="Next"&gt;
          &lt;/div&gt;';
      echo "&lt;input type='hidden' name='i' value= '$index' &gt;";
      /*echo "&lt;div class='description'
                  &lt;p&gt; $descriptions[$index] &lt;/p&gt;
            &lt;/div&gt;";*/
  
  
  }
  </code></pre>