» »

Слайдер с имитацией 3D эффекты для uCoz


Слайдер с имитацией 3D эффекты для uCoz

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

3D карусель предоставлена в трёх вариантах! А именно это первый вариант на подобии навигации, второй вариант авто-шоу то есть он сам будет листать изображения и третий вариант 3D карусель из трёх изображений. Все три Д карусели в принципе одни и те же, разница только в скрипте который заставляет работать карусель.

Установка 3D карусели для сайтов uCoz.

Основная настройка


Для начала скачайте архив и загрузите папку images и js в файловый менеджер вашего сайта, все две папки нужны любому из трёх вариантов . Теперь установим стили к карусели и они тоже одни для всех трёх вариантов и для установки вам нужно скопировать стили которые я указал чуть ниже и дописать их в стили вашего сайта в самый низ.

Код
.dg-container{
  width: 100%;
  height: 450px;
  position: relative;
}
.dg-wrapper{
  width: 481px;
  height: 316px;
  margin: 0 auto;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}
.dg-wrapper a{
  width: 482px;
  height: 316px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent url(../images/browser.png) no-repeat top left;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
  display: block;
  padding: 41px 0px 0px 1px;
}
.dg-wrapper a div{
  font-style: italic;
  text-align: center;
  line-height: 50px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  color: #333;
  font-size: 16px;
  width: 100%;
  bottom: -55px;
  display: none;
  position: absolute;
}
.dg-wrapper a.dg-center div{
  display: block;
}
.dg-container nav{
  width: 58px;
  position: absolute;
  z-index: 1000;
  bottom: 40px;
  left: 50%;
  margin-left: -29px;
}
.dg-container nav span{
  text-indent: -9000px;
  float: left;
  cursor:pointer;
  width: 24px;
  height: 25px;
  opacity: 0.8;
  background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
  opacity: 1;
}
.dg-container nav span.dg-next{
  background-position: top right;
  margin-left: 10px;
}


Далее подключим пару скриптов которые тоже нужны для трёх вариантов и для их подключения скопируйте ниже два скрипта и вставьте в нижнюю или в верхнюю часть сайта.

Код
<script type="text/javascript" src="/js/modernizr.custom.53451.js"></script>
<script type="text/javascript" src="js/jquery.gallery.js"></script>


Теперь мы установим ещё одни скрипты которые нужны для каждого отдельно из вариантов.

Скрипт для первого и третьего варианта

Скопируйте данный скрипт и так же установите его в нижнюю или в верхнюю часть сайта .

Код
<script type="text/javascript">
  $(function() {
  $('#dg-container').gallery();
  });
  </script/>


А если вам нужен второй вариант то установите вот этот скрипт

Код
<script type="text/javascript">
  $(function() {
  $('#dg-container').gallery({
  autoplay : true
  });
  });
  </script/>


Вот и всё осталось только установить сам код 3D карусели в нужное вам место на сайте.

Первый вариант

Код
<section id="dg-container" class="dg-container">
  <div class="dg-wrapper">
  <a href="#"><img src="/images/1.jpg" alt="image01"><div>Название изображения</div></a>
  <a href="#"><img src="/images/2.jpg" alt="image02"><div>Название изображения</div></a>
  <a href="#"><img src="/images/3.jpg" alt="image03"><div>Название изображения</div></a>
  <a href="#"><img src="/images/4.jpg" alt="image04"><div>Название изображения</div></a>
  <a href="#"><img src="/images/5.jpg" alt="image05"><div>Название изображения</div></a>
  <a href="#"><img src="/images/6.jpg" alt="image06"><div>Название изображения</div></a>
  <a href="#"><img src="/images/7.jpg" alt="image07"><div>Название изображения</div></a>
  <a href="#"><img src="/images/8.jpg" alt="image08"><div>Название изображения</div></a>
  <a href="#"><img src="/images/9.jpg" alt="image09"><div>Название изображения</div></a>
  <a href="#"><img src="/images/10.jpg" alt="image10"><div>Название изображения</div></a>
  <a href="#"><img src="/images/11.jpg" alt="image11"><div>Название изображения</div></a>
  <a href="#"><img src="/images/12.jpg" alt="image12"><div>Название изображения</div></a>
  </div>
  <nav>  
  <span class="dg-prev"><</span>
  <span class="dg-next">></span>
  </nav>
  </section>


Второй вариант

Код
<section id="dg-container" class="dg-container">
  <div class="dg-wrapper">
<a href="#"><img src="/images/1.jpg" alt="image01"><div>Название изображения</div></a>
  <a href="#"><img src="/images/2.jpg" alt="image02"><div>Название изображения</div></a>
  <a href="#"><img src="/images/3.jpg" alt="image03"><div>Название изображения</div></a>
  <a href="#"><img src="/images/4.jpg" alt="image04"><div>Название изображения</div></a>
  <a href="#"><img src="/images/5.jpg" alt="image05"><div>Название изображения</div></a>
  <a href="#"><img src="/images/6.jpg" alt="image06"><div>Название изображения</div></a>
  <a href="#"><img src="/images/7.jpg" alt="image07"><div>Название изображения</div></a>
  <a href="#"><img src="/images/8.jpg" alt="image08"><div>Название изображения</div></a>
  <a href="#"><img src="/images/9.jpg" alt="image09"><div>Название изображения</div></a>
  <a href="#"><img src="/images/10.jpg" alt="image10"><div>Название изображения</div></a>
  <a href="#"><img src="/images/11.jpg" alt="image11"><div>Название изображения</div></a>
  <a href="#"><img src="/images/12.jpg" alt="image12"><div>Название изображения</div></a>
  </div>
  <!--nav>  
  <span class="dg-prev"><</span>
  <span class="dg-next">></span>
  </nav-->
  </section>


Третий вариант

Код
<section id="dg-container" class="dg-container">
  <div class="dg-wrapper">
  <a href="#"><img src="/images/5.jpg" alt="image05"><div>Название изображения</div></a>
  <a href="#"><img src="/images/6.jpg" alt="image06"><div>Название изображения</div></a>
  <a href="#"><img src="/images/7.jpg" alt="image07"><div>Название изображения</div></a>
  </div>
  <nav>  
  <span class="dg-prev"><</span>
  <span class="dg-next">></span>
  </nav>
  </section>

04.10.2015 Загрузок: 4 Просмотров: 597 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
Brung
Brung 05.10.2015 00:101
0
Как и первый, всегда или основном предоставляют демо, как смотреться будет, думаю его не сложно сделать. Как работает, автоматически или самому листать нужно.
Сопрано
Сопрано 05.10.2015 00:202
0
Не понимаю вообще 3D, посмотришь все как нужно ине какого эффекта, что по мне, рабочий и то хорошо, а как здесь узнать, поставили ссылки и код. Работы не початый край, и только время можно потерять, если он работать не будет.
Kosten
Kosten 05.10.2015 00:233
0
И здесь та же песня, но написал, кому нужно скину, хотя сейчас пропишу, чтоб не было лишних вопросов, рабочий или не рабочий, кликните, пока домен живой и посмотрите.
Сопрано
Сопрано 05.10.2015 00:284
0
Эта не песня а простая просьба, узнать есть или нет на его демонстрация.
Kosten
Kosten 05.10.2015 00:305
+1
Дико извиняюсь, просто домен нужно будет продлевать, не хочется, чтоб были битые ссылки на просмотр. Так вот, смотрим DEMO на этот слайдер.
Сопрано
Сопрано 05.10.2015 00:346
0
Trantel, да не чего бывает со всеми, просто стали все требовательными, а вот за просмотр спасибо не один такой скажу.
Brung
Brung 05.10.2015 00:367
0
Trantel, как вы знаете, всегда на такой материал предоставляют просмотр. Kosten, спасибо, но наверное нужно его поставить в материал.
DALMATIN
DALMATIN 05.10.2015 02:4811
0
Так ты прописывай ссылки на демо со стандартного домена и он не куда не пропадёт!
AnTron
AnTron 05.10.2015 00:518
0
Вы говорите, что не понимаете 3D то здесь можно сказать, что это ваши проблемы, но в этом случай, лучше сказать. Вы не сравнивайте кино и сам скрипт, это 2 очень большие разницы, и здесь по центру картинка стоит в нормальном положение, чтоб ее видели, а вот по сторонам, как по правую или левую, сделано уже так называемом эффекте, можно сравнить с любым похожим скриптом.
Brung
Brung 05.10.2015 01:049
0
Немного теней и изгиба по сторонам и вам вам эффект 3D и не кто тут даже не упомянул в сравнение с просмотром фильма.
Kosten
Kosten 05.10.2015 01:1210
0
Вы посмотрели саму демонстрацию, и там можно поставить на ручной режим, это когда вы сами будете перебрать что вам нужно. И на автоматически, где через какое то время автоматом будет показан другой материал. Думаю это очень хорошо, каждому будет свое.
avatar