ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Слайдер эффекта на главной странице для uCoz

Слайдер эффекта на главной странице для 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 Октября 2015 Загрузок: 18 Просмотров: 2827 Комментариев: (15)

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

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

Оставь свой отзыв

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

А так если оценивать по пяти бальному, то 4 + точно дам этому слайдеру.
Kolinkor
Kolinkor 05 Октября 2015 01:037
0
AnTron, но вы не чего нового не сказали, просто вижу Демо и мне этого хватает.
DALMATIN
DALMATIN 05 Октября 2015 02:5210
0
В жёлтом цвете ? Покажите где? Всё это меняется за пару минут и под чёрный, красный или синий вариант!
Kosten
Kosten 05 Октября 2015 01:098
0
Чтоб не было не каких споров, эти материалы а точнее 2 слайдера которые сейчас поставил, создавал адаптацию модератор сайта zornet.ru, а точнее этого. Думаю он внесет ясность по всему, что есть здесь. Хотя почти все описание его и оно понятное, для не понятливых, ответит надеюсь, чтоб не было не какой пыли.
DALMATIN
DALMATIN 05 Октября 2015 02:519
0
А что тут дополнять то, вкусы у всех разные да и с начало нужно смотреть на сайт а потом уже думать идёт он туда или нет.
AnTron
AnTron 05 Октября 2015 02:5911
0
Но он явно не подойдет, где каркас сайта узкий, так как должен по идее на всю ширину быть.
bogdanov_o
bogdanov_o 18 Марта 2016 22:2612
0
Подскажите как изменить интервал перехода следующей странице ? Он слишком быстро меняется
Kosten
Kosten 18 Марта 2016 22:5613
0
Здесь не знаю, вообще в слайдерах, но явно задана скорость, в каком то файле.
1 2 »
avatar