title: Image slider positioning
body: <p>I am looking for some advice/support on an image slider which I have created. Its made of two parts, the images that slide on the left and the captions and navigation to the right. the Issue I am facing is that I cannot get the captions out of the container of the slide itself I am wondering if there is a way to escape the caption out and still work with the slide when it changes.</p>
  
  <p>Another problem is around the responsiveness on a large screen its terrible and I just need some advice. Here is a fiddle I have created and its a replica.</p>
  
  <p><a href="https://jsfiddle.net/df2psx6q/" rel="nofollow noreferrer">https://jsfiddle.net/df2psx6q/</a></p>
  
  <p>Here is the JQuery:</p>
  
  <pre><code>var slideIndex = 1;
  showSlides(slideIndex);
  
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n &gt; slides.length) {slideIndex = 1} 
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active";
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;section class="slider-content" style="position: relative;"&gt;
  &lt;div class="box-slider right-skew-slider"&gt;&lt;/div&gt;
  &lt;div class="slideshow-container"&gt;
    &lt;div class="mySlides fade"&gt;
      &lt;div class="numbertext"&gt;1 / 3&lt;/div&gt;
      &lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/assets/img/ink-cloud.jpg" alt="Digital Icon"&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides fade"&gt;
      &lt;div class="numbertext"&gt;2 / 3&lt;/div&gt;
      &lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/assets/img/ink-cloud.jpg" alt="Digital Icon"&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides fade"&gt;
      &lt;div class="numbertext"&gt;3 / 3&lt;/div&gt;
      &lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/assets/img/ink-cloud.jpg" alt="Digital Icon"&gt;
    &lt;/div&gt;
  
    &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
    &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;div style="text-align:center" class="controls"&gt;
    &lt;span class="dot" onclick="currentSlide(1)"&gt;&lt;/span&gt; 
    &lt;span class="dot" onclick="currentSlide(2)"&gt;&lt;/span&gt; 
    &lt;span class="dot" onclick="currentSlide(3)"&gt;&lt;/span&gt; 
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>