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とnextをspanの要素に割り当てます。

$('#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 - あなたのslick高さに基づいてあなたの必要性/要件ごとにCSSのtop値を設定します。

DEMO HERE

Answer 2

は、私はあなたに#pager-containerへpostion:relative;を設定

例を与える理由

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