如何使用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

在选项中，将class say 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-根据您的身高，根据您的需要/要求设置top值。CSSslick

此处演示