Сегодня 18.01.2017, 08:51

Форум сообщества

Чат
Правила
Участники
Поиск
Последние сообщения
Подписки
Страница 1 из 11
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » Flexslider для uCoz (слайдер)
Flexslider для uCoz
СообщениеПредставляю вашему вниманию новый слайдер для нашей системы.
Удобный, не большой и информативный flexslider. Вот временное ДЕМО
Установка следующая:
Это вставляйте либо в шаблон, где будет сам слайдер или в ваши стили на сайте, но тогда без <style> и </style>
Код
<style>
#slider-b {width:702px;height:392px;padding:4px;background:url(/img/thmb.png);margin:0 0 30px 0;position:relative;}
#slider-b.no-mar {margin:0 0 20px 0;}
.flexslider {position:relative;width:702px;max-width:702px;height:392px;margin:0;padding:0;zoom:1;}
.flexslider .slides {zoom:1;margin:0;padding:0;}
.flexslider .slides > li {display:none;position:relative;overflow:hidden;list-style-type:none;background:none;-webkit-backface-visibility:hidden;margin:0;padding:0;height:392px;}
.slides:after {content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides {display:block;}
* html .slides {height:1%;}
.no-js .slides > li:first-child {display:block;}
.flexslider .slides img {max-width:710px;min-height:400px;position:relative;top:0;left:-5px;}
.caption {width:662px;background:url(/img/cap.png);text-shadow:1px 1px 0 rgba(0,0,0,.2);color:#fff;position:absolute;z-index:10;left:0;bottom:0;padding:20px;}
.slide-ttl {line-height:20px;font-size:18px;margin-bottom:15px;color:#fff;}
.slide-ttl a {text-decoration:none;}
.slide-txt {font-size:11px;line-height:145%;max-height:64px;overflow:hidden;}
.slide-txt * {padding:0;margin:0;}
.slide-txt img,.slide-txt br {display:none;}
.flex-direction-nav, .flex-direction-nav li {padding:0;margin:0;list-style:none;}
.flex-direction-nav a {position:absolute;top:160px;display:block;width:40px;height:40px;background-position:0 0;white-space:nowrap;text-indent:100%;overflow:hidden;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-ms-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;}
.flex-direction-nav a.flex-prev {left:0;}
.flex-direction-nav a.flex-next {right:0;background-position:-40px 0;}
.fnav-hov a.flex-prev {opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
.fnav-hov a.flex-next {opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
.flex-direction-nav a:hover {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);background-position:0 -40px;}
.flex-direction-nav a.flex-next:hover {background-position:-40px -40px;}
#slider-b div.single-img {position:relative;overflow:hidden;list-style-type:none;background:none;-webkit-backface-visibility:hidden;margin:0;padding:0;height:392px;}
#slider-b div.single-img img {max-width:710px;min-height:400px;position:relative;top:0;left:-5px;display:block;}
#carousel {position:absolute;left:4px;bottom:4px;width:692px;padding:7px 5px 5px 5px;background:url(/img/cap.png);height:100px;}
#carousel li {margin-right:5px;height:100px;overflow:hidden;}
#carousel img {display:block;opacity:.4;-moz-opacity:.4;filter:alpha(opacity=40);width:100%;min-height:100px;cursor:pointer;left:0;}
#carousel img:hover {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
#carousel .flex-active-slide img {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);cursor:default;}
#carousel .flex-direction-nav li {margin:0;height:auto;}
#carousel .flex-direction-nav a {top:37px;}
#carousel .fnav-hov .flex-disabled {opacity:0;-moz-opacity:0;filter:alpha(opacity=0);}
</style>

Далее
Это код самого слайдера:
Код
<div id="slider-b" class="no-mar">

<div id="slider" class="flexslider no-js">

<div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

<li class="slide flex-active-slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" alt="Zigfrak" class="fpost-img"></a></li>


<li class="slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" alt="Zigfrak"></a></li>


<li class="slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" alt="Zigfrak"></a></li>
</ul></div></div>

<div id="carousel" class="flexslider">

<div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

<li class="flex-active-slide" style="width: 228px; float: left; display: block;"><img src="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" alt="Zigfrak"></li>


<li style="width: 228px; float: left; display: block;" class=""><img src="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" alt="Zigfrak"></li>


<li style="width: 228px; float: left; display: block;" class=""><img src="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" alt="Zigfrak"></li>








</ul></div><script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
directionNav: false,
itemWidth: 228,
itemMargin: 4,
asNavFor: '#slider'
});
$("#slider.flexslider").flexslider({
animation: "slide",
animationLoop: false,
directionNav: false,
slideshow: false,
sync: "#carousel"
});
});</script></div>

И последнее
Это прописать перед </body>
Код
<script type="text/javascript" src="http://16-puzzle.ucoz.com/js/ui.js"></script>

P.S. Желательно последний скрипт залить себе в ФМ что бы он не затерся.
Вот и все. Пользуйтесь на здоровье!

Автор - TicTac
Дата добавления - 09.07.2016 в 19:02
Дата: Суббота, 09.07.2016, 19:02 | Сообщение # 1
OFF
Администратор
239Сообщения:
Представляю вашему вниманию новый слайдер для нашей системы.
Удобный, не большой и информативный flexslider. Вот временное ДЕМО
Установка следующая:
Это вставляйте либо в шаблон, где будет сам слайдер или в ваши стили на сайте, но тогда без <style> и </style>
Код
<style>
#slider-b {width:702px;height:392px;padding:4px;background:url(/img/thmb.png);margin:0 0 30px 0;position:relative;}
#slider-b.no-mar {margin:0 0 20px 0;}
.flexslider {position:relative;width:702px;max-width:702px;height:392px;margin:0;padding:0;zoom:1;}
.flexslider .slides {zoom:1;margin:0;padding:0;}
.flexslider .slides > li {display:none;position:relative;overflow:hidden;list-style-type:none;background:none;-webkit-backface-visibility:hidden;margin:0;padding:0;height:392px;}
.slides:after {content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides {display:block;}
* html .slides {height:1%;}
.no-js .slides > li:first-child {display:block;}
.flexslider .slides img {max-width:710px;min-height:400px;position:relative;top:0;left:-5px;}
.caption {width:662px;background:url(/img/cap.png);text-shadow:1px 1px 0 rgba(0,0,0,.2);color:#fff;position:absolute;z-index:10;left:0;bottom:0;padding:20px;}
.slide-ttl {line-height:20px;font-size:18px;margin-bottom:15px;color:#fff;}
.slide-ttl a {text-decoration:none;}
.slide-txt {font-size:11px;line-height:145%;max-height:64px;overflow:hidden;}
.slide-txt * {padding:0;margin:0;}
.slide-txt img,.slide-txt br {display:none;}
.flex-direction-nav, .flex-direction-nav li {padding:0;margin:0;list-style:none;}
.flex-direction-nav a {position:absolute;top:160px;display:block;width:40px;height:40px;background-position:0 0;white-space:nowrap;text-indent:100%;overflow:hidden;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-ms-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;}
.flex-direction-nav a.flex-prev {left:0;}
.flex-direction-nav a.flex-next {right:0;background-position:-40px 0;}
.fnav-hov a.flex-prev {opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
.fnav-hov a.flex-next {opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
.flex-direction-nav a:hover {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);background-position:0 -40px;}
.flex-direction-nav a.flex-next:hover {background-position:-40px -40px;}
#slider-b div.single-img {position:relative;overflow:hidden;list-style-type:none;background:none;-webkit-backface-visibility:hidden;margin:0;padding:0;height:392px;}
#slider-b div.single-img img {max-width:710px;min-height:400px;position:relative;top:0;left:-5px;display:block;}
#carousel {position:absolute;left:4px;bottom:4px;width:692px;padding:7px 5px 5px 5px;background:url(/img/cap.png);height:100px;}
#carousel li {margin-right:5px;height:100px;overflow:hidden;}
#carousel img {display:block;opacity:.4;-moz-opacity:.4;filter:alpha(opacity=40);width:100%;min-height:100px;cursor:pointer;left:0;}
#carousel img:hover {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
#carousel .flex-active-slide img {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);cursor:default;}
#carousel .flex-direction-nav li {margin:0;height:auto;}
#carousel .flex-direction-nav a {top:37px;}
#carousel .fnav-hov .flex-disabled {opacity:0;-moz-opacity:0;filter:alpha(opacity=0);}
</style>

Далее
Это код самого слайдера:
Код
<div id="slider-b" class="no-mar">

<div id="slider" class="flexslider no-js">

<div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

<li class="slide flex-active-slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" alt="Zigfrak" class="fpost-img"></a></li>


<li class="slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" alt="Zigfrak"></a></li>


<li class="slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" alt="Zigfrak"></a></li>
</ul></div></div>

<div id="carousel" class="flexslider">

<div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

<li class="flex-active-slide" style="width: 228px; float: left; display: block;"><img src="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" alt="Zigfrak"></li>


<li style="width: 228px; float: left; display: block;" class=""><img src="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" alt="Zigfrak"></li>


<li style="width: 228px; float: left; display: block;" class=""><img src="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" alt="Zigfrak"></li>








</ul></div><script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
directionNav: false,
itemWidth: 228,
itemMargin: 4,
asNavFor: '#slider'
});
$("#slider.flexslider").flexslider({
animation: "slide",
animationLoop: false,
directionNav: false,
slideshow: false,
sync: "#carousel"
});
});</script></div>

И последнее
Это прописать перед </body>
Код
<script type="text/javascript" src="http://16-puzzle.ucoz.com/js/ui.js"></script>

P.S. Желательно последний скрипт залить себе в ФМ что бы он не затерся.
Вот и все. Пользуйтесь на здоровье!

СообщениеСпасибо огромное, то что нужно.

Автор - Десерт
Дата добавления - 09.07.2016 в 19:21
Дата: Суббота, 09.07.2016, 19:21 | Сообщение # 2
OFF
Проверенный
24Сообщения:
Спасибо огромное, то что нужно.

СообщениеДесерт, обращайся, рад помочь smile

Автор - TicTac
Дата добавления - 09.07.2016 в 19:58
Дата: Суббота, 09.07.2016, 19:58 | Сообщение # 3
OFF
Администратор
239Сообщения:
Десерт, обращайся, рад помочь smile

Сообщение
Код
А как можно добавить свои изображения, то есть добавляю я файл, просто данный слайдер поставил в каталог файлов, и добавим изображения 1 и 2, я хочу, что бы они отображались на данном слайдере.

Но сейчас я вошёл в тупик, я попросту не знаю как это всё правильно прописать. Помогите пожалуйста :)


Уже всё сам сделал

Автор - Десерт
Дата добавления - 09.07.2016 в 19:58
Дата: Суббота, 09.07.2016, 19:58 | Сообщение # 4
OFF
Проверенный
24Сообщения:
Код
А как можно добавить свои изображения, то есть добавляю я файл, просто данный слайдер поставил в каталог файлов, и добавим изображения 1 и 2, я хочу, что бы они отображались на данном слайдере.

Но сейчас я вошёл в тупик, я попросту не знаю как это всё правильно прописать. Помогите пожалуйста :)


Уже всё сам сделал

Сообщение отредактировал Десерт - Суббота, 09.07.2016, 20:01
Сообщение
Цитата Десерт ()
Уже всё сам сделал

Главное не впадать в панику и сами разберетесь biggrin

Автор - TicTac
Дата добавления - 10.07.2016 в 00:01
Дата: Воскресенье, 10.07.2016, 00:01 | Сообщение # 5
OFF
Администратор
239Сообщения:
Цитата Десерт ()
Уже всё сам сделал

Главное не впадать в панику и сами разберетесь biggrin

Сообщение
Цитата TicTac ()
Главное не впадать в панику и сами разберетесь


У меня так всегда бывает. Сначала спрашиваю, а потом через какое-то время сам разбираюсь с вопросом biggrin

Автор - Десерт
Дата добавления - 10.07.2016 в 00:32
Дата: Воскресенье, 10.07.2016, 00:32 | Сообщение # 6
OFF
Проверенный
24Сообщения:
Цитата TicTac ()
Главное не впадать в панику и сами разберетесь


У меня так всегда бывает. Сначала спрашиваю, а потом через какое-то время сам разбираюсь с вопросом biggrin

СообщениеУ меня возникла проблема из-за js кода, а именно после него в верхней части сайта меняется цвет меню, и увеличивается логотип сайта, во много раз. Как это можно исправить?

Для полного понимания кидаю сюда скриы, которые наглядно показывают как всё смотрелось до и после добавления js

ДО

После


Я просто мало чего понимаю в js


А как можно добавить переключатели слайдеров? А то смотрев в демо, там есть переключатели, а у себя я их не как не могу найти, да и сделать не знаю как.

Автор - Десерт
Дата добавления - 10.07.2016 в 15:22
Дата: Воскресенье, 10.07.2016, 15:22 | Сообщение # 7
OFF
Проверенный
24Сообщения:
У меня возникла проблема из-за js кода, а именно после него в верхней части сайта меняется цвет меню, и увеличивается логотип сайта, во много раз. Как это можно исправить?

Для полного понимания кидаю сюда скриы, которые наглядно показывают как всё смотрелось до и после добавления js

ДО

После


Я просто мало чего понимаю в js


А как можно добавить переключатели слайдеров? А то смотрев в демо, там есть переключатели, а у себя я их не как не могу найти, да и сделать не знаю как.

Прикрепления: 6258492.png(8Kb) · 0075425.png(10Kb)
Сообщение отредактировал Десерт - Воскресенье, 10.07.2016, 16:50
СообщениеДесерт, скинь в ЛС адрес сайта

Автор - TicTac
Дата добавления - 10.07.2016 в 16:49
Дата: Воскресенье, 10.07.2016, 16:49 | Сообщение # 8
OFF
Администратор
239Сообщения:
Десерт, скинь в ЛС адрес сайта

Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » Flexslider для uCoz (слайдер)
Страница 1 из 11
Поиск:
Загрузка...
  

Информация

Копирование/рип дизайна строго запрещены и приследуются по закону в соответствии со статьей 1270 ГК Российской Федерации
Хостинг от uCoz