Слайдер с имитацией 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> | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 11 | |
|
| |
