» »

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


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

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

Слайдер я предоставлю в двух вариантах!
Первый вариант без авто прокрутки а второй вариант с авто прокруткой слайдера. Установка не сложная и в принципе мы установим только один так как оба варианта одинаковые и нам нужно будет только немного изменить скрипт что бы слайдер смог сам перелистывать изображения и текст .

Установка


В первую очередь вам нужно скачать архив и загрузить папку images,js и css в файловый менеджер вашего сайта а затем приступить к установки слайдера.
Для начало вам нужно выбрать то место на сайте где данный слайдер будет стоять (обычно это шапка сайта) и установить ниже указанный код .

Код

  <div id="da-slider" class="da-slider">
  <div class="da-slide">
  <h2>Warm welcome</h2>
  <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
  <a href="#" class="da-link">Read more</a>
  <div class="da-img"><img src="images/1.png" alt="image01" /></div>
  </div>
  <div class="da-slide">
  <h2>Easy management</h2>
  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
  <a href="#" class="da-link">Read more</a>
  <div class="da-img"><img src="images/2.png" alt="image01" /></div>
  </div>
  <div class="da-slide">
  <h2>Revolution</h2>
  <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
  <a href="#" class="da-link">Read more</a>
  <div class="da-img"><img src="images/3.png" alt="image01" /></div>
  </div>
  <div class="da-slide">
  <h2>Quality Control</h2>
  <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
  <a href="#" class="da-link">Read more</a>
  <div class="da-img"><img src="images/4.png" alt="image01" /></div>
  </div>
  <nav class="da-arrows">
  <span class="da-arrows-prev"></span>
  <span class="da-arrows-next"></span>
  </nav>
  </div>
  

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

Код
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/modernizr.custom.28468.js"></script>
<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
  <noscript>
  <link rel="stylesheet" type="text/css" href="/css/nojs.css" />
  </noscript>
<script type="text/javascript" src="/js/jquery.cslider.js"></script>

Основа слайдера установлена и остаётся дописать скрипт один из двух который будет с авто прокруткой и без авто прокрутки.

Без авто прокрутки

Код
<script type="text/javascript">
  $(function() {
   
  $('#da-slider').cslider();
   
  });
  </script>

С авто прокруткой

Код
<script type="text/javascript">
  $(function() {
   
  $('#da-slider').cslider({
  autoplay : true,
  bgincrement : 450
  });
   
  });
  </script>


Вот и всё установка закончена и вы можете приступить к настройке слайдера под ваши нужды сайта. 
04.10.2015 Загрузок: 11 Просмотров: 888 Комментарий: (15)

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

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

Комментарий: 15
Brung
Brung 05.10.2015 00:081
0
Что очень красиво создан, посмотреть бы на его демо. У знакомой есть интернет магазин и она не как не может определиться со слайдером, так как на системе ucoz их почти нет. Только сделаны под кино сайты.
Сопрано
Сопрано 05.10.2015 00:182
0
Видел его в работе, но совершено на другом CMC и это значит адаптация под систему. Во общем даже шапку не нужно, этот слайдер ее заменит.
Kosten
Kosten 05.10.2015 00:223
0
Да есть на все слайдеры демо, кому нужно скину в личные сообщение, так как не стал делать, а там где оно стоит, скоро срок домена истекает и они пропадут.
Kosten
Kosten 05.10.2015 00:324
0
Вот этот слайдер думаю больше востребован будет и его можно посмотреть в DEMO режиме, а точнее в натуре как он работает и адаптация была на его отлично сделана.
Brung
Brung 05.10.2015 00:385
0
Вот посмотрел и совершенно другой взгляд на этот скрипт. Можно вверх сайта не ставить или просто в верху написать что то по теме и слайдер поставить и отлично должно получиться.
AnTron
AnTron 05.10.2015 00:486
0
Давайте не спорить, нужно или не нужно а все по теме, а это у нас слайдер, который выполнен в желтом цвете, а значит для светлого дизайна. Просто не могу представить его на темном. Сделан он под интернет магазин и студий различные как упомянули в описание, что все правильно. Кто то говорит, что вверх сайта может заменить, здесь бы с вами поспорил. Вверх должен обязательно быть, это как горизонтальное меню как на этом сайте, только без категорий и входом на сайт и логотипом.

А так если оценивать по пяти бальному, то 4 + точно дам этому слайдеру.
Brung
Brung 05.10.2015 01:037
0
AnTron, но вы не чего нового не сказали, просто вижу Демо и мне этого хватает.
DALMATIN
DALMATIN 05.10.2015 02:5210
0
В жёлтом цвете ? Покажите где? Всё это меняется за пару минут и под чёрный, красный или синий вариант!
Kosten
Kosten 05.10.2015 01:098
0
Чтоб не было не каких споров, эти материалы а точнее 2 слайдера которые сейчас поставил, создавал адаптацию модератор сайта zornet.ru, а точнее этого. Думаю он внесет ясность по всему, что есть здесь. Хотя почти все описание его и оно понятное, для не понятливых, ответит надеюсь, чтоб не было не какой пыли.
DALMATIN
DALMATIN 05.10.2015 02:519
0
А что тут дополнять то, вкусы у всех разные да и с начало нужно смотреть на сайт а потом уже думать идёт он туда или нет.
AnTron
AnTron 05.10.2015 02:5911
0
Но он явно не подойдет, где каркас сайта узкий, так как должен по идее на всю ширину быть.
bogdanov_o
bogdanov_o 18.03.2016 22:2612
0
Подскажите как изменить интервал перехода следующей странице ? Он слишком быстро меняется
Kosten
Kosten 18.03.2016 22:5613
0
Здесь не знаю, вообще в слайдерах, но явно задана скорость, в каком то файле.
bogdanov_o
bogdanov_o 25.03.2016 21:3214
0
Нашел js/jquery.cslider.js biggrin biggrin biggrin

};

$.Slider.defaults = {
current : 0, // index of current slide
bgincrement : 50, // increment the bg position (parallax effect) when sliding
autoplay : false,// slideshow on / off
interval : 8000 // time between transitions
Kosten
Kosten 26.03.2016 14:2815
0
Что тут сказать, молодец, что разобрался, главное чтоб работало.
avatar