如何在置顶帖前添加 Slider Slick？

Question

如何在首页顶部文章和带有 TAG 和 6 个帖子的 Slick Slider 之前添加 slick 滑块？

if ( have_posts() ){
    while ( have_posts() ){
        the_post();

        if( $i == 0 && $paged == 1 ){

            $t_dyn_opt = $dynamic_options;
            $t_dyn_opt['modal'] = '13';
            $t_thumb = 'large';

            $list_out .= '<div class="row">';
                $list_out .= '<div class="col-sm-12">';
                    $list_out .= '<div class="newser-block-grid single-top">';
                        $list_out .= newser_common_block_grid_generate($t_thumb, $t_dyn_opt);
                    $list_out .= '</div>';
                $list_out .= '</div>';
            $list_out .= '</div>';
            $i = 1;

        }else{

            $list_out .= '<div class="row">';
                $list_out .= '<div class="col-sm-12">';
                    $list_out .= '<div class="newser-block-list big-list">';
                        $list_out .= newser_common_block_big_list_generate($thumb_grid, $dynamic_options);
                    $list_out .= '</div>';
                $list_out .= '</div>';
            $list_out .= '</div>';
        }
    }

或在此处查看完整代码LINK

谢谢

Answer 1

你指的是slider吗？如果是这样，文档非常详尽。只需在您的 head 标签中包含以下内容：

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

如果您想要默认样式，请添加新的 slick-theme.css

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

然后在你的代码末尾（在你的结束 body 标签之前）把它扔进去

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

一旦你有了这些，你所要做的就是像这样格式化每张幻灯片：

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

最后在脚本标签中用这个函数初始化滑块

<script>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
</script>

至于位置，我将创建一个创建幻灯片的函数，然后在需要滑块的地方调用该函数，就像这样

function slider($slides) {

    //slides is an array of arrays that contain whatever information you need in each slide

    $slider = "";
    $sliderContent = array();
    $sliderTop = "<div class=\"your-class\">";
    $sliderBottom = "</div>";
    for($i = 0; $i<count($slides); $i++) {
        $sliderContent[] = "<div> use the content from $slides[$i]</div>"; 

    }

    $slider = (!empty($sliderContent))? $sliderTop.implode("",$sliderContent).$sliderBottom: "";
    return $slider; 

}