Craftyslide — крошечный слайдер на jQuery | Все о создании сайтов

Craftyslide — крошечный (всего 2kb) плагин для слайдшоу, созданный на jQuery.

Предназначение Craftyslide состоит в том, чтобы быть легким, простым, управляемым слайдером, предоставляющим показ изображений без излишеств.

Скачать

Почему Craftyslide?

Во-первых, Craftyslide был создан, как эксперимент, а, во-вторых, как альтернатива существующим плагинам. Автор пересмотрел немало современных слайдеров, но большинство из них были или слишком раздуты или семантически не верны.

Использование

Создаем HTML разметку.

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

Чтобы слайдер заработал, достаточно создать элемент DIV, в котором будет находится неупорядоченный список с изображениями. Для того, чтобы у изображений показывались заголовки, заполните атрибуты title. А дальше, достаточно прицепить поддерживаемые JS/CSS/JPG файлы и все заработает!

Подключаем файлы, необходимые для работы плагина:

Инициализация:

$("#slideshow").craftyslide();

</script>

CSS

#slideshow {

margin:0;

padding:0;

position:relative;

border:15px solid #fff;

-webkit-box-shadow:0 3px 5px #999;

-moz-box-shadow:0 3px 5px #999;

box-shadow:0 3px 5px #999;

}

#slideshow ul {

position:relative;

overflow:hidden;

margin:0;

padding:0;

}

#slideshow ul li {

position:absolute;

top:0;

left:0;

margin:0;

padding:0;

list-style:none;

}

#pagination {

clear:both;

width:75px;

margin:25px auto 0;

padding:0;

}

#pagination li {

list-style:none;

float:left;

margin:0 2px;

}

#pagination li a {

display:block;

width:10px;

height:10px;

text-indent:-10000px;

background:url(../images/pagination.png);

}

#pagination li a.active {

background-position:0 10px;

}

.caption {

width:100%;

margin:0;

padding:10px;

position:absolute;

left:0;

font-family:Helvetica, Arial, sans-serif;

font-size:14px;

font-weight:lighter;

color:#fff;

border-top:1px solid #000;

background:#000;

background:rgba(0,0,0,0.6);

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

filter: alpha(opacity=60);

}

jQuery

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

* Craftyslide

* Created by: Abid Din - http://craftedpixelz.co.uk

* Version: 1.0

* Copyright: Crafted Pixelz

* License: MIT license

* Updated: 7th June 2011

(function ($) {

$.fn.craftyslide = function (options) {

// Defaults

var defaults = {

"width": 600,

"height": 300,

"pagination": true,

"fadetime": 350,

"delay": 5000

};

var options = $.extend(defaults, options);

return this.each(function () {

// Vars

var $this = $(this);

var $slides = $this.find("ul li");

$slides.not(':first').hide();

// Pagination

function paginate() {

$this.append("<ol id='pagination' />");

var i = 1;

$slides.each(function () {

$(this).attr("id", "slide" + i);

$("#pagination")

.append("<li><a href='#slide" + i + "'>" + i + "</a></li>");

i++;

});

$("#pagination li a:first").addClass("active");

}

// Add captions

function captions() {

$slides.each(function () {

$caption = $(this).find("img").attr("title");

if ($caption !== undefined) {

$(this).prepend("<p class='caption'>" + $caption + "</p>");

}

$slides.filter(":first").find(".caption").css("bottom", 0);

});

}

// Manual mode

function manual() {

var $pagination = $("#pagination li a");

$pagination.click(function (e) {

e.preventDefault();

var $current = $(this.hash);

if ($current.is(":hidden")) {

$slides.fadeOut(options.fadetime);

$current.fadeIn(options.fadetime);

$pagination.removeClass("active");

$(this).addClass("active");

$(".caption").css("bottom", "-37px");

$current.find(".caption").delay(300).animate({

bottom: 0

}, 300);

}

});

}

// Auto mode

function auto() {

setInterval(function () {

$slides.filter(":first-child")

.fadeOut(options.fadetime)

.next("li")

.fadeIn(options.fadetime)

.end()

.appendTo("#slideshow ul");

$slides.each(function () {

if ($slides.is(":visible")) {

$(".caption").css("bottom", "-37px");

$(this).find(".caption").delay(300).animate({

bottom: 0

}, 300);

}

});

}, options.delay);

}

// Width

$this.width(options.width);

$this.find("ul, li img").width(options.width);

// Height

$this.height(options.height);

$this.find("ul, li").height(options.height);

// Check Boolean values

if (options.pagination === true) {

paginate();

} else {

auto();

}

captions(); manual();

});

};

})(jQuery);

Опции

width (число) — Ширина слайдера.
height (число) — Высота слайдера.
pagination (true/false) — Отображать паджинацию. Если установить false, то паджинация скроется и запустится автопрокрутка слайдов.
fadetime (число) — Скорость исчезания слайдов.
delay (число) — Задержка между слайдами во время автопрокрутки (при выключенной паджинации).

Пример опций:

$("#slideshow").craftyslide({

'width': 640,

'height': 400,

'pagination': false,

'fadetime': 500,

'delay': 2500

});

Все сделано и работает с британской точностью. Разве это не мечта веб-мастера?

Возможно, Вам будет интересно ↓↓↓

7 комментариев на “Craftyslide — крошечный слайдер на jQuery”

Юрий

01.06.2012 at 13:56 | Ответить

А можно использовать ширину 100%?
- 2Web
  
  01.06.2012 at 15:49 | Ответить
  
  к сожалению единицы измерения только пиксели.
Антон

13.10.2012 at 14:15 | Ответить

помогите пожалуйста все сделал как написано но у меня слайдер так и не хочет превращаться в слайдер а выглядит как картинки в списке что делать?(((
- 2Web
  
  13.10.2012 at 17:37 | Ответить
  
  Вы наверное забыли создать папки css, куда нужно положить craftyslide.css и папку js, куда нужно положить craftyslide.js
Елизавета

11.12.2012 at 16:35 | Ответить

Привинтить бы сюда кнопки «вперед» и «назад», было бы идеально
Tima

08.06.2013 at 15:50 | Ответить

Куда именно нужно вложить эти скрипты, для работы плагина? Объясните пожалуйста по подробнее куда их вставить...
- 2Web
  
  09.06.2013 at 00:05 | Ответить
  
  Попробуйте скачать исходник и посмотреть его текстовым редактором.

Почему Craftyslide?

Использование

Подключаем файлы, необходимые для работы плагина:

Инициализация:

CSS

jQuery

Опции

Пример опций:

Возможно, Вам будет интересно ↓↓↓

7 комментариев на “Craftyslide — крошечный слайдер на jQuery”

Оставить комментарий Отменить ответ