Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Эффект карусели (https://javascript.ru/forum/misc/55502-ehffekt-karuseli.html)

ученица 30.04.2015 19:13

Эффект карусели
 
Здравствуйте!
Нужно сделать эффект карусели на движке вордпресс. Вот тут есть пример http://web-esse.ru/example/sliders/carousel.html. 3-ий вариант, то, что нужно.
И да, предупреждаю, я гуглила почти неделю, ничего толкового в интернете не нашла.
Поэтому просьба осталась к вам.
Заранее спасибо )

ученица 30.04.2015 21:45

:cray: кто-нибудь помогите новичку пожалуйста (((

Dark Surv 01.05.2015 14:27

вообщето оно на JQuery сделано - вот плагин - http://web-esse.ru/example/sliders/const_carousel.js
а вот пример использования(не забудьте подключить JQuery)

<script src='jquery-2.1.3.js'></script>
<script src='const_carousel.js'></script>
<link rel="stylesheet" href="carousel.css"/>
<script>
jQuery(document).ready(function () {
	jQuery("#carousel_const").carousel_const();
});
</script>

<div id="carousel_const">
		<div class="wrapper">
		<div class="gallery" style="width: 640px;">
			<div class="gallery-item" style="left: 207px;">
			<span class="gallery-icon">
				<a href="http://web-esse.ru/wp-content/uploads/2011/05/slide.jpg" title="slide"><img width="150" height="150" src="http://web-esse.ru/wp-content/uploads/2011/05/slide-150x150.jpg" class="attachment-thumbnail" alt="slide" title="slide"></a>
			</span></div>
			<div class="gallery-item" style="left: 367px;">
			<span class="gallery-icon">
				<a href="http://web-esse.ru/wp-content/uploads/2011/05/slide2.jpg" title="slide2"><img width="150" height="150" src="http://web-esse.ru/wp-content/uploads/2011/05/slide2-150x150.jpg" class="attachment-thumbnail" alt="slide2" title="slide2"></a>
			</span></div>
			<div class="gallery-item" style="left: -113px;">
			<span class="gallery-icon">
				<a href="http://web-esse.ru/wp-content/uploads/2011/05/slide3.jpg" title="slide3"><img width="150" height="150" src="http://web-esse.ru/wp-content/uploads/2011/05/slide3-150x150.jpg" class="attachment-thumbnail" alt="slide3" title="slide3"></a>
			</span></div>
				<div class="gallery-item" style="left: 47px;">
			<span class="gallery-icon">
				<a href="http://web-esse.ru/wp-content/uploads/2011/05/slider1.jpg" title="slide3"><img width="150" height="150" src="http://web-esse.ru/wp-content/uploads/2011/05/slide3-150x150.jpg" class="attachment-thumbnail" alt="slide3" title="slide3"></a>
			</span></div>
		</div>
		</div><a href="#" class="arrow back">&lt;</a><a href="#" class="arrow forward">&gt;</a>
</div>

а стиль carousel.css лежит на то й же странице ( http://web-esse.ru/example/sliders/carousel.html )


Часовой пояс GMT +3, время: 05:00.