Carousel Posts

Last carousel you'll ever need

Blog Posts Carousel

<div class="container">
  <div class="blog blog-small-thumbs">
    <div class="row">
      <div class="col-xs-12 blog-carousel">
        <div class="blog-tiny-heading blog-carousel-itself">
          
          <div class="blog-post clearfix">
            <div class="blog-img-wrapper">
              <div class="lightbox portfolio-grid portfolio-animation-std">
                <div class="gallery-cell">
                  <figure class="gallery-item">
                    <a href="/img/corporate/team1.jpg">
                      <img src="/img/corporate/small/team1.jpg" alt="Blog Post 1">
                    </a>
                    <div class="figcaption"><button class="button button-borderless trigger-image" aria-hidden="true"></button></div>
                  </figure>
                </div>
              </div>
            </div>
            <span class="blog-post-title"><a href="#">Default kate nice blog post title</a></span>            <div class="blog-post-info">
              <span class="date-wrapper">
                <a href="#"><i class="fa fa-calendar"></i> <span class="date">2011-08-14</span></a>
              </span>
              <span class="author-wrapper">
                <a href="#"><i class="fa fa-user"></i> Anna Hopkins</a>
              </span>
              <span class="tags">
                <i class="fa fa-tags"></i> <a href='#'>General</a>, <a href='#'>Office</a>
              </span>
              <span class="comments">
                <a href="#"><i class="fa fa-comments-o"></i> 21 comments</a>
              </span>
            </div>            <div class="blog-preview-text">
              <p class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
              </p>
              <div class="blog-read-more-button">
                <a href="#">Read More <i class="fa fa-angle-double-right"></i></a>
              </div>
            </div>          </div>
          <div class="blog-post clearfix">
            <div class="blog-img-wrapper">
              <div class="lightbox portfolio-grid portfolio-animation-std">
                <div class="gallery-cell">
                  <figure class="gallery-item">
                    <a href="/img/corporate/team2.jpg">
                      <img src="/img/corporate/small/team2.jpg" alt="Blog Post 2">
                    </a>
                    <div class="figcaption"><button class="button button-borderless trigger-image" aria-hidden="true"></button></div>
                  </figure>
                </div>
              </div>
            </div>
            <span class="blog-post-title"><a href="#">This is another blog post title</a></span>            <div class="blog-post-info">
              <span class="date-wrapper">
                <a href="#"><i class="fa fa-calendar"></i> <span class="date">2012-07-29</span></a>
              </span>
              <span class="author-wrapper">
                <a href="#"><i class="fa fa-user"></i> Felix Romero</a>
              </span>
              <span class="tags">
                <i class="fa fa-tags"></i> <a href='#'>Lifehack</a>, <a href='#'>Productivity</a>
              </span>
              <span class="comments">
                <a href="#"><i class="fa fa-comments-o"></i> 15 comments</a>
              </span>
            </div>            <div class="blog-preview-text">
              <p class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
              </p>
              <div class="blog-read-more-button">
                <a href="#">Read More <i class="fa fa-angle-double-right"></i></a>
              </div>
            </div>          </div>

          <div class="blog-post clearfix">
            <div class="blog-media-wrapper">
              <iframe src='//www.youtube.com/embed/M9ITWjBPwDA' allowfullscreen></iframe>
            </div>
            <span class="blog-post-title"><a href="#">Blog post with youtube video</a></span>            <div class="blog-post-info">
              <span class="date-wrapper">
                <a href="#"><i class="fa fa-calendar"></i> <span class="date">2013-04-15</span></a>
              </span>
              <span class="author-wrapper">
                <a href="#"><i class="fa fa-user"></i> Joyce Kuhn</a>
              </span>
              <span class="tags">
                <i class="fa fa-tag"></i> <a href='#'>General</a>
              </span>
              <span class="comments">
                <a href="#"><i class="fa fa-comments-o"></i> 7 comments</a>
              </span>
            </div>            <div class="blog-preview-text">
              <p class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
              </p>
              <div class="blog-read-more-button">
                <a href="#">Read More <i class="fa fa-angle-double-right"></i></a>
              </div>
            </div>          </div>
          <div class="blog-post clearfix">
            <div class="blog-media-wrapper">
              <iframe src='//www.dailymotion.com/embed/video/x4to82q' allowfullscreen></iframe>
            </div>
            <span class="blog-post-title"><a href="#">post with dailymotion embed video</a></span>            <div class="blog-post-info">
              <span class="date-wrapper">
                <a href="#"><i class="fa fa-calendar"></i> <span class="date">2012-10-18</span></a>
              </span>
              <span class="author-wrapper">
                <a href="#"><i class="fa fa-user"></i> Marjorie Robinson</a>
              </span>
              <span class="tags">
                <i class="fa fa-tag"></i> <a href='#'>Productivity</a>
              </span>
              <span class="comments">
                <a href="#"><i class="fa fa-comments-o"></i> 10 comments</a>
              </span>
            </div>            <div class="blog-preview-text">
              <p class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
              </p>
              <div class="blog-read-more-button">
                <a href="#">Read More <i class="fa fa-angle-double-right"></i></a>
              </div>
            </div>          </div>

          <div class="blog-post clearfix">
            <div class="blog-img-wrapper blog-post-slider blog-post-slider-default">
                <a href="#">
                    <div>
                      <img src="/img/corporate/small/team6.jpg"   alt="Blog Post 5 1">
                    </div>
                    <div>
                      <img src="/img/corporate/small/team3.jpg" alt="Blog Post 5 2">
                    </div>
                    <div>
                      <img src="/img/corporate/small/office3.jpg" alt="Blog Post 5 3">
                    </div>
                </a>
            </div>
            <span class="blog-post-title"><a href="#">I am fancy blog post with slider</a></span>            <div class="blog-post-info">
              <span class="date-wrapper">
                <a href="#"><i class="fa fa-calendar"></i> <span class="date">2014-08-20</span></a>
              </span>
              <span class="author-wrapper">
                <a href="#"><i class="fa fa-exclamation-triangle"></i> admin</a>
              </span>
              <span class="tags">
                <i class="fa fa-tags"></i> <a href='#'>General</a>, <a href='#'>Productivity</a>
              </span>
              <span class="comments">
                <a href="#"><i class="fa fa-comment-o"></i> 1 comment</a>
              </span>
            </div>            <div class="blog-preview-text">
              <p class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
              </p>
              <div class="blog-read-more-button">
                <a href="#">Read More <i class="fa fa-angle-double-right"></i></a>
              </div>
            </div>          </div>

        </div>
      </div>
    </div>
  </div>
</div>