jQuery Chop Slider

Эта статья о новых впечатляющих эффектах JQuery Chop. Этот слайдер уже имеет 200 различных эффектов перехода. В нём много 2D и 3D эффектов перехода. Кроме того здесь вы можете найти еще несколько NonCSS3 эффектов для старых браузеров IE и пять эффектов для мобильных браузеров (для мобильных телефонов). Еще если хотите вы можете создать собственные новые переходы.

Слайдер фото

Демо

Вот исходный код слайдера jQuery Chop Slider.

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Создать фотоальбом с jQuery Chop Slider</title>

        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/chopslider.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/jquery.id.chopslider-2.2.0.free.min.js"></script>
        <script src="js/jquery.id.cstransitions-1.2.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="container">

            <div class="wrapper">
              <div class="s-shadow-b"></div>
              <a id="slide-next" href="#"></a>
              <a id="slide-prev" href="#"></a>
              <div id="slider">
                <div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div>
                <div class="slide"> <img src="slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div>
                <div class="slide"> <img src="slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div>
                <div class="slide"> <img src="slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div>
                <div class="slide"> <img src="slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div>
                <div class="slide"> <img src="slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div>
                <div class="slide"> <img src="slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div>
              </div>
              <div class="pagination">
                <span class="slider-pagination"></span>
                <span class="slider-pagination"></span>
                <span class="slider-pagination"></span>
                <span class="slider-pagination"></span>
                <span class="slider-pagination"></span>
                <span class="slider-pagination"></span>
                <span class="slider-pagination"></span>
              </div>
              <div class="slide-descriptions">
                <div class="sl-descr">Таиланд, есть очень много различных Банкоматов в одном месте</div>
                <div class="sl-descr">Все города в ярком цвете, нет ничего черного</div>
                <div class="sl-descr">Рынок на реке. Покупки на воде</div>
                <div class="sl-descr">Закат на острове Ко Панган</div>
                <div class="sl-descr">Незадолго до заката</div>
                <div class="sl-descr">Прикольная скульптура на острове Ко-Самуи</div>
                <div class="sl-descr">Это такая симпатичная барменша, вы можете посмотреть</div>
              </div>
              <div class="caption"></div>
            </div>

        </div>
</body>
</html>

Все слайды обёрнутые в собственный родительский элемент DIV с классом slide. Обратите внимание, что мы должны создать такое же количество элементов slide, сколько слайдов. То же самое и для описания с лева.

CSS
Стили CSS для слайда. Вы можете настроить стили как вам нравится.

.wrapper {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:960px;
	height:300px;
	display:block;
	padding-top:150px;
	padding-bottom:120px;
	background:url(../images/podium.png) no-repeat bottom;
	z-index:2;
}
.wrapper2 {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	width:960px;
	height:300px;
	display:block;
	z-index:2;
	text-align:center;
	padding-bottom:50px;
}
.wrapper2 a {
	display:inline-block;
	padding:0px 5px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:3px;
	text-decoration:none;
	margin:0px 5px;
}
.wrapper2 .active-transition {
	background:#222;
	color:#fff;
}
/*---------- Slider ----------- */

/*---------- Left and Right Triggers ----------- */
#slide-prev {
	position:absolute;
	width:21px;
	height:33px;
	bottom:39px;
	left:26px;
	z-index:4;
	background:url(../images/sl-control.png) left top no-repeat;
}
#slide-next {
	position:absolute;
	width:21px;
	height:33px;
	bottom:39px;
	right:26px;
	z-index:4;
	background:url(../images/sl-control.png) left bottom no-repeat;
}

/*---------- Shadow, just for styling ----------- */
.s-shadow-b{
	background:url(../images/shadow.png) no-repeat top;
	width:876px;
	height:55px;
	position:absolute;
	left:42px;
	bottom:60px;
	z-index:1;
}
/*---------- Main Slider Container----------- */
#slider {
	width:900px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:2;
	display:block;
}
/* Every slide must be hidden by default */
.slide { display:none; }

/*
   And only the slide with "cs-activeSlide" class must be visible!
   !Reserved Class name. Required class!
*/
.cs-activeSlide { display:block; }

/* Container with caption's text. Must be hidden */
.slide-descriptions {
	display:none;
}

/* Container with caption, must be hidden by default */
.caption {
    background: url("../images/d-bg.png") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: none;
    height: 280px;
    padding: 20px;
    position: absolute;
    right: 40px;
    top: 140px;
    width: 180px;
    z-index: 3;
}
.full-3D {
    right: 40px;
    top: 580px;
    width: 840px;
    height:20px;
}
/* Container with Pagination buttons */
.pagination {
    bottom: 50px;
    left: 345px;
    margin-top: 50px;
    position: absolute;
    text-align: center;
}
.slider-pagination {
	display:inline-block;
	width:15px;
	height:10px;
	background:url(../images/navi.png) no-repeat left bottom;
	margin:0 10px;
	cursor:pointer;
	position:relative;
	z-index:200;
}
/* This is a required class for the "Active" pagination button. ! Reserved Class Name ! */
.cs-active-pagination {
	background:url(../images/navi.png) no-repeat left top;
}

/* Multiple SLiders */
.slider-2 {
	padding-top:0;
	margin-top:20px;
}
#slider-1, #slider-2 {
	width:900px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:2;
	display:block;
}
.cs-activeSlide-2 {
	display:block
}
.cs-active-pagination-2 {
	background:url(../images/navi.png) no-repeat left top;
}

JavaScript

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 : 5000,
        /* for Browsers that support 3D transforms */
        t3D : csTransitions['3DFlips']['random'], /* all will be picked up randomly */
        t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})

Это функция инициализации слайдера jQuery Chop. Я установил все эффекты переходов в случайные для отображения различных эффектов на различных браузерах. Также я включил автозапуск и отображения заголовков описания.

Для интерфейса слайдера мы используем несколько изображений png. Все эти образы в нашем демо. Все слайды изображений в папке slide_images.