title: Two image slider
body: <p>I'm currently working on creating a carousel. I need to make it so I have two images side by side. When you click on the right arrow to switch them, I need the right image to go left, and a new one to take place of the right image. Then when you click left it will go backwards. I don't need animations or anything. Below is the concept image. (the carousel will be 100% width of the page, so each displayed image needs to be 50% wide.)</p>
  
  <p><img src="https://i.stack.imgur.com/PvqvT.jpg" alt="enter image description here"></p>
  
  <p>Here is what I have coded so far.. In my project I'm using Bootstrap and Wordpress as well.</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
  &lt;ul class="dual-slider"&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/BrandonRhino/qaxu6un1/5/" rel="nofollow noreferrer">http://jsfiddle.net/BrandonRhino/qaxu6un1/5/</a> (EDITED LINK TO NEW ONE)</p>
  
  <p>I'm new to javascript and have no idea how to start, if someone could help point me in the right direction or help me out, I'd be beyond thankful!</p>