comment ajouter Slider Slick avant le premier poste?

Question

Comment ajouter un slick slick à la première page avant l'article du haut et Slick Slider avec TAG et 6 post?

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

ou voir le code complet ici LINK

Merci

Answer 1

Vous parlez de cette slider? Si c'est le cas, la documentation est assez complète. Il suffit d'inclure les éléments suivants dans votre balise de tête:

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

Ajouter le nouveau-theme.css slick si vous voulez que le défaut styling

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

jeter ensuite ce à la fin de votre code (avant balise body fermeture)

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

Une fois que vous avez tout ce que vous avez à faire est de formater chaque diapositive comme ceci:

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

initialize Enfin, le curseur avec cette fonction dans une balise script

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

Quant à l'emplacement, je créerais une fonction qui crée vos diapositives, puis il suffit d'appeler cette fonction partout où vous avez besoin de votre type de curseur de comme celui-ci

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; 

}