» »

Рабочий jQuery слайдер для сайта uCoz

Рабочий jQuery слайдер для сайта uCoz

Если вы ищете что то интересное в плане показа изображение, то Рабочий jQuery слайдер для сайтов uCoz то что вам нужно, так как по своем характеристикам, он может подойти под любую тематики. К примеру можно создать страницу под него и назвать "Отдых в горах" и разместить в него все свои снимки. Это первое, будет очень оригинально и место не займет, так же можно заметить, что у него есть тени а значит изначально идет под светлую гамму фона. Он работает на автомате, а точнее сам может передвигать, тут только нужно задать скорость. И вы сами можете вытащить то скрин, который вам нужен, а это просто клик навести и в низу появиться небольшие отсеки, для выбора.

Установка:

Как всегда вам нужно скачать с начало архив и загрузить папку img и js в файловый менеджер вашего сайта.

Затем после этого установите код слайдера в нужное место на сайте где по вашему он должен стоять у вас .

Код
<div id="wrapper">  
  <div id="carousel">  
  <img src="img/large/carnaval1.jpg" alt="c1" width="600" height="400" />  
  <img src="img/large/carnaval2.jpg" alt="c2" width="600" height="400" />  
  <img src="img/large/carnaval3.jpg" alt="c3" width="600" height="400" />  
  <img src="img/large/carnaval4.jpg" alt="c4" width="600" height="400" />  
  <img src="img/large/carnaval5.jpg" alt="c5" width="600" height="400" />  
  <img src="img/large/carnaval6.jpg" alt="c6" width="600" height="400" />  
  <img src="img/large/carnaval7.jpg" alt="c7" width="600" height="400" />  
  <img src="img/large/carnaval8.jpg" alt="c8" width="600" height="400" />  
  <img src="img/large/carnaval9.jpg" alt="c9" width="600" height="400" />  
  <img src="img/large/carnaval10.jpg" alt="c10" width="600" height="400" />  
  </div>  
  <div id="thumbnails">  
  <img src="img/small/carnaval1.jpg" alt="c1" width="100" height="100" />  
  <img src="img/small/carnaval2.jpg" alt="c2" width="100" height="100" />  
  <img src="img/small/carnaval3.jpg" alt="c3" width="100" height="100" />  
  <img src="img/small/carnaval4.jpg" alt="c4" width="100" height="100" />  
  <img src="img/small/carnaval5.jpg" alt="c5" width="100" height="100" />  
  <img src="img/small/carnaval6.jpg" alt="c6" width="100" height="100" />  
  <img src="img/small/carnaval7.jpg" alt="c7" width="100" height="100" />  
  <img src="img/small/carnaval8.jpg" alt="c8" width="100" height="100" />  
  <img src="img/small/carnaval9.jpg" alt="c9" width="100" height="100" />  
  <img src="img/small/carnaval10.jpg" alt="c10" width="100" height="100" />  
  </div>  
  </div>


Вторым действием я предлагаю прописать стили к слайдеру и для этого вам нужно в ваши стили сайта добавить стили приведённые чуть ниже.

Код
#wrapper {  
  width: 600px;  
  height: 400px;  
  overflow: hidden;  
  position: relative;  
  box-shadow: 0 20px 50px #333;  
  }  
  #carousel {  
  width: 600px;  
  height: 400px;  
  overflow: hidden;  
  position: absolute;  
  top: 0;  
  left: 0;  
  }  
  #carousel img {  
  display: block;  
  float: left;  
  }  
  #thumbnails {  
  width: 600px;  
  height: 120px;  
  overflow: hidden;  
  position: absolute;  
  top: 375px;  
  left: 0;  
  z-index: 2;  
  }  
  #thumbnails img {  
  display: block;  
  float: left;  
  margin: 10px;  
  width: 100px;  
  height: 100px;  
   
  box-shadow: 0 0 10px #000;  
  }  
  #thumbnails img:hover {  
  width: 110px;  
  height: 110px;  
  margin: 5px;  
  }  
   
  #donate-spacer {  
  height: 100%;  
  }  
  #donate {  
  border-top: 1px solid #999;  
  width: 750px;  
  padding: 50px 75px;  
  margin: 0 auto;  
  overflow: hidden;  
  }  
  #donate p, #donate form {  
  margin: 0;  
  float: left;  
  }  
  #donate p {  
  width: 650px;  
  }  
  #donate form {  
  width: 100px;  
  }


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

Код
<script src="/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  $(function() {  
  $('#wrapper').hover(  
  function() {  
  $('#carousel').trigger( 'pause' );  
  $('#thumbnails').parent().animate({  
  top: 280  
  });  
  }, function() {  
   
  $('#carousel').trigger( 'play' );  
  $('#thumbnails').parent().animate({  
  top: 375  
  });  
  }  
  );  

  $('#carousel').carouFredSel({  
  scroll: {  
  fx: 'crossfade',  
  onBefore: function( data ) {  
  $('#thumbnails').trigger( 'slideTo', [ $('#thumbnails img[alt='+ data.items.visible.attr( 'alt' ) +']'), -2 ] );  
  }  
  }  
  });  

  $('#thumbnails').carouFredSel({  
  auto: false,  
  items: {  
  start: -2  
  }  
  });  

  $('#thumbnails img').click(function() {  
  $('#carousel').trigger( 'slideTo', [ $('#carousel img[alt='+ $(this).attr( 'alt' ) +']') ] );  

  }).css( 'cursor', 'pointer' );  
  });  
  </script>


Слайдер установлен и думаю вам он пригодится !

На этом всё с вами был Дмитрий и ждите новых скриптов для ваших сайтов uCoz.

2015-10-23 Загрузок: 12 Просмотров: 1532 Комментарий: (14)

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

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

Комментарий: 14
Сопрано
Сопрано 2015-10-23 20:411
0
Слайдер красивый и тени вообще с таким дизайном нравиться. Вот только мало кому он нужен, всем нужны новые скрипты или дизайн
ZruBkul
ZruBkul 2015-10-23 20:442
0
Trantel, давайте будем говорить только за себя, так как не владеете информацией за всех.
Простой и удобный слайдер, который найдет свое место.
Сопрано
Сопрано 2015-10-23 20:463
+1
ZruBkul, что не прав в том, что такой материал нужен только малому проценту. Да, вы скажите а они что не люди, но просто очень много слайдеров уже.
AnTron
AnTron 2015-10-23 20:514
0
Trantel, вам не кажется, что вы немного попутали, свой сайт с чужим. Вы высказали свое мнение, но не вам здесь указывать, что нужно, что не нужно, так как уже есть похожее. Какое то потребительское отношение, здесь стараются заливают как понимаю рабочий материал, если смотреть по DEMO, вам это не нравиться, думаю если весь мусор с интернета будет здесь, вас это устроит.
Сопрано
Сопрано 2015-10-23 20:556
0
А что вы так, то вам не чего не нравилось, вам говорили, а здесь вдруг понравилось или кого то оскорбил, что то не заметил. Просто высказал свое мнение, что слайдеров на сайте очень много и все, это так считаю.
AnTron
AnTron 2015-10-23 21:007
0
Trantel, вы найдите хоть одно приложение, где говорил, да хватит, нужно что то новое. Писал по тому что было, но не когда не вмешивался, что нужно заливать а что нет. Это слайдер и для вам открою Америку, он считается элементом дизайна самого сайта, а также идет под тематику. Если у вас он не стоит на сайте, не означает, что вы такой и вам не нужно и значит здесь не нужно размещать. Много бы написал, но это уже не по теме.
Сопрано
Сопрано 2015-10-23 21:039
0
AnTron, во общем понял, что немного занесло.
AnTron
AnTron 2015-10-23 21:0610
0
Лучше вовремя понять, а не просто отписываться и тем другим давать понять, что вы просто уже включили зданию.
ZruBkul
ZruBkul 2015-10-23 21:0811
0
Бывает, со всеми почти такое, но не каждый может потом признаться, что был не прав.
ZruBkul
ZruBkul 2015-10-23 20:535
0
Про страницу отдельную не чего не могу сказать, так как его основном делают на главную, но по размерам он может подойти на какое то портфолио или студию.
Kvint
Kvint 2015-10-23 21:028
0
Вот тебе на, нормально, кому не нравиться, их проблемы, интернет большой, всем места хватит, главное чтоб приняли как человека и вести себя по людски а не указывать, что нужно, что не нужно.
Kosten
Kosten 2015-10-23 21:1012
0
Почему вы считаете, что на отбельную страницу не пойдет, если грамотно подойти ее можно еже и украсить, а не просто на светлый фон поставить слайдер.
trem200
trem200 2015-11-15 19:0113
0
А в странице материала и комментариев к нему, можно добавить данный слайдер?
Kosten
Kosten 2015-11-15 19:2214
+1
trem200, думаю все можно, но не советую, зачем страницу грузить, когда там должен основной материал находиться.
avatar