» »

Рабочий 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.

23.10.2015 Загрузок: 9 Просмотров: 593 Комментарий: (14)

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

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

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