» »

Слайдер для главной страницы сайта uCoz


Слайдер для главной страницы сайта uCoz

Когда видишь ресурс и у него установлен слайдер, то смотрится совершенно по другому и теперь вы можете поставить Слайдер для главной страницы сайта uCoz где выставите свои изображение и он будет работать. А точнее показывать ту информацию, которую вам нужно и вы сами ее настроили. Все сделать можно на главной странице и здесь идет под светлые стили и что означает, сам портал, должен соответствовать такому же оттенку. Хотел сделать ещё одну подборку слайдеров для ваших сайтов, да вот наткнулся на один слайдер и захотелось его отдельно разместить для вас и ваших сайтов. Слайдер смотрится аккуратно и немного строго. При наводки мыши на слайдер будут появляться кнопки переключения изображения и старт + пуск слайд-шоу.

Думаю не плохая получится реализация слайдера на сайт и впишется под любой дизайн сайта .

Установка слайдера:

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

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

Код
<div id="wrapper">  
  <div id="inner">  
  <div id="carousel">  
  <img src="img/rally1.jpg" alt="rally1" width="600" height="400" border="0" />  
  <img src="img/rally2.jpg" alt="rally2" width="600" height="400" border="0" />  
  <img src="img/rally3.jpg" alt="rally3" width="600" height="400" border="0" />  
  <img src="img/rally4.jpg" alt="rally4" width="600" height="400" border="0" />  
  </div>  
  <div id="navi">  
  <div id="timer"></div>  
  <a id="prev" href="#"></a>  
  <a id="play" href="#"></a>  
  <a id="next" href="#"></a>  
  </div>  
  </div>  
  </div>


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

Код
#wrapper {  
  border: 1px solid #ccc;  
  background-color: #fff;  
  width: 600px;  
  height: 400px;  
  padding: 20px;  
   
   
  box-shadow: 0 5px 10px #ccc;  
  }  
  #inner {  
  position: relative;  
  width: 600px;  
  height: 400px;  
  overflow: hidden;  
  }  
  #carousel img {  
  display: block;  
  float: left;  
  }  

  #navi {  
  background-color: #333;  
  background-color: rgba(30, 30, 30, 0.8);  
  border-top: 1px solid #000;  
  width: 600px;  
  height: 70px;  
  position: absolute;  
  bottom: -60px;  
  left: 0;  
  z-index: 10;  
  }  
  #timer {  
  background-color: #222;  
  background-color: rgba(20, 20, 20, 0.8);  
  width: 0;  
  height: 70px;  
  position: absolute;  
  z-index: 20;  
  top: 0;  
  left: 0;  
  }  
  #prev, #next, #play {  
  display: block;  
  position: absolute;  
  z-index: 30;  
  }  
  #prev, #next {  
  width: 47px;  
  height: 47px;  
  top: 13px;  
  }  
  #play {  
  width: 53px;  
  height: 53px;  
  top: 10px;  
  background: url(/img/ui/pause.png) 0 0 no-repeat transparent;  
  left: 50%;  
  margin-left: -27px;  
  }  
  #play.paused {  
  background: url(/img/ui/play.png) 0 0 no-repeat transparent;  
  }  
  #prev {  
  background: url(/img/ui/prev.png) 0 0 no-repeat transparent;  
  left: 220px;  
  }  
  #next {  
  background: url(/img/ui/next.png) 0 0 no-repeat transparent;  
  right: 220px;  
  }  
   
  #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="/jsjquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  $(function() {  
  $('#carousel').carouFredSel({  
  prev: '#prev',  
  next: '#next',  
  auto: {  
  button: '#play',  
  progress: '#timer',  
  pauseOnEvent: 'resume'  
  },  
  scroll: {  
  fx: 'fade'  
  }  
  });  
  $('#wrapper').hover(function() {  
  $('#navi').stop().animate({  
  bottom: 0  
  });  
  }, function() {  
  $('#navi').stop().animate({  
  bottom: -60  
  });  
  });  
   
   
  });  
  </script>


Вот и всё слайдер установлен и вы можете с помощью стилей настраивать его под свои нужды!

28.09.2015 Загрузок: 5 Просмотров: 1112 Комментарий: (7)

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

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

Комментарий: 7
FeStemBer
FeStemBer 28.09.2015 05:011
0
Так не плохо смотреться будет, но как подумаешь, что нужно менять картинки и установка не для меня, а так можно поставить и вид сайта преобразиться.
Kosten
Kosten 28.09.2015 05:052
0
Установка прописана, я то, что менять изображение, но это несколько минут потратить и новые стоят. И вообще очень редко идет замена, зато ваши темы основные можно вывести.
workman
workman 28.09.2015 14:564
0
Так можно еще гет запросом вывести фото из фотоальбома или например с любого каталога материалов, скриптом
kos
kos 28.09.2015 14:353
0
не удобно, даже нет кнопки
AnTron
AnTron 29.09.2015 04:445
0
Такой слайдер можно вверх сайта установить, но он светлый, что очень редко, думаю сделан для того, чтоб картинки рассматривать, и хорошо и удобно, все в одном месте, хотя его создавали не для этого.
avatar
Ariec 25.03.2016 15:386
0
Как сделать чтобы меняли картинки не так часто?
Kosten
Kosten 22.07.2016 00:537
0
Ariec, не знаю, не когда слайдерами не работал, просто мне отдали сайт, и там из материала, только слайдеры основном было, вот и запулил на этот сайт, вот потому и демонстрация не работает, а так они все полностью рабочие.
avatar