title: How can I make the swipe action for a carousel on mobile
body: <p>I've got a carousel of a twitter feed on my website.  Got it so you can navigate the 3 slides/tweets through the carousel dots.</p>
  
  <p>I need to add a swipe function so when on mobile I can swipe my finger left to right to browse the tweets.  Tried looking for a solution and most answers result in suggesting a plugin.  Since my twitter feed is in an iframe it's proven problematic trying to initialise its content with a carousel plugin.</p>
  
  <p>For that reason I've used a vanilla JavaScript carousel from off of W3.</p>
  
  <p>But I have no idea how I can get a swipe function to work with the code I have.</p>
  
  <pre><code>var slideIndex = 1;
  showSlides(slideIndex);
  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.left = "-100%"; 
    }
    for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.left = "20px"; 
    dots[slideIndex-1].className += " active";
  }
  </code></pre>