title: Fade multiple elements - like a carousel, but fading all elements instead of sliding
body: <p>I'm trying to create an image carousel style system, which displays multiple images at once; except instead of sliding between those images, the images fade. </p>
  
  <p>So for example, 5 images might be displayed, then after a set period of time (say 3 seconds), they all fade at once to the next 5 images.</p>
  
  <p>I was trying to use Slick Carousel to achieve this, but the behaviour isn't available by default - you can fade one element easily, but as soon as you want to display multiple images, it doesn't work. </p>
  
  <p>Some people have had similar issues, and have experimented with solutions using Slick Carousel, however none of them are quite right.</p>
  
  <p>Here's a jsfiddle - <a href="http://jsfiddle.net/22e6q2rt/" rel="nofollow noreferrer">http://jsfiddle.net/22e6q2rt/</a> - showing my progress so far. This sort of works, but the transitions aren't very nice. I'd like a nice crossfade, where one set of images fades out while the next set fades in. Here's the code:</p>
  
  <pre><code>$('.multipleslider').slick({ 
  dots: false, 
  infinite: true, 
  speed: 0, 
  slidesToShow: 3, 
  autoplay: true,
  autoplaySpeed: 1400,
  slidesToScroll: 3, 
  cssEase: 'linear' 
  });
  
  
  .slick-slide {
     opacity: .5;
     transition: opacity .5s ease-in-out;
  }
  div.slick-current {
     opacity: 1;
     transition: opacity .5s ease-in-out;
  }
  
  div.slick-active{
     opacity: 1;
     transition: opacity .5s ease-in-out;
  }
  </code></pre>
  
  <p>I don't mind if this system is a standalone jquery / javascript solution, or uses an existing javascript plugin, such as Slick or Owl Carousel... but none of them seem suitable, and I've hit a wall! Any help would be amazing, thank you.</p>