qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Слайдер (слайд-шоу) на css и jquery
Просмотров: 1212  Скачан: 190 раз  Комментариев в теме: 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 слайдерcss3 слайдер

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

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Kenburner слайдерKenburner слайдер

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....
Интересные публикации:

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Оригинальное горизонтальное менюОригинальное горизонтальное меню

Красивое горизонтальное меню в оригинальном стиле, в меню используется большое количество позиций......

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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