トップポストの前にSlider Slickを追加するにはどうすればよいですか？

Question

トップ記事の前にフロントページに滑らかなスライダーを追加するにはどうすればいいですか？

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-theme.css"/> 

をスタイリングしたい場合

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

は、その後、あなたの前に（あなたのコードの末尾にこれをで投げる新しいスリック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> 

を閉じます

は、最後にスクリプトタグ私はあなたのスライドを作成し、ちょうどあなたがこのようなあなたのスライダーの種類のを必要な場所、その関数を呼び出す関数を作成した場所については

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

}