Вертикальный слайдер контента
Всем привет!
Возникла такая задача, никак не могу решить. Есть блоки новостей поделенные между собой табами на года. В каждом выбранном годе, показаны 2 последних новости, ниже ссылка "еще новости", при клике на которую нужен слайд на следующие 2 новости с этого года. Проблема в том, что фиксированной высоты у блоков нет, текст всегда разный, все готовые решения погорели именно на этом. Прилагаю html код (здесь текст новости вставлен одинаковый для примера, на деле же будет разный). <!-- content --> <div id="content"> <!-- news block --> <div class="info-block"> <div class="page-title">Новости</div> <!-- news tab --> <div class="news-tab" id="news-2012"> <div class="news-block"> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">05 апреля 2012</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">04 апреля 2012</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">03 апреля 2012</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">02 апреля 2012</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> </div> <div class="all-link"><a href="#">еще новости</a></div> </div> <!-- end news tab --> <!-- news tab --> <div class="news-tab" id="news-2011"> <div class="news-block"> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">05 апреля 2011</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">04 апреля 2011</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">03 апреля 2011</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">02 апреля 2011</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> </div> <div class="all-link"><a href="#">еще новости</a></div> </div> <!-- end news tab --> <!-- news tab --> <div class="news-tab" id="news-2010"> <div class="news-block"> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">05 апреля 2010</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">03 апреля 2010</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">02 апреля 2010</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> </div> <div class="all-link"><a href="#">еще новости</a></div> </div> <!-- end news tab --> <!-- news tab --> <div class="news-tab" id="news-2009"> <div class="news-block"> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">05 апреля 2009</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">04 апреля 2009</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">03 апреля 2009</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> <div class="news-box"> <h2>Повседневный выставочный стенд: методология и особенности</h2> <div class="date">02 апреля 2009</div> <div class="text">Представляется логичным, что социальный статус транслирует межличностный план размещения, отвоевывая рыночный сегмент. Инвестиционный продукт нейтрализует сублимированный процесс стратегического планирования, используя опыт предыдущих кампаний.</div> <div class="more-link"><a href="#">подробнее</a></div> </div> </div> <div class="all-link"><a href="#">еще новости</a></div> </div> <!-- end news tab --> </div> <!-- end news block --> <!-- tabs block --> <div class="tab-news"> <ul> <li><a href="#news-2012">2012</a></li> <li><a href="#news-2011">2011</a></li> <li><a href="#news-2010">2010</a></li> <li><a href="#news-2009">2009</a></li> </ul> </div> <!-- end tabs block --> <div class="clear"></div> </div> <!-- end content --> |
Часовой пояс GMT +3, время: 02:40. |