HTML
***************************************
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="slideshow">
<ul id="images">
<li><div id="image-1"></div></li>
<li><div id="image-2"></div></li>
<li><div id="image-3"></div></li>
</ul>
<p id="preview"><</p>
<p id="next">></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
******************************************
CSS
body {
background-color: #fafafa;
font-family: Verdana;
}
* {
margin: 0px;
padding: 0px;
-webkit-transition: all .5s;
}
li {
list-style: none;
}
#image-1,
#image-2,
#image-3 {
width: 450px;
height: 300px;
background-color: #333;
float: left;
overflow: hidden;
display: block;
position: relative;
background-size: 130%;
-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.41);
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.41);
box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.41);
}
/*
*
http://freelancefolder.com/wp-content/uploads/12-strange-wordpress-portfolio-theme-dark.png
*
http://0.s3.envato.com/files/163840/Screenshots/01_Home.__large_preview.jpg
*
http://cdnm.tutorialchip.com/wp-content/uploads/2011/11/Yin-Yang-Light-and-Slick-WP-Portfolio-Theme-520x264.png
*/
#image-1 {
background-image: url(http://freelancefolder.com/wp-content/uploads/12-strange-wordpress-portfolio-theme-dark.png);
z-index: 0;
right: -180px; /*150*/
}
#image-2 {
background-image: url(http://0.s3.envato.com/files/163840/Screenshots/01_Home.__large_preview.jpg);
z-index: 1;
}
#image-3 {
background-image: url(http://cdnm.tutorialchip.com/wp-content/uploads/2011/11/Yin-Yang-Light-and-Slick-WP-Portfolio-Theme-520x264.png);
z-index: 0;
right: 180px; /*150*/
}
#preview,
#next {
color: #333;
text-decoration: none;
float: left;
}
.slideshow {
height: 300px;
width: 1350px;
-webkit-transform: scale(.9);
margin: 100px auto;
}
Нужен эффект как сдесь только с тремя изображениями
http://fredhq.com/projects/roundabout/demos/standard
Примечание:
я хочу написать свой слайдер, но не понимаю как происходит эффек. Если у вас получилось настроить плагин, поделитесь исходниками пожалуйста.
Примечание:
Я знаю JS и jQuery. У меня не получается просто достигнуть эффекта 3d вращения, вот я и прошу вас помочь. Я не хочу подключать дополнительные библиотеки и плагины, когда это делает загрузку сайта более медленной, и можно все на чистом JS написать.
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.