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

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

ОБСУЖДЕНИЕ

Слайдер с меню на jquery

Jquery слайдер с меню
Просмотров: 1565  Скачан: 224 раз  Комментариев в теме: 0

Стильный jquery слайдер с меню и прекрасным эффектом перехода для вашего сайта, отлично подойдёт для интернет магазина. Несомненно идея при создании этого слайдера, была взята в Aplle, когда несколько небольших элементов движутся друг за другом, к сожалению выводить большое количество элементов в слайдере, не совсем оптимальное решение, если конечно не подправить css и js.

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

 

HTML

<div id="mi-slider" class="mi-slider">
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
        <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats & Caps</h4></a></li>
        <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
        <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
        <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
        <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
        <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
        <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
        <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
    </ul>
    <nav>
        <a href="#">Shoes</a>
        <a href="#">Accessories</a>
        <a href="#">Watches</a>
        <a href="#">Bags</a>
    </nav>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.catslider.js"></script>
<script type="text/javascript">
    $(function() {
        $( '#mi-slider' ).catslider();
    });
</script>

Скрипт Modernizr.custom.js, подключать нужно между <head> и </head>, если подключить после HTML разметки, то в браузере IE будет некоректно отображаться слайдер.

Материалы по теме:

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

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

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

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

Navigation SlaiderNavigation Slaider

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

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

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

Rotator на css и jQueryRotator на css и jQuery

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

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

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

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

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

Design StudioDesign Studio

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

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

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

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

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

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

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

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

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

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

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

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


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