Question

如何在热门文章和Slick Slider TAG和6帖子之前向首页添加光滑的滑块？

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吗？如果是这样，文档非常详尽。只需在头标中加入以下内容：

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

如果您想要默认样式

，请添加新的slick-theme.css

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

然后在代码末尾（在结束身体标记之前）将其抛入

<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; 

}

如何在顶级帖子之前添加Slider Slick？

1 个答案: