Слайдер эффекта на главной странице для 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> Вот и всё установка закончена и вы можете приступить к настройке слайдера под ваши нужды сайта. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 15 | |
| |
1 2 » | |