Стильный слайдер 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-карусели. На этом у меня всё а ниже вы можете скачать архив с материалом. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 32 | |
|
| |
| 1 2 » | |
