Как добавить скользящий слайдер на главную страницу перед верхней статьей и скользкий слайдер с тегом и 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 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;
}
Других решений пока нет …