title: SwiperJS - Previous and Next buttons not working
body: <p>I am working with SwiperJS (www.swiperjs.com), and I am having an issue where the swipe to the next photo is working, but the previous and next buttons are not.  I have looked at every article I can find on here as well as following their documentation, and still not having any luck.</p>
  
  <pre><code>    &lt;div id="openModal" class="modalDialog" style="display: none;"&gt;
      &lt;div class="modal-content"&gt;
          &lt;a href="#close" title="Close" class="close" onclick="$('#openModal').hide()"&gt;X&lt;/a&gt;
          &lt;h2&gt;Modal Box&lt;/h2&gt;
          &lt;p&gt;Hello world&lt;/p&gt;
          &lt;script src="https://unpkg.com/swiper/js/swiper.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"&gt;
          &lt;link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"&gt;
          &lt;!-- Slider main container --&gt;
          &lt;div class="swiper-container"&gt;
              &lt;!-- Additional required wrapper --&gt;
              &lt;div id="swiper" class="swiper-wrapper"&gt;
                  &lt;!-- Slides --&gt;
                  &lt;div class="swiper-slide"&gt;&lt;img src="http://&lt;server&gt;/path/to/image.png"&gt;&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;&lt;img src="http://&lt;server&gt;/path/to/image2.png"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- If we need pagination --&gt;
              &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  
              &lt;!-- If we need navigation buttons --&gt;
              &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
              &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
  
              &lt;!-- If we need scrollbar --&gt;
              &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
          var mySwiper = new Swiper ('.swiper-container', {
              // Optional parameters
              direction: 'horizontal',
              loop: true,
              centeredSlides: true,
              slidesPerView: 1,
  
              pagination: '.swiper-pagination',
              paginationClickable: '.swiper-pagination',
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
          })
          &lt;/script&gt;
  </code></pre>
  
  <p>For initializing the Swiper JS I have also tried this right from their website:</p>
  
  <pre><code>  &lt;script&gt;
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true,
  
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },
  
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
  
      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
    &lt;/script&gt;
  </code></pre>
  
  <p>Does anybody have any ideas on what I could try?  I also found that the pagination buttons are not showing at the bottom like in their example, but that is less of an issue compared to the previous and next buttons not working.  Like I said, if I click and drag or "swipe," it moves just fine to the next slide, so I am assuming its related to the JS section, but not sure what to try.</p>