Простейшая круговая карусель элементов jQuery

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

Введение.

Сейчас очень популярны горизонтальные и вертикальные слайдеры и карусели элементов. Существует большое количество готовых библиотек, для реализации каруселей. Но, не так давно, наткнулся на один сайт, где элементы были расположены и переключались по кругу. Для создания круговых каруселей есть готовые 3D библиотеки каруселей, но, они не позволяли реализовать именно то, что хотелось мне, при этом контроль над элементами был практически нулевой, сложно было исправить функционал «под себя».

Как итог, я решил самостоятельно разобраться и сделать подобную карусель элементов. Демонстрацию карусели Вы можете найти по ссылке в конце статьи.

Функционал простой. Заранее предупрежу, что все элементы придется просчитывать и размещать (позиционировать) вручную для каждого размера контента. В качестве еще одного минуса, отмечу, что из-за ручного расчета позиционирования элементов не получится реализовать динамическое изменение количества элементов в карусели.

Как это работает?

Итак, предлагаю разобраться, из чего вообще будет состоять карусель.

Во-первых, Вам необходимо подобрать изображение, которое будет служить основой круговой карусели.

Далее делаем следующую разметку:

<div class="circle-carousel">
	<div class="container">
		<div class="wraper">
			<ul class="circle-container">
				<li class="circle-item selected">
					<img class="circle-item-image" src="/images/thumb-001.jpg" alt="">
					<div class="circle-item-content">
						<div class="circle-item-title">Цельнометаллический алхимик новые серии</div>
						<div class="circle-item-desc">Будь в рядах первых, кто увидит новые серии.</div>
						<div class="circle-item-link">#</div>
					</div>
				</li>
				<li class="circle-item">
					<img class="circle-item-image" src="/images/thumb-002.jpg" alt="">
					<div class="circle-item-content">
						<div class="circle-item-title">Обои на рабочий стол</div>
						<div class="circle-item-desc">Скачай обои из аниме Цельнометаллический алхимик</div>
						<div class="circle-item-link">#</div>
					</div>
				</li>
				<li class="circle-item">
					<img class="circle-item-image" src="/images/thumb-003.jpg" alt="">
					<div class="circle-item-content">
						<div class="circle-item-title">Познай мир Цельнометаллического алхимика</div>
						<div class="circle-item-desc">Изучи историю и героев любимого аниме</div>
						<div class="circle-item-link">#</div>
					</div>
				</li>
				<li class="circle-item">
					<img class="circle-item-image" src="/images/thumb-004.jpg" alt="">
					<div class="circle-item-content">
						<div class="circle-item-title">Цельнометаллический алхимик - Студия аниме</div>
						<div class="circle-item-desc">Всё о процессе создания аниме</div>
						<div class="circle-item-link">#</div>
					</div>
				</li>
				<li class="circle-item">
					<img class="circle-item-image" src="/images/thumb-005.jpg" alt="">
					<div class="circle-item-content">
						<div class="circle-item-title">Цельнометаллический алхимик - Аксессуары</div>
						<div class="circle-item-desc">Магазин игрушек и аксессуаров по аниме</div>
						<div class="circle-item-link">#</div>
					</div>
				</li>
				<li class="circle-item">
					<img class="circle-item-image" src="/images/thumb-003.jpg" alt="">
					<div class="circle-item-content">
						<div class="circle-item-title">Хочешь быть в рядах первых?</div>
						<div class="circle-item-desc">Подписывайся на новости и оповещения</div>
						<div class="circle-item-link">#</div>
					</div>
				</li>
			</ul>
			<div class="circle-content">
				<div class="circle-content-teaser">
					<div class="circle-content-teaser-title"></div>
					<div class="circle-content-teaser-desc"></div>
				</div>
				<a href="#" class="circle-content-readmore">Смотреть подробнее</a>
			</div>
			<div class="circle-nav">
				<div class="circle-nav-prev">
					<a href="#">&larr;</a>
				</div>
				<div class="circle-nav-next">
					<a href="#">&rarr;</a>
				</div>
			</div>
		</div>
	</div>
</div>

Здесь хочу акцентировать внимание на блок <ul class=»circle-container»>…</ul> В нем будут перечисляться наши элементы, их может быть сколько Вам угодно. Этот блок естественно можно сделать через цикл, если Ваши данные берутся из базы или находятся в массиве.

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

Не обращаем внимание на блоки с классом .circle-item-content, в них мы будем хранить заголовки, описания и ссылки на элементы, они никак не будут отображаться, мы их скроем, но, сами значения будем брать для отображения в момент выбора.

Также у нас присутствует блок навигации <div class=»circle-nav»>…</div> — стрелки прокрутки назад и вперед, их можно будет убрать, если они Вам будут не нужны.

И соответственно блок <div class=»circle-content»>…</div> в который мы будем помещать заголовок, описание и ссылку выбранного элемента для отображения, т.е. как раз из блока с классом .circle-item-content каждого элемента.

Оформление.

Структура готова. Теперь необходимо оформить всё содержимое:

.circle-carousel {
	
}

.circle-carousel .container {
	
}

.circle-carousel .container .wraper {
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	height: 1000px;
}

.circle-container {
	padding: 0;
	margin: 0;
	position: absolute;
	list-style: none;
	padding: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	background: url('/../images/circle-background.png') no-repeat center 0;
	background-size: cover;
	transition: all 1.5s ease-in;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.circle-item {
	display: block;
	position: absolute;
	width: 250px;
	height: 250px;
}

.circle-item.selected {
	
}

.circle-item:nth-of-type(1){
	top: 50px;
	left: 375px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

.circle-item:nth-of-type(2){
	top: 210px;
	left: 655px;
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}

.circle-item:nth-of-type(3){
	top: 540px;
	left: 655px;
	-webkit-transform: rotate(120deg);
	transform: rotate(120deg);
}

.circle-item:nth-of-type(4){
	top: 700px;
	left: 375px;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.circle-item:nth-of-type(5){
	top: 540px;
	left: 95px;
	-webkit-transform: rotate(240deg);
	transform: rotate(240deg);
}

.circle-item:nth-of-type(6){
	top: 210px;
	left: 95px;
	-webkit-transform: rotate(300deg);
	transform: rotate(300deg);
}

.circle-item .circle-item-image {
	border-radius: 50%;
	border: #ff0000 1px solid;
	margin: 3px;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: opacity 1s linear;
	transition: opacity 1s linear;
}

.circle-item.selected .circle-item-image, .circle-item .circle-item-image:hover{
	opacity: 1;
	filter: alpha(opacity=100);
	cursor: pointer;
}

.circle-item-content {
	display: none;
}

.circle-content {
	font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;
	text-shadow: 2px 2px 8px #535353;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: 0;
	margin-right: 0;
	top: 490px;
	padding-right: 30px;
	padding-left: 30px;
	pointer-events: none;
}

.circle-content-teaser {
	text-align: center;
}

.circle-content-teaser-title {
	padding: 5px 15px;
	display: table;
	margin-top: 30px;
	color: #fff;
	font-size: 2.25rem;
	margin: 0 auto;
	padding: 0;
	line-height: normal;
	text-decoration: none;
}

.circle-content-teaser-desc {
	color: #a1a1a1;
	font-size: 1.25rem;
}

.circle-content-readmore {
	margin-top: 20px;
	margin-bottom: 20px;
	color: #fff;
	pointer-events: auto;
}

.circle-nav {
	
}

.circle-nav .circle-nav-prev, .circle-nav .circle-nav-next {
	position: absolute;
	z-index: 1;
	font-size: 2.5rem;
	top: 220px;
	display: block;
}

.circle-nav .circle-nav-prev {
	left: 350px;
}

.circle-nav .circle-nav-next {
	right: 350px;
}

.circle-nav .circle-nav-prev a, .circle-nav .circle-nav-next a {
	color: #999;
	text-decoration: none;
}

.circle-nav .circle-nav-prev a:hover, .circle-nav .circle-nav-next a:hover {
	color: #fff;
	cursor: pointer;
}

Здесь обратите внимание на оформление класса .circle-container, в нем мы как раз указываем изображение, которое будет нашей основой. Изображение желательно иметь равным или больше, чем размер самого блока карусели. Размер блока мы задаем в классе .circle-carousel .container .wraper. У меня размер равен 1000х1000 пикселей (т.к. круговая карусель элементов у нас круглая, поэтому блок должен быть равным по ширине и высоте).

Самое важное в наших стилях, это оформление элементов. Уделите особое внимание оформлению стилей .circle-item:nth-of-type(номер)

Именно здесь Вам необходимо рассчитать и задать позиции для каждого элемента в нашей окружности. У меня 6 элементов, поэтому я также каждый из них поворачиваю на +60 градусов относительно друг друга. Это необходимо для того, чтобы выбранный в конечном итоге при повороте встал на нужный градус. По сути, позиционирование элементов самое сложное во всём процессе создания круговой карусели.

Все остальные стили, это просто оформление, Вы можете крутить их как Вам будет угодно. Я не специалист в оформлении, поэтому у меня всё просто.

Двигатель.

Итак, теперь добавим скрипты, которые будут обрабатывать нашу карусель:

jQuery(function($) {
	function appendContent(elem) {
		$('.circle-content .circle-content-teaser-title').html(elem.find('.circle-item-title').text());
		$('.circle-content .circle-content-teaser-desc').html(elem.find('.circle-item-desc').text());
		$('.circle-content .circle-content-readmore').attr('href', elem.find('.circle-item-link').text());
	}
	
	var degree = 0;
	
	function rotateElem(elem) {
		var indexCurent;
		var countElem = $('.circle-container .circle-item').length;
		var indexElem = $('.circle-container .circle-item').index(elem);
		
		$('.circle-container .circle-item').each(function(index){
			if ($(this).hasClass('selected')) {
				indexCurent = index;
			}
		});
		
		$('.circle-container .circle-item.selected').removeClass('selected');
		
		if (indexCurent < indexElem) {
			degree = degree - ((360 / countElem) * (indexElem - indexCurent));
		}
		if (indexCurent > indexElem) {
			degree = degree + ((360 / countElem) * (indexCurent - indexElem));
		}
		
		$('.circle-container').css({
			'-webkit-transform': 'rotate(' + degree + 'deg)',
			'-moz-transform': 'rotate(' + degree + 'deg)',
			'-ms-transform': 'rotate(' + degree + 'deg)',
			'-o-transform': 'rotate(' + degree + 'deg)',
			'transform': 'rotate(' + degree + 'deg)'
		});
		
		elem.addClass('selected');
	}
	
	function rotatePrev(elem) {
		$('.circle-container .circle-item.selected').removeClass('selected');
		
		var countElem = $('.circle-container .circle-item').length;
		var indexElem = $('.circle-container .circle-item').index(elem);
		degree = degree + (360 / countElem);
		
		$('.circle-container').css({
			'-webkit-transform': 'rotate(' + degree + 'deg)',
			'-moz-transform': 'rotate(' + degree + 'deg)',
			'-ms-transform': 'rotate(' + degree + 'deg)',
			'-o-transform': 'rotate(' + degree + 'deg)',
			'transform': 'rotate(' + degree + 'deg)'
		});
		
		elem.addClass('selected');
	}
	
	function rotateNext(elem) {
		$('.circle-container .circle-item.selected').removeClass('selected');
		
		var countElem = $('.circle-container .circle-item').length;
		var indexElem = $('.circle-container .circle-item').index(elem);
		degree = degree - (360 / countElem);
		
		$('.circle-container').css({
			'-webkit-transform': 'rotate(' + degree + 'deg)',
			'-moz-transform': 'rotate(' + degree + 'deg)',
			'-ms-transform': 'rotate(' + degree + 'deg)',
			'-o-transform': 'rotate(' + degree + 'deg)',
			'transform': 'rotate(' + degree + 'deg)'
		});
		
		elem.addClass('selected');
	}
	
	$('.circle-container .circle-item').on('click', function(e) {
		e.preventDefault();
		var elem = $(this);
		rotateElem(elem);
		appendContent(elem);
	});
	
	$('.circle-nav .circle-nav-prev a').on('click', function(e) {
		e.preventDefault();
		var prev = $('.circle-container .circle-item.selected').prev();
		if (prev.length == 0) {
			prev = $('.circle-container .circle-item:last-child');
		}
		rotatePrev(prev);
		appendContent(prev);
	});
	
	$('.circle-nav .circle-nav-next a').on('click', function(e) {
		e.preventDefault();
		var next = $('.circle-container .circle-item.selected').next();
		if (next.length == 0) {
			next = $('.circle-container .circle-item:first-child');
		}
		rotateNext(next);
		appendContent(next);
	});
	
	appendContent($('.circle-container .circle-item.selected'));
});

Здесь у нас 4 функции и 3 обработки нажатия (нажатие на кнопки «назад», «вперед» и нажатие на сам элемент):
appendContent(elem) — функция, которая получает заголовок, описание и ссылку элемента и размещать в центральном блоке;
rotateElem(elem) — функция, которая будет поворачивать всю карусель к элементу, на который был произведен клик;
rotatePrev(elem) — функция, которая будет поворачивать карусель на один элемент назад при клике на кнопку «назад»;
rotateNext(elem) — функция, которая будет поворачивать карусель на один элемент вперед при клике на кнопку «вперед».

Скрипт можно даже не трогать, вставить как есть, независимо от количества элементов в структуре карусели, т.к. расчет ведется в функции. Всё что Вам понадобится, это изменить названия классов, в случае, если Вы их изменяли в разметке.

И, не менее важная деталь — не забываем подключить библиотеку jQuery.

Круговая карусель элементов готова.

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

Touch событие — Swipe для карусели

Этим дополнением я обязан посетителю Amsterdam, который в своём комментарии предложил добавить Touch событие прокрутки карусели на мобильных устройствах с помощью Swipe (листания).

Сама по себе статья, да и сама карусель на мой взгляд стары. Можно было бы большую часть кода переработать и оптимизировать. Но это всего лишь демонстрация того, что можно реализовать на своём сайте, поэтому основной код трогать не буду.

Сама по себе мысль о Touch событиях мне понравилась. В одном из заказов мне уже приходилось делать листалку для книги. Для подобных событий есть множество готовых плагинов со своими преимуществами и недостатками. Но для реализации Swipe именно для этой карусели я решил сделать чистым JS.

Для реализации, нам понадобится добавить как минимум две функции — touchstart (начало прикосновения) и touchend (конец прикосновения). Также можно еще добавить touchmove (движение) для плавной прокрутки, но в данной карусели эта функция будет работать не корректно и придется переделывать весь основной код, поэтому я решил ее не использовать.

В Demo мной были добавлены стили для экранов меньше 600px, чтобы можно было протестировать. Для корректного просмотра экран Вашего мобильного устройства должен быть не менее 380px, в противном случае Вам будет мешать горизонтальный скролл. Также можно протестировать с компьютера, включив режим мобильного устройства через консоль браузера.

Итак, просто в общий код добавьте следующий сразу после строчки appendContent($(‘.circle-container .circle-item.selected’));

var startPoint;
var endPoint;
document.addEventListener('touchstart', function(e) { // Добавляем обработку события начала прикосновения к экрану (когда положили палец на экран)
	startPoint = e.changedTouches[0]; // Получаем данные о начальном положении прикосновения. 0 - берем первый палец, который положили на экран
}, false);

document.addEventListener('touchend', function(e) { // Добавляем обработку события окончания прикосновения (когда убрали палец с экрана)
	endPoint = e.changedTouches[0]; // Получаем данные о конечном положении прикосновения
	
	var xAbs = Math.abs(startPoint.pageX - endPoint.pageX); // Получаем абсолютное значение по X разницы между началом и концом прикосновения
	var yAbs = Math.abs(startPoint.pageY - endPoint.pageY); // Получаем абсолютное значение по Y разницы между началом и концом прикосновения
	
	if (xAbs > 20 || yAbs > 20) { // Обрабатываем только если произошел Swipe более чем на 20px
		if (xAbs > yAbs) {
			if (endPoint.pageX < startPoint.pageX) { // Swipe влево
				$('.circle-nav .circle-nav-next a').trigger('click');
			} else { // Swipe вправо
				$('.circle-nav .circle-nav-prev a').trigger('click');
			}
		} else {
			if (endPoint.pageY < startPoint.pageY) { // Swipe вверх
				$('.circle-nav .circle-nav-next a').trigger('click');
			} else { // Swipe вниз
				$('.circle-nav .circle-nav-prev a').trigger('click');
			}
		}
	}
}, false);

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

  • $(‘.circle-nav .circle-nav-next a’).trigger(‘click’); — вперед
  • $(‘.circle-nav .circle-nav-prev a’).trigger(‘click’); — назад

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

В принципе, всё очень просто. Если у Вас остались вопросы, оставляйте их в комментариях.

Хочу отметить, что код тестировался на Android, как обстоят дела с iPhone — не знаю. Если кому-то удастся протестировать на iPhone, очень прошу отписаться в комментариях.

Комментарии

  • Лев
    Здравствуйте!
    после обновления вордпресса до версии 5.5 карусель перестала работать. Не подскажите в чем причина может быть?
    • Blog About
      Добрый день.
      Данная статья никак не относится к WP и от его обновлений не зависит. Могу лишь предположить, что после обновления были добавлены какие-то скрипты, которые конфликтуют с написанными в статье. Вам остается только самостоятельно пытаться найти проблему. "Перестала работать" - слишком обширное понятие, ведь мне неизвестно, как у Вас устроен вывод карусели. Если просто не крутится, то могу предложить в этом случае смотреть консоль ошибок в браузере и если какие-либо есть, пытаться их устранить.
  • Лев
    Подскажите, как сделать всплывающую подсказку (title) при наведениии на круг. Точнее сделать не проблема, но как сделать так, чтобы она была постоянно горизонтально? Title интересует со своими стилями...
    • Blog About
      Добрый день. Т.к. при вращении карусели вращаются все элементы, то Вам необходимо вращать подсказки в противположную сторону на тот же градус, что и сама карусель, но со знаком минус (-).
      Если не использовать сторонние библиотеки, то не сложно.
      В разметку добавляем блок с подсказкой (title) сразу после картинки каждого элемента, у меня это <div class="circle-item-hint">Hint-Title 1</div> текст подсказки может быть любым.

      <li class="circle-item">
      <img class="circle-item-image" src="images/thumb-001.jpg" alt="">
      <div class="circle-item-hint">Hint-Title 1</div>
      <div class="circle-item-content">
      <div class="circle-item-title">Цельнометаллический алхимик новые серии</div>
      <div class="circle-item-desc">Будь в рядах первых, кто увидит новые серии.</div>
      <div class="circle-item-link">#</div>
      </div>
      </li>

      Добавляем немного стилей:

      .circle-item .circle-item-hint {
      opacity: 0;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      padding: 5px 10px;
      color: #000;
      background: #dfdfdf;
      border: 1px solid #000;
      border-radius: 5px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      }

      .circle-item:hover .circle-item-hint {
      opacity: 1;
      }

      .circle-item:nth-of-type(1) .circle-item-hint {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
      }

      .circle-item:nth-of-type(2) .circle-item-hint {
      -webkit-transform: translate(-50%, -50%) rotate(-60deg);
      transform: translate(-50%, -50%) rotate(-60deg);
      }

      .circle-item:nth-of-type(3) .circle-item-hint {
      -webkit-transform: translate(-50%, -50%) rotate(-120deg);
      transform: translate(-50%, -50%) rotate(-120deg);
      }

      .circle-item:nth-of-type(4) .circle-item-hint {
      -webkit-transform: translate(-50%, -50%) rotate(-180deg);
      transform: translate(-50%, -50%) rotate(-180deg);
      }

      .circle-item:nth-of-type(5) .circle-item-hint {
      -webkit-transform: translate(-50%, -50%) rotate(-240deg);
      transform: translate(-50%, -50%) rotate(-240deg);
      }

      .circle-item:nth-of-type(6) .circle-item-hint {
      -webkit-transform: translate(-50%, -50%) rotate(-300deg);
      transform: translate(-50%, -50%) rotate(-300deg);
      }

      Обратите внимание, что здесь для каждого элемента мы повернули блок подсказки в противоположную сторону, в отличие от самого элемента.
      Также важно, если Вы не используете translate() для выравнивания элемента, то его необходимо удалить как из данного перечня стилей, так и из скрипта ниже.

      В файле JS добавляем в каждую из трех функций перед строкой elem.addClass('selected'); новый блок кода:

      $('.circle-container .circle-item').each(function() {
      var degree_hind = degree + 60 * $(this).index();
      if (degree_hind < 0) {
      degree_hind = 360 + degree_hind;
      }
      $(this).find('.circle-item-hint').css({
      '-webkit-transform': 'translate(-50%, -50%) rotate(-' + degree_hind + 'deg)',
      '-moz-transform': 'translate(-50%, -50%) rotate(-' + degree_hind + 'deg)',
      '-ms-transform': 'translate(-50%, -50%) rotate(-' + degree_hind + 'deg)',
      '-o-transform': 'translate(-50%, -50%) rotate(-' + degree_hind + 'deg)',
      'transform': 'translate(-50%, -50%) rotate(-' + degree_hind + 'deg)'
      });
      });

      Как и писал выше, если не используете выравнивание с помощью translate(), то удалите его из кода.
      Готово.
  • Николай
    У вас в двигателе в 5 строке (.cricle-content) ошибка. Из-за этого не подхватывает ссылку.
    • Blog About
      Добрый день. Приношу свои извинения, что не смог ответить и помочь разобраться в проблеме раньше, был в отъезде. Действительно, в скрипте была опечатка, спасибо за Вашу внимательность, исправил.
  • Николай
    Здравствуйте!
    Не могу понять, как управлять ссылками для перехода на нужную страницу при нажатии на кнопку "смотреть подробнее".
    На сколько я понял в блоке # вместо решетки ставим путь нужной страницы и при выборе кружка этот путь подхватывает? Или я что то делаю не так?
  • Николай
    Здравствуйте!
    Не могу понять, как управлять ссылками для перехода на нужную страницу при нажатии на кнопку "смотреть подробнее".
    На сколько я понял в блоке # вместо решетки ставим путь нужной страницы и при выборе кружка этот путь подхватывает? Или я что то делаю не так?
  • Лев
    Подскажите, как добавить картинку над блоком с текстом?
    • Blog About
      Добрый день.
      В блок
      <div class="circle-content">
      <div class="circle-content-teaser">
      <div class="circle-content-teaser-title"></div>
      <div class="circle-content-teaser-desc"></div>
      </div>
      <a href="#" class="circle-content-readmore" rel="nofollow ugc">Смотреть подробнее</a>
      </div>

      добавьте новый див <div class="circle-content-teaser-image"></div> примерно следующим образом:
      <div class="circle-content">
      <div class="circle-content-teaser">
      <div class="circle-content-teaser-image"></div>
      <div class="circle-content-teaser-title"></div>
      <div class="circle-content-teaser-desc"></div>
      </div>
      <a href="#" class="circle-content-readmore" rel="nofollow ugc">Смотреть подробнее</a>
      </div>

      В стилях понадобится небольшое оформление, например так:
      .circle-content-teaser-image {
      margin: 0 auto;
      padding: 0;
      width: 200px;
      }

      .circle-content-teaser-image img {
      width: 100%;
      }

      Также потребуется поднять весь блок .circle-content поэтому измените top: 490px на меньшее значение, например 300px

      Вариант 1: Если Вы хотите показывать картинку, которая в кружочке, то в скрипте найдите функцию
      function appendContent(elem) {
      $('.circle-content .circle-content-teaser-title').html(elem.find('.circle-item-title').text());
      $('.circle-content .circle-content-teaser-desc').html(elem.find('.circle-item-desc').text());
      $('.circle-content .circle-content-readmore').attr('href', elem.find('.circle-item-link').text());
      }

      и измените следующим образом
      function appendContent(elem) {
      $('.circle-content .circle-content-teaser-image').html(elem.find('.circle-item-image').clone());
      $('.circle-content .circle-content-teaser-title').html(elem.find('.circle-item-title').text());
      $('.circle-content .circle-content-teaser-desc').html(elem.find('.circle-item-desc').text());
      $('.circle-content .circle-content-readmore').attr('href', elem.find('.circle-item-link').text());
      }

      Вариант 2: Если Вы хотите показывать отдельно другую картинку, то для каждого блока цикла
      <li class="circle-item">
      <img class="circle-item-image" src="/images/thumb-001.jpg" alt="">
      <div class="circle-item-content">
      <div class="circle-item-title">Цельнометаллический алхимик новые серии</div>
      <div class="circle-item-desc">Будь в рядах первых, кто увидит новые серии.</div>
      <div class="circle-item-link">#</div>
      </div>
      </li>

      добавьте новый блок с картинкой
      <li class="circle-item">
      <img class="circle-item-image" src="/images/thumb-001.jpg" alt="">
      <div class="circle-item-content">
      <img class="circle-item-image-full" src="/images/full-001.jpg" />
      <div class="circle-item-title">Цельнометаллический алхимик новые серии</div>
      <div class="circle-item-desc">Будь в рядах первых, кто увидит новые серии.</div>
      <div class="circle-item-link">#</div>
      </div>
      </li>

      В скриптах найдите функцию
      function appendContent(elem) {
      $('.circle-content .circle-content-teaser-title').html(elem.find('.circle-item-title').text());
      $('.circle-content .circle-content-teaser-desc').html(elem.find('.circle-item-desc').text());
      $('.circle-content .circle-content-readmore').attr('href', elem.find('.circle-item-link').text());
      }

      и измените следующим образом
      function appendContent(elem) {
      $('.circle-content .circle-content-teaser-image').html(elem.find('.circle-item-image-full').clone());
      $('.circle-content .circle-content-teaser-title').html(elem.find('.circle-item-title').text());
      $('.circle-content .circle-content-teaser-desc').html(elem.find('.circle-item-desc').text());
      $('.circle-content .circle-content-readmore').attr('href', elem.find('.circle-item-link').text());
      }
  • Игорь
    Ребят, пожалуйста, добавьте автоматическое перелистывание слайдов, вообще никак не могу понять, как это реализовать
    • Blog About
      Самый простой вариант, это добавить таймер наряду с остальным кодом:
      setInterval(function() {
      $('.circle-nav .circle-nav-next a').trigger('click'); // Если хотите крутить вперед
      // $('.circle-nav .circle-nav-prev a').trigger('click'); // Если хотите крутить назад
      }, 1000);
      Где 1000 - время задержки в милисекундах перед прокруткой.
  • Amsterdam
    Мастерски! Но не хватает одного момента на мой взгляд - возможности крутить ее мышкой. Сейчас этот функционал очень востребован, особенно на планшетах и смартфонах. Будь здесь эта функция, данный образец определенно можно было назвать лучшим ;)
    • Blog About
      Кстати да, Вы правы, не помешает добавить. Возможно, если будет время, попробую что-нибудь придумать и дополнить.
      Спасибо за отзыв.
      • Amsterdam
        С интересом буду следить за доработкой!
        • Blog About
          Добавлены функции обработки Touch событий. Если Вам всё еще интересно, читайте блок статьи "Touch событие — Swipe для карусели".

Добавить комментарий