Автор

27 04.2013
Слайдер миниатюр с помощью плагина jQuery

Слайдер миниатюр с помощью плагина jQuery


 

Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide - плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.

 

ДЕМО
ИСХОДНИКИ

 

Данное решение достаточно простое.  Но в некоторых случаях (например, если размер изображений большой) нужно также изменять размер слайда. Плагин Elastislide имеет такую опцию, наряду с другими.

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

<div id="carousel">
<div>
     <ul>
	 <li>
	     <a href="#">
			<img src="images/medium/1.jpg" alt="image01" />
				</a>
			</li>
			<li>...</li>
	</ul>
   </div>
</div>

Используйте атрибут ID и запускайте плагин:

$('#carousel').elastislide({
	imageW 	: 180
});

где imageW - ширина миниатюр.

Теперь создаем стили CSS для слайдера:

.more{
	position:relative;
	clear:both;
}
.more p{
	color:#8f0630;
	font-size:16px;
}
.more ul{
	display:block;
	text-align:center;
}
.more ul li{
	display:inline;
	padding:2px;
	line-height:30px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
	background:#690322;
	color:#fff;
	text-shadow:none;
}
.more ul li a{
	text-shadow:1px 1px 1px #fff;
	color:#333;
	background:#fff;
	padding:3px 6px;
	white-space:nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.more ul li a:hover{
	background:#8f0630;
	color:#fff;
	text-shadow:none;
}
.column{
	width:48%;
	float:left;
	padding:1%;
}
@media screen and (max-width: 640px) {
	.header{
		text-align:center;
	}
	.header a{
		font-size:10px;
		text-shadow:none;
		white-space:nowrap;
	}
	.header span.right_ab{
		float:none;
	}
	h1{
		font-size:40px;
	}
	h1 span{
		font-size:16px;
	}
}

Рассмотрим некоторые опции плагина  Elastislide:

speed		: 450,
// скорость анимации

easing		: '',
// эффект перехода

imageW		: 190,
// ширина изображений

margin		: 3,
// поле для изображений справа

border		: 2,
// рамка изображений

minItems	: 1,
// минимальное количество слайдов, которое нужно выводить.
// При изменении размера окна будет выводиться слайдов не менее
// количества, заданного в парметре minItems
// (если значение minItems меньше, чем общее количество слайдов)

current		: 0,
// номер текущего слайда.
// При изменение окна плагин всегда будет
// выводить слайды так, чтобы указанное изображение было видно.

onClick		: function() { return false; }
// Возвратная функция для события click на слайде.
// Пример получения номера слайда, на котором нажали кнопку мыши:
/*
$('#carousel').elastislide({
    onClick  :  function( $item ) {
        alert( 'кнопку мыши нажали на слайде № ' + $item.index() )
    }
});
*/

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

var $items	= $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');
$('#carousel').append($items).elastislide( 'add', $items );

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

28 12.2014
Слайдер миниатюр с помощью плагина jQuery

В данном уроке мы сделаем отличный слайдер CSS3. Он будет использовать эффект затухания между слайдами. Дополнительно можно использовать описание для каждого изображения. Для организации информации будет использоваться неупорядоченный список. Слайды будут переключаться автоматически с помощью анимаций CSS3.


01 10.2017
Слайдер миниатюр с помощью плагина jQuery

Отображение морфинга, которое оживляет в соответствии с размером его содержимого.


11 10.2014
Слайдер миниатюр с помощью плагина jQuery

Наверняка вы встречали такой занимательный эффект как живые фотографии, когда фокус приведен только на один подвижный объект, такой эффект нельзя пройти стороной. Мы бы, сегодня, хотели рассказать и поделиться способом реализации такой функции для Вашего сайта, обратите внимание, что мы будем использовать только правила стилей, у нас не будут использованы различные функции скриптов, это позволит сделать такой эффект более гибкий и легким для отображения. Также мы заранее подготовили изображения.


10 05.2017
Слайдер миниатюр с помощью плагина jQuery

Конструктор продуктов - полезные инструменты для покупок, которые позволяют потенциальным клиентам «строить» идеальную версию продукта, комбинируя различные варианты. В конце этого процесса пользователю обычно дается действие, чтобы выполнить: сохранить сборку, поделиться ею или купить продукт напрямую.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close