Страница 1 из 11
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Анимация и флеш(Flash) » Rhinoslider - плагин слайдшоу
Rhinoslider - плагин слайдшоу
Nikola
/avatar/64/4120-829722.png
1');return false;" rel="nofollow" href="javascript://" name="3532">
13.05.2012 в 11:39

Rhinoslider - довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру. На официальной странице плагина имеется удобный генератор эффектов - генератор - определившись с выбором можно сразу скачать сгенерированный рабочий пример.
Разметка HTML

Простейший html код:
Code
           <ul id="slider">
                   <li><img src="img/slider/01.jpg" alt="" /></li>
                   <li><img src="img/slider/02.jpg" alt="" /></li>
                   <li><img src="img/slider/03.jpg" alt="" /></li>
                   <li><img src="img/slider/04.jpg" alt="" /></li>
                   <li><img src="img/slider/05.jpg" alt="" /></li>
               </ul>

CSS

Подключаем стили плагина:
Code
<link type="text/css" rel="stylesheet" href="/css/rhinoslider.css">

Содержимое такое:
Code
.rhino-btn {
       background:url(../img/rhinoslider-sprite.png) 0 0 no-repeat;
       z-index:10;
       width:56px;
       height:53px;
       display:block;
       text-indent:-999%;
       -webkit-user-select:none;
       -moz-user-select:none;
       user-select:none;
}

.rhino-prev, .rhino-next { bottom:-4px; }

.rhino-prev {
       left:-6px;
       background-position:-168px 0;
}

.rhino-next {
       right:-6px;
       background-position:-106px 0;
}

.rhino-prev:hover { background-position:-168px -53px; }

.rhino-next:hover { background-position:-106px -53px; }

.rhino-toggle {
       top:-4px;
       left:-6px;
}

.rhino-play { background-position:0 0; }

.rhino-play:hover { background-position:0 -53px; }

.rhino-pause { background-position:-56px 0; }

.rhino-pause:hover { background-position:-56px -53px; }

.rhino-container { position:relative; }

.rhino-caption {
       position:absolute;
       background: #000;
       display:none;
       left:0;
       right:0;
       top:0;
       color:#fff;
       padding:10px;
       text-align:right;
       -webkit-user-select:none;
       -moz-user-select:none;
       user-select:none;
}

.rhino-bullets {
       position: absolute;
       bottom: -3px;
       left: 50%;
       margin:0 0 0 -50px;
       z-index: 10;
       background: #fff;
       padding:0;
}

.rhino-bullets:before, .rhino-bullets:after {
       position:absolute;
       display:block;
       left:-16px;
       content:' ';
       width:16px;
       height:26px;
       background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat;
}

.rhino-bullets:after {
       left:auto;
       right:-16px;
       background-position: -240px 0;
}

.rhino-bullets li {
       float:left;
       display:inline;
       margin:0 2px;
}

.rhino-bullets li a.rhino-bullet {
       display: block;
       width: 16px;
       height: 15px;
       cursor: pointer;
       background: white;
       font-size: 10px;
       text-align: center;
       padding: 6px 0 5px 0;
       color: #333;
       text-decoration:none;
       -webkit-user-select:none;
       -moz-user-select:none;
       user-select:none;
}

.rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus {
       color:#999;
       background:#eee;
}

.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
       color:#fff;
       background:#5cd4e8;
}

javascript

Основное требование, это подключение jQuery и самого плагина, но дополнительно можно подключить и mousewheel и easing:
Code
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
           <script type="text/javascript" src="js/rhinoslider-1.04.min.js"></script>
           <script type="text/javascript" src="js/mousewheel.js"></script>
           <script type="text/javascript" src="js/easing.js"></script>
И конечно инициализировать плагин с выбранными дополнительными опциями:
               $(document).ready(function() {
                   $('#slider').rhinoslider({
                       effect: 'explode'
                   });
               });

Рекомендуется использовать генератор для созднаия собственного слайдшоу.
CrazyB
2');return false;" rel="nofollow" href="javascript://" name="6218">
08.11.2013 в 14:15 Здравствуйте, проблема следующая - установил на странице несколько Rhinisliderов, не могу настроить их так чтобы кнопки влево и вправо имели независимые друг от друга стили, при перемещении кнопок у одного слайдера другие тоже смещаются, подскажите как это исправить
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Анимация и флеш(Flash) » Rhinoslider - плагин слайдшоу
Страница 1 из 11
Поиск: