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 - 根据您的top身高，根据您的需要/要求设置CSS的{{1}}值。

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

如何使用Slick轮播垂直对齐自定义箭头？

2 个答案: