Добрый день. Несколько дней назад появилась необходимость использовать слайд-шоу на своём сайте, но оно должно было быть нестандартным, чтоб привлекало внимание пользователей. Искал в течение дня и ничего нормального не мог найти, были более менее подходящие «слайдеры», но душа хотела клубнички. После того как я облазил весь рунет, переключился на «забугорных» друзей и… удача! Забегая наперёд хочу сказать: этот обзор сделан потому, что в рунете нет никакого упоминания про это слайд-шоу, отсюда и логика.
Chop Slider 2
Chop Slider включает в себя 152 эффекта (перехода), из которых:
105 2D эффекта — работает во всех браузерах, включая динозавроподбного IE. Но, как пишут разработчики, там переходы выглядят немного по-другому, но я бы так не сказал, поддержка IE есть, но в 6,7 оно вообще не смотрится, в 8-ом — не очень, в 9 — более менее
37 3D эффекта — эти эффекты только для Chrome (Windows Vista+, Mac OSX), Safari (Windows XP+, Mac OSX, iOS)
5 «Mobile» эффектов — для мобильных браузеров
5 «No CSS3» — для браузеров, которые не поддеживают CSS3 — IE6-9
В тоже время все переходы поделены на такие группы:
2D Vertical (23)
2D Horizontal (21)
2D Multi (24)
2D Half-Transitions (27)
2D «Sexy» (10)
3D Blocks (16)
3D Flips (21)
Начать использовать это чудо, по словам разработчиков, очень легко, от себя добавлю что не просто очень легко, а невероятно легко, готовый стартовый код они предоставляют.
Первым делом подключаем библиотеки: <script src="scripts/jquery-1.7.min.js"></script>
<script src="scripts/jquery.id.chopslider-2.0.5.free.min.js"></script>
<script src="scripts/jquery.id.cstransitions-1.0.min.js"></script>
<script src="scripts/our-settings.js"></script> html-код:
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"> <img src="1.jpg" /> </div>
<!-- Слайды с ссылками -->
<div class="slide"> <a href="http://www.idangero.us"><img src="2.jpg" /></a> </
div>
<div class="slide"> <img src="3.jpg" /> </div>
</div>
<!-- Если вы хотите использовать заголовки слайдов -->
<div class="slide-captions">
<div class="sl-descr">
<!-- Вы можете использовать любой html-контент здесь-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="sl-descr">
<p>Caption text for second slide</p>
</div>
<!-- Без заголовка-->
<div class="sl-descr"></div>
</div>
<div class="caption"></div>
<!-- Нумерация страниц -->
<div class="pagination">
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
</div> CSS-код #slide-prev {
/* Любые стили для кнопки назад */
}
#slide-next {
/* Любые стили для кнопки вперёд */
}
#slider {
/* Установка width, height и position:relative */
width:900px;
height:300px;
position:relative;
}
/* Каждый слайд по умолочанию должен быть скрыт */
.slide { display:none; }
/*
И только "cs-activeSlide" должен быть видимым
*/
.slide.activeSlide { display:block; }
/* Контейрен с текстом заголовка, должен быть скрыт */
.slide-descriptions {
display:none;
}
/* Заголовок должен быть скрыт по умолчанию */
.caption {
/* Любые стили для заголовка */
}
/* Контейнер с навигацией слайдов*/
.pagination {
/* Стили для навигации */
}
.slider-pagination {
/* Стили для кнопок навигации */
}
/* Это стили для активной кнопки навигации */
.cs-active-pagination {
/* Различные стили для этой кнопки */
}
Java Script-код
jQuery(function(){
$("#slider").chopSlider({
/* Slide Element */
slide : ".slide",
/* Controlers */
nextTrigger : "a#slide-next",
prevTrigger : "a#slide-prev",
hideTriggers : true,
sliderPagination : ".slider-pagination",
/* Captions */
useCaptions : true,
everyCaptionIn : ".sl-descr",
showCaptionIn : ".caption",
captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
/* Autoplay */
autoplay : true,
autoplayDelay : 6000,
/* Default Parameters */
defaultParameters : {
type: "vertical",
xOffset: -100,
yOffset: 20,
hPieces : 10,
vPieces: 20,
rotate : 10 ,
rotateSymmetric: false,
scaleX:0.5,
scaleY:-0.5,
translateX:10,
translateY:10,
ease1:"ease",
ease2:"ease",
origin:"center center",
dur1: 1000,
dur2 :600,
dur3: 1000,
pieceDelay : 50,
xFadeDelay :0,
prevTransition : !{
rotate:-10,
xOffset:10,
startFrom:10
}
},
/* Для мобильный браузеров */
mobile: {
disableCSS3:true,
dur1:1200,
dur2:1200,
dur3:1200,
hPieces:4,
vPieces:4,
pieceDelay:120,
rotate:0,
yOffset:0,
scaleX:1,
scaleY:1
},
/* Для динозавроподобных браузеров */
noCSS3:{
dur1:1200,
dur2:1200,
dur3:1200,
hPieces:4,
vPieces:4,
pieceDelay:120,
xFadeDelay :200
},
onStart: function(){ /* Do Something*/ },
onEnd: function(){ /* Do Something*/ }
})
})
Все Java Script свойства разработчики описали в документации (ссылка внизу), так что проблем с настройкой анимации возникнуть не должно, на крайний случай можно вернуться к стоковой анимации, код которой я привёл. Все настройки описывать не имеет смысла, так как можно про них прочитать в документации, но несколько настроек я для полноты обзора напишу
Чтобы выбирать переходы, представленые на сайте, необходимо в код добавить данную строчку:
t2D:csTransitions['half']['3'], где 'half' — название перехода, 3 — номер перехода.
К примеру, я использую Chop Slider с такими настройками:
jQuery(function(){
$("#slider").chopSlider({
slide:".slide",
nextTrigger:"a#slide-next",
prevTrigger:"a#slide-prev",
hideTriggers:false,
sliderPagination:".slider-pagination",
hidePagination:false,
useCaptions:true,
everyCaptionIn:".sl-descr",
showCaptionIn:".caption",
hideCaptions:true,
t2D:csTransitions['half']['3'],
onStart: function(){ /* Do Something*/ },
onEnd: function(){ /* Do Something*/ }
})
})
Источник: http://www.idangero.us/cs/ |