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

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

ОБСУЖДЕНИЕ

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

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

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

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

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

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

Cлайдер КарусельCлайдер Карусель

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

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...
Интересные публикации:

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

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

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......
  • Текущий 1.57/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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