Следующий и предыдущий товар в видео миниатюры зафиксированной по центру экрана

Так будет выглядеть

<div class="next-product-wrapp flex space-between">
<?php

$prev = get_previous_post();
$next = get_next_post();

// the previous post title and thumbnail

?>

<div class="next-product-wrapp-item next-product-wrapp-item-left">
<div class="next-product-wrapp-item-inside">
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo get_the_post_thumbnail($prev->ID, 'normal'); ?>
<span><i class="fa fa-angle-double-left" aria-hidden="true"></i> Предыдущий </span>
<!--<?php echo apply_filters( 'the_title', $prev->post_title ); ?>-->
</a>
</div>
</div>

<?php

// the next post title and thumbnail

?>

<div class="next-product-wrapp-item next-product-wrapp-item-right">
<div class="next-product-wrapp-item-inside">
<a href="<?php echo get_permalink( $next->ID ); ?>">
<?php echo get_the_post_thumbnail($next->ID, 'normal'); ?>
<span>Следующий <i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
<!--<?php echo apply_filters( 'the_title', $next->post_title ); ?>-->
</a>
</div>
</div>
</div>

CSS

.next-product-wrapp {
    position: fixed;
    width: 100%;
    left: 0;
    top: 35%;

}

.next-product-wrapp-item {
    width: 100px;
    background: #fff;
    border: 1px solid #efefef;
}
.next-product-wrapp .next-product-wrapp-item-left{

}
.next-product-wrapp .next-product-wrapp-item-right{

}
.next-product-wrapp .next-product-wrapp-item-inside {
  text-align: center;
}


.next-product-wrapp .next-product-wrapp-item-inside img{
    display: block;

 
}
.next-product-wrapp .next-product-wrapp-item-inside a{
    display: block;
    color: #222;
    font-size: 14px;
    text-align: center;

}
.next-product-wrapp .next-product-wrapp-item-inside span {
font-size: 9px;
    padding-bottom: 5px;
    display: inline-block;
}