How can I vertically align a custom arrow using Slick carousel?

Question

I want to replay the default slick arrow and I have this kind of code:

For my slider

<div id="pager-container">    
    <div class="owl-carousel owl-theme margin-top" id="blog-pager">         
        <?php foreach($new_release as $blog_data) { ?>
            <div class="blog-post" style="height: 250px; width: 300px; margin: 5px;" data-date="<?php echo $blog_data['date_identifier']; ?>" data-category="<?php echo $blog_data['category_id']; ?>">
                <a href="<?php echo get_default_link(array('ctr'=>'blogpost', 'id'=> $blog_data['blog_id'])); ?>" title="Link to blog post : <?php echo $value['blog_title']; ?>">
                  <div class="background-image" style="background-image: url('<?php echo UPLOADS_DEFAULT_URL.$blog_data['cover_image']; ?>');">
                  </div>
                  <div class="blog-body">
                    <div class="blog-title">
                      <?php echo $blog_data['blog_title']; ?><br/>
                        <span class="small-text">
                          <?php echo $blog_data['blog_date']; ?>
                        </span>
                    </div>
                  </div>
                </a>
            </div>              
        <?php } ?>          
    </div>

JS part

$('#blog-pager').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: true,
    prevArrow: '<span><i class="fa fa-angle-left fa-4x" aria-hidden="true"></i></span>',
    nextArrow: '<span><i class="fa fa-angle-right fa-4x" aria-hidden="true"></i></span>'
});
</div>

What I want is to align my arrows to the both side vertically. Im not good in CSS. Can you help me?

Answer 1

Assign class say prev and next to the span element of previous and next icons within the options. As in

$('#blog-pager').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: true,
    prevArrow: '<span class="prev"><i class="fa fa-angle-left fa-4x" aria-hidden="true"></i></span>',
    nextArrow: '<span class="next"><i class="fa fa-angle-right fa-4x" aria-hidden="true"></i></span>'
});

and this CSS would help you achieve that.

.prev {
  display: block;
  position: absolute;
  z-index: 1000;
  top:50%;
  transform: translateY(-50%);
}

.next {
  display: block;
  position: absolute;
  right: 0px;
  top:50%;
  transform: translateY(-50%);
  z-index: 1000;
}

PS - Set the top value of CSS as per your need/requirement based on your slick height.

DEMO HERE

Answer 2

There is no working file that's why i give you an example

set postion:relative; to #pager-container

#pager-container {
  position:relative;
}

then set position:absolute; to the icons

#pager-container .fa-angle-left {
  position:absolute;
  width:20px;
  height:20px;
  left:0;
  top:50%;
}
#pager-container .fa-angle-right {
  position:absolute;
  width:20px;
  height:20px;
  right:0;
  top:50%;
}