Карусель с автопрокруткой на основе Block.Pro

Крутиться карусель будет на замечательном плагине для jQuery jCarousel, особенностью которого является гибкая настройка и кастомизация, в чём я лично неоднократно убеждался.

Нам понадобятся:

За основу возьмём стандартный шаблон DLE 9.5 - Default.


1. Кладём файл jquery.jcarousel.min.js из скачанного архива в папку js шаблона.
Там же открываем файл libs.js и в самый конец дописываем:

//Карусельfunction mycarousel_initCallback(carousel){    carousel.clip.hover(function() {        carousel.stopAuto();    }, function() {        carousel.startAuto();    });};$(function() {    jQuery('#bp_slider').jcarousel({        wrap: 'circular',        auto: 5, //интервал прокрутки в секундах        scroll: 1, //кол-во элементов, прокручиваемых за один раз        animation: 500, //скорость  прокрутки        initCallback: mycarousel_initCallback //вызов функции остановки прокрутки при наведении мышки    });});

тут немного поясню что это.
Это функция вызова нашего скрипта-карусели и его опции.

2. Создаём новый файл с именем bp_carousel.tpl, кладём его в папку с шаблоном, вставляем туда вот это:

<li class="bp_item">    <strong><a href="{full-link}" title="{title}">{title limit="30"}</a></strong>    <div class="bp_item_img"><img src="{image-1}" alt="{title}" width="50" height="50" /></div>    <div class="bp_item_text">{text limit="70"}</div></li>

Думаю объяснять что тут к чему смысла нет, всё наглядно.

3. Открываем main.tpl и перед

<script type="text/javascript" src="{THEME}/js/libs.js"></script>

вставляем:

<script type="text/javascript" src="{THEME}/js/jquery.jcarousel.min.js"></script>

4. Открываем sidebar.tpl. Находим код:

<div id="popular" class="block">    <div class="dtop">&nbsp;</div>    <div class="dcont">        <div class="btl">            <h4>Популярные статьи</h4>        </div>        <ul>            {topnews}        </ul>    </div>    <div class="dbtm">&nbsp;</div></div>

заменяем на:

<div class="block">    <div class="dtop">&nbsp;</div>    <div class="dcont">        <div class="btl">            <h4>Карусель + Block.Pro.2</h4>        </div>        <ul id="bp_slider">            {include file="engine/modules/block.pro.2.php?&block_id=carousel&template=bp_carousel&news_num=6&last=y&img_size=50x50"}        </ul>    </div>    <div class="dbtm">&nbsp;</div></div>

5. Открываем файл styles.css и в самый конец добавляем:

/*Carousel-----------------------------------------------------------------------------*/#bp_slider {    max-height: 100px;      }#bp_slider .bp_item {    font-size: 12px;    width: 230px;    }#bp_slider .bp_item strong {    display: block;    }    #bp_slider .bp_item a {        text-decoration: none;        }        #bp_slider .bp_item a:hover {            text-decoration: underline;            color: #9966cc;            }    #bp_slider .bp_item_img {        float: left;        padding: 3px 5px 0 0;        }.jcarousel-clip {    overflow: hidden;    margin-top: 10px;    }.jcarousel-container {    width:  230px;        margin-left: 15px;    }    /***  Horizontal Buttons*/.jcarousel-next-horizontal {    position: absolute;    bottom: -10px;    right: -14px;    width: 23px;    height: 23px;    cursor: pointer;    background: url(../images/basenavi.png) no-repeat -26px -32px;    }.jcarousel-next-horizontal:hover {   background: url(../images/basenavi.png) no-repeat -26px -61px;    }  .jcarousel-next-horizontal:active {   background: url(../images/basenavi.png) no-repeat -26px -90px;    }.jcarousel-next-disabled-horizontal,.jcarousel-next-disabled-horizontal:hover {   cursor: default;    }.jcarousel-prev-horizontal {    position: absolute;    bottom: -10px;    right: 9px;    width: 23px;    height: 23px;    cursor: pointer;    background: url(../images/basenavi.png) no-repeat -3px -32px;    }.jcarousel-prev-horizontal:hover {   background: url(../images/basenavi.png) no-repeat -3px -61px;    }  .jcarousel-prev-horizontal:active {    background: url(../images/basenavi.png) no-repeat -3px -90px;    }.jcarousel-prev-disabled-horizontal,.jcarousel-prev-disabled-horizontal:hover,.jcarousel-prev-disabled-horizontal:focus,.jcarousel-prev-disabled-horizontal:active {   cursor: default;    } 

Автор: ПафНутиЙ (pafnuty.name) Обсуждение модулей можно вести на специальном форуме