Как уменьшить количество контента в слайдере?

Question

[mUchenik]

Друзья, пытаюсь адаптировать шаблон WP Zerif Lite и столкнулся с проблемой:
Не могу разобраться с блоком "Последние новости", а именно: разрешении экрана начиная с 980 выводится 4 блока новостей и смотрится это не хорошо... Я думаю, что на таком разрешении лучше сделать, что бы выводилось по три или два блока... Но как это реализовать, я увы не знаю... Вот ссылка: boulinaw.bget.ru
Хотелось бы понять принцип, как уменьшать кол-во выводимого контента, при изменении разрешения экрана.

Answer 1

[Роман Дворянов]

Чтоб понять как уменьшить выводимое, нужно понять как оно выводится

Comments

[mUchenik]

Роман, я выложил куски кода, что бы как то понять, каким образом выводится эта карусель... Если не затруднит Вас, посмотрите пожалуйста. Спасибо. Сам я не могу понять.

[Роман Дворянов]

mUchenik: В общем ситуация такая -
у Вас есть родительский контенер карусели <div class="carousel-inner">, в нем есть контейнер <div class="item"> это та область, в которой отображается выводимый контент, ограниченный стрелочками, в нем 4 элемента, это те самые блоки с новостями, оставьте столько сколько нужно на одном экране, остальные переместите в остальные блоки <div class="item">, ну и настройте в css ширину, вон lakegull прописал, и когда увеличите ширину, делайте перенос строки между текстом и ссылкой

Answer 2

[lakegull]

У вас там карусель: 4 блока показывается изначально и ещё 2 по клику на стрелки влево-вправо.
Можно сделать 2х2 - 2 вверху будет и 2 внизу.
Откройте в текстовом редакторе файл style.css вашей темы.
Ищите следуюший кусок кода:

.latestnews-box {
    margin: 13px 5px 5px 11px;
    width: 23%;
}

меняйте его на:

.latestnews-box {
    margin: 13px 7px 5px 9px;
    width: 47%;
}

Comments

[mUchenik]

Спасибо за совет! Такой вид нормально смотреться будет при разрешении 980. А при 420 уже не комильфо...

Answer 3

[mUchenik]

Я не волшебник, а только учусь, поэтому строго не удите плиз...
В попытках найти как выводится эта каруселька, нашел несколько упоминаний, думаю, что наиболее важный эт fron-page.php

/* LATEST NEWS */
	$zerif_latestnews_show = get_theme_mod('zerif_latestnews_show');

	if( isset($zerif_latestnews_show) && $zerif_latestnews_show != 1 ):

		get_template_part( 'sections/latest_news' );

	endif;

Но так же есть упоминание в файле js:

jQuery(window).load(zerif_home_latest_news);jQuery(window).resize(zerif_home_latest_news);function zerif_home_latest_news(){if(jQuery('#carousel-homepage-latestnews').length>0){jQuery('#carousel-homepage-latestnews div.item').height('auto');if(isMobile.any()||(!isMobile.any()&&jQuery('.container').outerWidth()>768)){if(jQuery('#carousel-homepage-latestnews div.item').length<2){jQuery('#carousel-homepage-latestnews > a').css('display','none');}var maxheight=0;jQuery('#carousel-homepage-latestnews div.item').each(function(){if(jQuery(this).height()>maxheight){maxheight=jQuery(this).height();}});jQuery('#carousel-homepage-latestnews div.item').height(maxheight);}}}jQuery(document).ready(function(){if(document.createElement("input").placeholder==undefined)

И в CSS:

.latest-news{padding-bottom:66px;padding-top:100px;background:#FFFFFF;}
.carousel-inner{}
#carousel-homepage-latestnews .item{height:auto;}
.latesnews-content p,
.latesnews-content{font-size:14px;line-height:18px;color:#777777;}
#carousel-homepage-latestnews .carousel-inner .item .latestnews-title{margin-bottom:15px;color:#404040;position:relative;display:inline-block;text-transform:uppercase;margin-bottom:30px;font-weight:bold;font-size:17px;float:none;width:auto;margin-top:15px;}
#carousel-homepage-latestnews .carousel-inner .item .latestnews-title a{text-transform:uppercase;color:#404040;font-weight:700;display:block;}
#carousel-homepage-latestnews .item .latestnews-box .latestnews-title a:before{position:absolute;margin:auto;z-index:1;content:"";width:75%;height:2px;background:#e96656;bottom:-9px;left:12.5%;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n+1) .latestnews-title a:before{background:#e96656;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n+2) .latestnews-title a:before{background:#34d293;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n+3) .latestnews-title a:before{background:#3ab0e2;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n) .latestnews-title a:before{background:#f7d861;}
#carousel-homepage-latestnews .item .latestnews-box .latestnews-img .latestnews-img-a{display:block;}
#carousel-homepage-latestnews{margin:0 30px;}
#carousel-homepage-latestnews .carousel-control{width:45px;background:none;}
.carousel-control.left{margin-left:-45px;}
.carousel-control.right{margin-right:-45px;}
#carousel-homepage-latestnews .glyphicon-chevron-left:before{content:"";background:url(images/left-arrow.png) no-repeat center center;width:30px;height:30px;float:left;}
#carousel-homepage-latestnews .glyphicon-chevron-right:before{content:"";background:url(images/right-arrow.png) no-repeat center center;width:30px;height:30px;float:left;}
#carousel-homepage-latestnews{}

В этих кодах (кроме css) я не смог найти каким образом выводится эта карусель... Помогите разобраться пожалуйста.