01
июн
2015
В данном уроке речь пойдет о процессе создания замечательного слайдера с множеством полезных функций, которые сделают ваш сайт уникальным. В этом слайдере помещены все необходимые и возможные функции, мы постарались максимально упростить его разработку, при этом добавив все новые возможности. У нас будет 7 слайдов, с возможностью быстрой навигаций, как стрелками, так и панелями. Кроме этого есть функция автоматического проигрывания, а также развертывание на весь экран, что весьма хорошо скажется на улучшении отображения.
Шаг 1. HTML
Разметка будет достаточно простой, так как большую часть функций берет на себя плагин jlider, то нас остается создать неупорядоченный список, при этом обвернув все это в класс jlide:
Также мы добавили ссылки для изображений и подписи, для отображения подписи у нас будет прозрачная плашка, которая будет отображаться в низу слайдера.
Шаг 2. CSS
Теперь займемся стилями, как мы говорили ранее, за большую часть работы отвечает плагин, это относится и к стилям, нам достаточно определить общие параметры контейнера , добавить параметры для плашки и правила при наведении на курсоры навигации:
Шаг 3. JS
В плагине уже будут скомпилированы все параметры слайдера, нам достаточно вызвать данный плагин, при этом вас стоит ранее подключить его простым указанием пути в шапке документа, затем добавляем следующие строчки в место на сайте где у вас будет слайдер:
Здесь вы можете изменить несколько основным параметров, таких как размер, эффекты, и автоматическое воспроизведение. В результате простых действий и плагина jlide мы получили замечательный слайдер.
Готово!
Слайдер с навигацией для сайта
В данном уроке речь пойдет о процессе создания замечательного слайдера с множеством полезных функций, которые сделают ваш сайт уникальным. В этом слайдере помещены все необходимые и возможные функции, мы постарались максимально упростить его разработку, при этом добавив все новые возможности. У нас будет 7 слайдов, с возможностью быстрой навигаций, как стрелками, так и панелями. Кроме этого есть функция автоматического проигрывания, а также развертывание на весь экран, что весьма хорошо скажется на улучшении отображения.
Шаг 1. HTML
Разметка будет достаточно простой, так как большую часть функций берет на себя плагин jlider, то нас остается создать неупорядоченный список, при этом обвернув все это в класс jlide:
<ul class="jlider" id="jl2">
<li><img src="nfs/1.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 1"/></li>
<li><img src="nfs/2.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 2"/></li>
<li><img src="nfs/3.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 3"/></li>
<li><img src="nfs/8.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 4"/></li>
<li><img src="nfs/5.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 5"/></li>
<li><img src="nfs/6.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 6"/></li>
<li><img src="nfs/7.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 7"/></li>
</ul>
<li><img src="nfs/1.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 1"/></li>
<li><img src="nfs/2.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 2"/></li>
<li><img src="nfs/3.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 3"/></li>
<li><img src="nfs/8.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 4"/></li>
<li><img src="nfs/5.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 5"/></li>
<li><img src="nfs/6.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 6"/></li>
<li><img src="nfs/7.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 7"/></li>
</ul>
Также мы добавили ссылки для изображений и подписи, для отображения подписи у нас будет прозрачная плашка, которая будет отображаться в низу слайдера.
Шаг 2. CSS
Теперь займемся стилями, как мы говорили ранее, за большую часть работы отвечает плагин, это относится и к стилям, нам достаточно определить общие параметры контейнера , добавить параметры для плашки и правила при наведении на курсоры навигации:
body {
font-family: Arial, sans-serif;
background: #294555;
color: #fff;
}
h2 {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
pre {
max-width: 600px;
width: 100%;
max-height: 300px;
margin: 20px auto;
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
background-color: rgba(0,0,0,0.5);
padding: 10px 0;
}
#checkout {
background: #fff;
padding: 10px;
color: #333;
font-size: 18px;
width: 260px;
display: block;
text-align: center;
margin: 100px auto;
}
.jlider_frame {
position: relative;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
font-family: Arial, sans-serif;
background: #294555;
color: #fff;
}
h2 {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
pre {
max-width: 600px;
width: 100%;
max-height: 300px;
margin: 20px auto;
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
background-color: rgba(0,0,0,0.5);
padding: 10px 0;
}
#checkout {
background: #fff;
padding: 10px;
color: #333;
font-size: 18px;
width: 260px;
display: block;
text-align: center;
margin: 100px auto;
}
.jlider_frame {
position: relative;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
Шаг 3. JS
В плагине уже будут скомпилированы все параметры слайдера, нам достаточно вызвать данный плагин, при этом вас стоит ранее подключить его простым указанием пути в шапке документа, затем добавляем следующие строчки в место на сайте где у вас будет слайдер:
<script type="text/javascript">
$(document).ready(function() {
$("#jl2").jliderSlide({
slideEffect : "random",
visiTime : 6000,
autoPlay : false,
width : "800px",
height : "420px",
photoCaption : true,
visiProgress : true,
noCopy : true,
hideControl : "hover",
navType : "line",
Loaded : function (curSlide) {
console.log('Loaded...!');
},
pressPlay : function (curSlide) {
console.log('Pressed Play button...!');
},
pressPause : function (curSlide) {
console.log('Pressed Pause button...!');
}
});
});
</script>
$(document).ready(function() {
$("#jl2").jliderSlide({
slideEffect : "random",
visiTime : 6000,
autoPlay : false,
width : "800px",
height : "420px",
photoCaption : true,
visiProgress : true,
noCopy : true,
hideControl : "hover",
navType : "line",
Loaded : function (curSlide) {
console.log('Loaded...!');
},
pressPlay : function (curSlide) {
console.log('Pressed Play button...!');
},
pressPause : function (curSlide) {
console.log('Pressed Pause button...!');
}
});
});
</script>
Здесь вы можете изменить несколько основным параметров, таких как размер, эффекты, и автоматическое воспроизведение. В результате простых действий и плагина jlide мы получили замечательный слайдер.
Готово!
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив. -
Написал(а): pmvb
В новости: Advanced Module Manager Pro v10.0.18 - расширенный менеджер модулей JoomlaADVANCED MODULE MANAGER PRO V10.0.18 просит ключь??? -
Написал(а): jackxren88
В новости: FaLang Pro v5.6 - мультиязычный сайт на JoomlaЕсть у кого то для YOOtheme плагин?