Как можно вертикально выровнять пользовательскую стрелку с помощью карусели Slick?

Question

Я хочу повторить скользкий стрелку по умолчанию, и у меня есть такой код:

Для моего слайдера

<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 часть

$('#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> 

Я хочу, чтобы выровнять мои стрелки на обе стороны вертикально. Я не очень хорошо разбираюсь в CSS. Вы можете мне помочь?

Answer 1

Назначить класс prev и nextspan Элемент предыдущих и следующих значков в пределах параметров. Как и в случае

$('#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>' 
}); 

и этот CSS поможет вам в этом.

.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 - Установите значение CSStop согласно вашей потребности/требования на основании вашего slick высоты.

DEMO HERE

Answer 2

Там нет рабочего файла, поэтому я приведу вам пример

набор postion:relative; для #pager-container

#pager-container { 
    position:relative; 
} 

затем установите position:absolute; к пиктограммам

#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%; 
}