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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

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

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

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

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

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

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

GridoGrido

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

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

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

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

The RockThe Rock

Превосходный html шаблон рок сайта, можно также использовать его как сайт распространяющий билеты на рок концерты, на главной странице расположен слай...
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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