Данный слайдер устанавливается аналогично. Вам необходимо загрузить все файлы слайдера в раздел редактора тем, а именно файл slides.min.jquery.js и изображения. Файл стилей css загружать не нужно. После этого замените подключение файла jquery.nivo.slider.pack.js на файл slides.min.jquery.js в шаблоне "HTML" это тег <script>. Далее в ваш файл стилей main.css добавьте стили
/*
Slideshow
*/
#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:570px;
overflow:hidden;
position:relative;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:570px;
height:270px;
display:block;
}
/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:585px;
}
/*
Pagination
*/
.pagination {
margin:26px auto 0;
width:100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url("{ASSETS_IMAGES_PATH}pagination.png");
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}
после этого найдите в шаблоне "HTML" код активации слайдера
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({effect: 'fade'}).parent().show();});
</script>
и замените его на
<script type="text/javascript">
$(function(){
$('#slider').slides({
preload: true,
preloadImage: '{ASSETS_IMAGES_PATH}loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
После найдите HTML код слайдера
<div class="theme-default" style="padding: 1em; display: none;">
<div id="slider">
<img src="{ASSETS_IMAGES_PATH}для слайдера_лого.jpg" alt="" />
<img src="{ASSETS_IMAGES_PATH}для слайдера_лого2.jpg" alt="" />
<img src="{ASSETS_IMAGES_PATH}для слайдера_лого3.jpg" alt="" />
<img src="{ASSETS_IMAGES_PATH}для слайдера_лого4.jpg" alt="" />
</div>
</div>
и замените его на
<div id="slider">
<div class="slides_container">
<a href="#"><img src="{ASSETS_IMAGES_PATH}для слайдера_лого.jpg" alt="" /></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}для слайдера_лого2.jpg" alt="" /></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}для слайдера_лого3.jpg" alt="" /></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}для слайдера_лого4.jpg" alt="" /> </a>
</div>
<a href="#" class="prev"><img src="{ASSETS_IMAGES_PATH}arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="{ASSETS_IMAGES_PATH}arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>