RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Слайдер (слайд-шоу) на jquery

Слайдер (слайд-шоу) на css и jquery
Просмотров: 1186  Скачан: 184 раз  Комментариев в теме: 0

Довольно простой слайдер на css и jquery с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо премудростей (дополнительных панелей, кнопок и т.д), то вам стоит присмотреться к данному варианту слайдера.

Шаг 1 - создание разметки

 

HTML

<div id="container">
    <div id="slider">
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/2.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/3.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/4.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/5.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/6.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/7.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/8.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/9.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/10.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/11.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="images/12.jpg" alt="Css Template Preview" /></a></li>
        </ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#slider").easySlider({
        auto: true, 
        continuous: true
    });
});
</script>
Материалы по теме:

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....
Интересные публикации:

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с помощью...

Горизонтальное меню в темном стиле с выпадающими пунктами....

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

The RockThe Rock

Превосходный html шаблон рок сайта, можно также использовать его как сайт распространяющий билеты на рок концерты, на главной странице расположен слай...

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.5/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить