title: Carousel replacing images on mouse hover
body: <p>Ive done some googling but i didnt find nothing suitable for my problem.
  Is somewhere out there slider/carousel which has visible i.e 4 images every moment and after hover on one of the exact one image is swapped with another one ?
  Also if not is there a way to modify some well known sliders such as <code>flexslider</code> to work that way ? 
  So far i tried modify flexsliders code like this</p>
  
  <p>CSS</p>
  
  <pre><code>#cf {
    position:relative;
  
    margin:0 auto;
  }
  
  #cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  
  #cf img.top:hover {
    opacity:0;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="flexslider" &gt;
    &lt;ul class="slides" &gt;
      &lt;li&gt;
        &lt;div id="cf"&gt;
          &lt;img class="bottom" src="img/artists/arendarik_p.jpg" /&gt;
          &lt;img class="top" src="img/artists/arendarik.jpg" /&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      ...
  </code></pre>
  
  <p>but after adding more images i had to set them exact laft margin according to width of image which somehow broke flexslider</p>
  
  <p>thanks in advance for any advice</p>