What plugin allows you to display posts like this?

Question

Slider

Can you please tell me a plugin that allows you to display the news slider in a similar way?

Answer 1

In general, the plugin did not work out, I took the code, slightly adapted it for myself. I do not pretend to be of high quality, but it may be useful to someone.

php

<?php
    $id = 1;
    $items = new WP_Query("cat=$id&showposts=5"); 
    $noimage150 = '/wp-content/uploads/noimage-150x150.png';
    $noimage750 = '/wp-content/uploads/noimage-750x350.jpg';
?>
    <div class="mega-slider-template">
        <div class="mega-slider" data-autoplay="1" data-delay="5">
            <div class="mega-slider__stage">
<?php
                $is_first = true;
                while($items->have_posts()) : $items->the_post();
                    $images = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium');
                    if ($images) $image = $images[0]; else $image = $noimage750;
?>
                    <a href="<?php the_permalink() ?>" class="mega-slider__slide <? if ($is_first) echo 'mega-slider__slide--active'?>" style="background-image: url(&quot;<?= $image ?>&quot;); display: <? if ($is_first) echo 'block'; else echo 'none'; ?>; z-index: 0;">
                        <span class="mega-slider__slide__label" style="bottom: 0px;">
                            <span class="mega-slider__slide__date"><? the_date(); ?></span>
                            <span class="mega-slider__slide__title"><? the_title(); ?></span>
                        </span>
                    </a>
<?php                    
                    $is_first = false;
                endwhile;
?>
            </div>
            <div class="mega-slider__sidebar">
<?php
                $is_first = true;
                while($items->have_posts()) : $items->the_post();
                    $images = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail');
                    if ($images) $image = $images[0]; else $image = $noimage150;
?>
                    <div class="mega-slider__row <? if ($is_first) echo 'mega-slider__row--active'?>">
                        <img width="150" height="150" src="<?= $image ?>" class="mega-slider__row__thumbnail wp-post-image" alt="">
                        <span class="mega-slider__row__label">
                            <span class="mega-slider__row__title"><? the_title(); ?></span>
                            <span class="mega-slider__row__date"><? the_date(); ?></span>
                            <a class="mega-slider__row__link" href="<?php the_permalink() ?>">Читать...</a>
                        </span>
                    </div>
<?php
                    $is_first = false;
                endwhile;
?>
            </div>
        </div>
    </div>

javascript

(function($) {
  $('.mega-slider').each(function() {
    // Define show and hide label triggers
    $(this)
      .find('.mega-slider__slide')
      .on('showLabel', function(event) {
        $(this)
          .find('.mega-slider__slide__label')
          .css('bottom', '-50px')
          .animate({
            bottom: 0
          }, 400);
      }).on('hideLabel', function(event) {
        $(this)
          .find('.mega-slider__slide__label')
          .css('bottom', 0)
          .animate({
            bottom: '-50px'
          }, 200);
      });

    // Define this slide trigger
    $(this)
      .find('.mega-slider__row')
      .on('thisSlide', function(event) {
        if($(event.target).hasClass('mega-slider__row__link') || $(this).hasClass('mega-slider__row--active')) return;
        slide = $(this).index();
        $(this)
          .addClass('mega-slider__row--active')
          .siblings()
          .removeClass('mega-slider__row--active');
        $(this)
          .closest('.mega-slider')
          .find('.mega-slider__slide--active')
          .trigger('hideLabel')
          .closest('.mega-slider__slide')
          .siblings()
          .andSelf()
          .eq(slide)
          .stop(true, true)
          .css('pointer-events', '')
          .css('z-index', 0)
          .css('display', 'block')
          .addClass('mega-slider__slide--active')
          .siblings('.mega-slider__slide--active')
          .css('pointer-events', 'none')
          .css('z-index', '')
          .removeClass('mega-slider__slide--active')
          .fadeOut(400, function() {
            $(this)
              .siblings()
              .andSelf()
              .eq(slide)
              .trigger('showLabel');
          });
      });

    // Activate click trigger
    $(this)
      .find('.mega-slider__row')
      .on('click', function(event) {
        $(this).trigger('thisSlide');
        $(this)
          .closest('.mega-slider')
          .trigger('resetInterval');
      });

    // Define next slide trigger
    $(this)
      .on('nextSlide', function(event) {
        $row = $(this).find('.mega-slider__row--active').next();
        if ( 0 == $row.length ) {
          $row = $(this).find('.mega-slider__row');
        }
        $row.eq(0).trigger('thisSlide');
      });

    // Animate first label
    $(this)
      .closest('.mega-slider')
      .find('.mega-slider__slide--active .mega-slider__slide__label')
      .animate({
        bottom: 0
      }, 400);

    // Define start, stop, and reset interval triggers
    $(this)
      .on('startInterval', function(event) {
        if ( '1' == $(this).data('autoplay') ) {
          var $slider = $(this);
          $slider.data('interval', setInterval(function () {
            $slider.trigger('nextSlide');
          }, parseInt( $slider.data('delay') ) * 1000 ) );
        }
      }).on('stopInterval', function(event) {
        clearInterval( $(this).data('interval') );
      }).on('resetInterval', function(event) {
        $(this).trigger('stopInterval').trigger('startInterval');
      });

    // Activate autoplay trigger
    $(this).trigger('startInterval');

  });
})(jQuery);

css

.mega-slider {
  overflow: hidden;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 1.5em;
}
 
.mega-slider__stage {
  width: 100%;
  height: 360px;
  position: relative;
  background: #000;
}

.mega-slider__slide {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
}

.mega-slider__slide__label {
  display: block;
  color: #fff;
  background: #000;
  background: rgba(0, 0, 0, 0.6);
  margin: 0;
  padding: 10px 15px;
  position: absolute;
  bottom: -50px;
  width: 100%;
  box-sizing: border-box;
}

.mega-slider__slide__title {
  font-size: 20px;
}

.mega-slider__slide__date {
  float: right;
  margin-left: 10px;
  line-height: 30px;
  opacity: 0.6;
}

.mega-slider__sidebar {
  position: relative;
  z-index: 1;
}

.mega-slider__row {
  padding: 10px;
  clear: both;
  overflow: hidden;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-sizing: border-box;
}

.mega-slider__row:hover {
  background: #fff;
}

.mega-slider__row--active,
.mega-slider__row--active:hover {
  background: #0073aa;
  color: #fff;
  cursor: default;
}

.mega-slider__row__thumbnail {
  display: block;
  width: 50px;
  height: auto;
  max-width: 100%;
  float: left;
  margin-right: 10px;
}

.mega-slider__row__label {
  display: block;
  overflow: hidden;
}

.mega-slider__row__title {
  display: block;
  margin: 4px 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span.mega-slider__row__date {
    font-size: 13px;
}

.mega-slider__row__link {
  color: inherit;
  text-decoration: none;
  float: right;
  margin-left: 10px;
  font-size: 13px;
}

.mega-slider__row__link:hover {
  color: inherit;
  text-decoration: underline;
}

.mega-slider__row__link:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

@media screen and (min-width: 783px) {
  .mega-slider__stage {
    width: 66%;
    height: 100%;
    float: left;
    position: absolute;
  }
  .mega-slider__sidebar {
    width: 34%;
    float: right;
  }
}

Answer 2

RoyalSlider Meta Slider ... over a lot.. at least 20
easier to write your own. it's easier than it looks