» »

Стильный слайдер 3D карусель для сайта uCoz


Стильный слайдер 3D карусель для сайта uCoz

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

И так давайте я вам расскажу и покажу как установить и после установки у вас получится как да демонстрационной странице.

Установка: Интересная 3D-карусель для сайтов uCoz

И так в первую очередь вам нужно скачать архив и загрузить в файловый менеджер три папки css, image и js

После того как вы скачали архив и загрузили папки на ваш сайт вам следует установить код слайдера в то место на сайте где у вас он должен стоять, и для этого скопируйте код который я указал ниже и вставьте его.

Код
<div data-carousel-3d>
  <img src="./image/1.jpg" />
  <img src="./image/2.jpg" selected />
  <div style="min-width: 320px; min-height: 213px; max-width: 320px; max-height: 213px">
  <p style="background-color:black; color:white; margin:20px; padding:20px;">A simple html child</p>
  <div style="background-color:gray; color:white;">Html contents also works ok!!!</div>
  <div>The quick brown fox jumps over the lazy dog</div>
  <p>
  Make the fox
  <button type="button" onclick="alert('Jump!!');">jump!!</button>
  </p>
  </div>
  <img src="./image/3.jpg" />
  <img src="./image/4.jpg" />
  <img src="./image/5.jpg" />
  <img src="./image/6.jpg" />
  </div>

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

Код
<link rel="stylesheet" href="/css/style.css">
  <script src="/js/jquery.waitforimages.js"></script>
  <script src="/js/modernizr.js"></script>
  <script src="/js/jquery.carousel-3d.js"></script>

На этом установка завершена и слайдер у вас должен работать!

Примечание

Изменение картинок - Для того что бы изменять картинки вам нужно проследовать в папку image и заменить те что есть картинки на ваши , только не забывайте о том что имя картинок должны быть как в оригинале а так же размер картинок.

Стили - Стили можно настраивать в папке css там есть текстовый документ style.css вот там и настраивайте под свои нужды дизайн самой 3D-карусели.

На этом у меня всё а ниже вы можете скачать архив с материалом и просмотреть демонстрацию 3D-карусели. 
09.10.2015 Загрузок: 12 Просмотров: 1409 Комментарий: (25)

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

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

Комментарий: 25
Сопрано
Сопрано 09.10.2015 01:181
0
Здесь не поспоришь, антураж и свет и сам взгляд, отлично подобран.
Kosten
Kosten 09.10.2015 01:202
0
Trantel, вы видать что то про себя громко сказали.
Сопрано
Сопрано 09.10.2015 01:223
0
Да, что то засмотрелся.
AnTron
AnTron 09.10.2015 02:274
0
Интересно куда вы ставить будете, не спорю, красиво все смотрится.
Kosten
Kosten 09.10.2015 02:315
0
AnTron, понимаю свобода слова, но зачем так подхалимно говорить. Если вы в курсе, то можете объясните людям, что по чем, а не говорить вопросом.
AnTron
AnTron 09.10.2015 02:336
0
Kosten, здесь хоть есть один комментарий, чтоб кого то оскорбил. Просто поинтересовался, куда будут ставить, но все же интересно.
Kosten
Kosten 09.10.2015 02:377
0
Если было бы оскорбление, мы сейчас бы не разговаривали. Думаю вы не глупый человек и сами понимаете, что написали, если нужно могу перевести. Вам интересно, куда будут устанавливать этот скрипт. Если бы не было слово "интересно" то посыл вопроса, совершенно другой смысл нес. Можно ответить, на сайт, но не на компьютер же.
Kosten
Kosten 09.10.2015 02:398
0
Не нужно выделяться своими знаниями, которые не кто не видел в деле, но кроме самого красноречие. Думаю понятно и надеюсь без всяких огорчений.
AnTron
AnTron 09.10.2015 02:599
0
Kosten, вообще констатирую свой факт, который не кому не навязываю. Да, не спорю, как то немного не так отписал с небольшой ноткой подхалима, но просто такой материал. И вообще мне нравиться комментировать необычные скрипты.
Kosten
Kosten 09.10.2015 03:0110
0
Здесь не чего добавить не могу, просто уважаю людей, которые осазнают свои ошибки. Значит человек не зашкурился и может сказать, что где то он был не прав.
AnTron
AnTron 09.10.2015 03:0311
0
Непонятное слово "зашкурился" и что может оно обозночать? И где вы их только берете, в толковом словаре их нет.
Kosten
Kosten 09.10.2015 03:0612
0
Но скажем это эхо прошлой службы, там только по фени ботали "Разговаривали на своем языке" а мне по службе нужно было все знать, чтоб речь вести, хотя некоторые нормальна разговаривают, пару метров отойдут и пошел жаргон.
AnTron
AnTron 09.10.2015 03:0913
0
Но понял где вы набрались, вы там находились по закону?
Kosten
Kosten 09.10.2015 03:1014
0
AnTron, вы читаете между строк а не все сообщение, нет там находился по закону и подписанному контракту.
Kosten
Kosten 09.10.2015 03:1115
0
Думаю здесь комментария за скрипт должны а не за жизнь.
kos
kos 09.10.2015 21:3616
0
Очень классный слайдер на сайте
avatar
bkmlfhbr 14.10.2015 12:3517
0
Делал все по инструкции, не работает слайдер, поменял картинки на свои, несколько штук добавил сверху, в коде страницы прописал добавленные изображения, но все равно не работает. Подскажите, в чем может быть проблема? Мб не стоило добавлять картинки больше чем изначально предполагалось?
Kosten
Kosten 14.10.2015 12:4718
0
bkmlfhbr, модератор придет, он его адаптировал и ставил на DEMO и думаю все разъяснит.
Dimstrik
Dimstrik 14.10.2015 18:3119
-2
Да картинки нужно по размеру ставить, ну и ссылку нужно указывать на проблему как вот видеть её что бы помочь?
Dimstrik
Dimstrik 14.10.2015 18:4720
+1
Вообще для начала нужно устанавливать всегда как есть а потом вносить изменения по шагово !
avatar
bkmlfhbr 14.10.2015 20:0521
0
Все изменения удалил. Поставил все, как в первоначальном варианте, изображения не менял. В итоге то же самое. Вот адрес странички My WebPage
Dimstrik
Dimstrik 15.10.2015 02:0022
0
Я вижу что у вас всё работает, а выглядит он так потому что он адаптивный и подстраивается под размер мониторов и области в которую ставят.

В вашем варианте всё отлично, но вы установили его в контейнер где указана ширина вот он под неё и подстраивается.

Код
#content {
  float: left;
  width: 675px;
}


Код который я указал через него и настраивайте!
avatar
bkmlfhbr 27.10.2015 13:4923
0
Доброго времени суток! По ряду причин не смог сразу воспользоваться вашими советами и настроить. Только сейчас дошли руки))) Менял параметры как в большую так и в меньшую сторону, изменений не произошло. Подскажите пожалуйста, каким еще образом можно настроить этот слайдер.
Спасибо!
Dimstrik
Dimstrik 27.10.2015 16:0124
0
По слайдеру у вас всё ровно вам нужно работать со своим дизайном !
Я щас посмотрю примерно но без доступа в панель я многое не смогу помочь!
Dimstrik
Dimstrik 27.10.2015 16:0425
0
тут нужно саму страницу под настроить и немного изменить!
avatar