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

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

ОБСУЖДЕНИЕ

Слайдер на jquery

Слайдер в стиле Apple
Просмотров: 1737  Скачан: 183 раз  Комментариев в теме: 0

Стильный слайдер в стиле Apple на css и jquery для сайта, в слайдере используется красивый эффект перехода между категориями.

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

 

HTML

<div class="cont">
    <div class="container">
        <div id="container_wide">
            <div class="product_container" id="product_browser">
                <a href="#"><img src="images/browser/Chrome.png"></a>
                <a href="#"><img src="images/browser/Safari.png"></a>
                <a href="#"><img src="images/browser/Firefox.png"></a>
                <a href="#"><img src="images/browser/IE.png"></a>
                <a href="#"><img src="images/browser/Maxthon.png"></a>
                <a href="#"><img src="images/browser/Opera.png"></a>
            </div>
            <div class="product_container" id="product_apple">
                <a href="#"><img src="images/apple/iMac.png"></a>
                <a href="#"><img src="images/apple/MacBook.png"></a>
                <a href="#"><img src="images/apple/MacMini.png"></a>
                <a href="#"><img src="images/apple/iPhone.png"></a>
                <a href="#"><img src="images/apple/Macpro.png"></a>
            </div>
            <div class="product_container" id="product_construction">
                <a href="#"><img src="images/construction/01.png"></a>
                <a href="#"><img src="images/construction/02.png"></a>
                <a href="#"><img src="images/construction/03.png"></a>
                <a href="#"><img src="images/construction/04.png"></a>
            </div>
             <div class="product_container" id="product_cake">
                <a href="#"><img src="images/cake/01.png"></a>
                <a href="#"><img src="images/cake/02.png"></a>
                <a href="#"><img src="images/cake/03.png"></a>
                <a href="#"><img src="images/cake/04.png"></a>
                <a href="#"><img src="images/cake/05.png"></a>
                <a href="#"><img src="images/cake/06.png"></a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="nav">
        <a href="#" class="product_nav" id="nav_browser">Browser</a>
        <a href="#" class="product_nav" id="nav_apple">Apple</a>
        <a href="#" class="product_nav" id="nav_construction">Construction</a>
        <a href="#" class="product_nav" id="nav_cake">Cake</a>
    </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.6.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
Материалы по теме:

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

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

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Скроллер картинокСкроллер картинок

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

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

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

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

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

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

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

Rotator на css и jQueryRotator на css и jQuery

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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