Что бы удалить хлебные крошки с главной страницы и поместить туда слайдер, необходимо отредактировать шаблон index.tpl (/html/index.tpl). Для слайдера можно использовать любой скрипт, в качестве примера возьму TinySlider 2.
Учитывая ограниченные возможности, установить готовый слайдер, или сделать backend для него не получится, добавлять фото придется через FTP с правкой HTML кода, менять - путем добавления изображений через панель управления (если задавать одинаковые имена файлов).
Для начала зайтем на FTP и откроем для правки шаблон - /html/index.tpl
Удаление хлебных крошек с главной страницы
Найдем в шаблоне код, который отвечает за вывод хлебных крошек:
<div class="breadcrumbs"><ul><li class="back-home"><a class="active-bghome" href="/"><span><imgsrc="/design/images/pointer.gif"alt="home"></span></a></li><li class="center_text"><img src="/design/images/pointer-05.gif" alt=""></li><li class="home"><a href="/">Главная</a></li>{foreach from=$path item=place}<li class="product"><span><img src="/design/images/pointer-05.gif" alt=""></span><a href="{$place->url}">{$place->name|escape}</a></li>{/foreach} </ul></div>
И добавим проверку на главную страницу. Отобразим только если находимся на главной
{if ($quicky.server['REQUEST_URI']!='/')}{*-----Здесь должен быть код вывода хлебных крошек, который выше---- *}{/if}
Добавление (замена) слайдера на главной
По умолчанию в шаблоне уже есть слайдер на главной странице - Owl carusel - его уберем.
Для начала скачаем слайдер - TinySlider 2 и раскидаем файлы по папкам, предварительно переименовав style.css слайдера в sliderstyle.css (такой файл в папке назначения уже есть):
Теперь подключим скрипт и таблицу стилей слайдера. в файле /html/index.tpl в самом начале добавим (будем грузить только на главной странице):
{if ($quicky.server['REQUEST_URI']=='/')}<script type="text/javascript" src="/design/js/script.js"></script><link rel="stylesheet" type="text/css" href="/design/css/sliderstyle.css">{/if}
Внесем изменения в таблицу стилей слайдера - заменим пути к изображениям - открываем файл /css/sliderstyle.css и меняем "images/" на "../images/"
Теперь сам блок слайдера. Находим:
{if ($quicky.server['REQUEST_URI']==''||$quicky.server['REQUEST_URI']=='/') && $quicky.server['HTTP_HOST']=='demo.qnits.ru'}<div id="owl-demo" class="owl-carousel"><div><a href="#1"><img src="/design/images/banner.jpg"></a></div><div><a href="#2"><img src="/design/images/banner2.gif"></a></div><div><a href="#3"><img src="/design/images/banner3.gif"></a></div><div><a href="#4"><img src="/design/images/banner4.gif"></a></div></div>{/if}
И меняем на:
{if ($quicky.server['REQUEST_URI']==''||$quicky.server['REQUEST_URI']=='/')}<div id="slidecontainer"><div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div><div id="slider"><ul><li><a href="/products/147159487-samsung-galaxy-note-edge"><div class="price" class="title">42 000<br /><span>руб.</span></div><img src="/design/images/banner.jpg" alt="Samsung Galaxy" /><div class="text">Смартфон от Samsung - Galaxy и здесь небольшой заголовок</div></a></li><li><a href="/products/ssylka-na-stranicu"><div class="price" class="title">3 875<br /><span>руб.</span></div><img src="/design/images/banner.jpg" alt="Какой то товар" /><div class="text">Какой то товар, его описание сюда</div></a></li></ul></div><div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div></div><script type="text/javascript">{literal}var slideshow=new TINY.slider.slide('slideshow',{id:'slider',auto:5,resume:false,vertical:false,activeclass:'current',position:0,rewind:false,elastic:true,left:'slideleft',right:'slideright'});{/literal}</script>{/if}
Соответственно следующая конструкция и будет отдельно взятый слайд:
<li><a href="/products/beats-pro-red-2013-naushniki"><div class="price" class="title">3 875<br /><span>руб.</span></div><img src="/design/images/banner.jpg" alt="Наушники Beats Pro Red 2013" /><div class="text">Наушники с отсоединяемым кабелем Beats Pro Red 2013</div></a></li>
Если все работает, теперь осталось сделать изображения для слайдера нужного размера и внести изменения в таблицу стилей (/css/sliderstyle.css)
#slidecontainer {position: relative;}.sliderbutton {position: absolute; width:25px; height:30px; cursor:pointer; top:40%; display: none; z-index: 100;}#slidecontainer:hover .sliderbutton {display: block;}#slideleft {background:url(../images/slidearr.png) 0px 0px no-repeat;left: 5px;}#slideleft:hover {background-position:0 -35px}#slideright {background:url(../images/slidearr.png) -30px 0px no-repeat; right: 5px;}#slideright:hover {background-position:-30px -35px}#slider {position:relative; overflow:auto; width:980px; height:300px}#slider ul {position:absolute; list-style:none; top:0; left:0}#slider li {float:left; width:980px; height:300px; position: relative;}#slider li .title {position: absolute; top:10px; left: 0px; background: rgba(255, 255, 255, 0.72); padding: 5px 2%; width: 56.1%; color: #000;}#slider li .text {position: absolute;background: rgba(255, 255, 255, 0.76);top: 25px;width: 50%;text-align: center;right: 0px;padding: 5px 80px 5px 5px;color: #ff4806;font-style: italic;font-family: georgia;line-height: 35px;font-size: 25px;text-shadow: 0px 0px 5px #fff;}#slider .price{position: absolute;background: #ff4205;font-size: 2em;font-style: italic;bottom: 35px;left: 50%;text-align: center;color: #fff;border-radius: 100px;width: 130px;height: 90px;padding-top: 40px;font-weight: 300;}#slider .price span {font-size: 0.6em;}
- изображение для навигации слайдера. поместите в каталог images