Ремонт компьютера
Сборка, чистка, апгрейт ремонт любой техники.
Замена частей, установка ПО, установка Windows, антивируса.
Удаленная помощь без вызова на дом.
Создание сайта
Создание сайта с нуля, модулей, скриптов для сайта.
Движки Joomla, Wordpress, Opencart, Prestashop и тд.
SEO продвижение, ремонт, оптимизация сайта.

Исправленный слайдер Slaidorion от Chizi

Слайдер нужен, чтобы ваш сайт стал более привлекательным и интересным. Слайдер с большими картинками и переходами придется каждому по вкусу.
Исправленный слайдер Slaidorion от Chizi. Этот плагин можно установить на WordPress, CMS,  даже на обычную страницу HTML. Скрипт работает на JQuery. Так называемый Слайдрион был с массой ошибок, он был мною доработан и сделан для вас. Педставляет собой совмещение слайдера изображений и вертикального аккордеона. Мне кажется: такой скрипт обязательно пригодиться форумам, блогам, сайтам любой тематики, а, если постараться (отключить картинки), то из него выходит красивое выпадающее меню (правая часть).

Как выглядит мой слайдер, вы можете увидеть на главной странице сайта.

Размещение контента слайдера:
HTML/PHP

<link href="http://chizi.by/get/style.css" rel="stylesheet" type="text/css" /> <!--Подключаем оформление слайда-->
<div id="content-slider" style="height:350px;">
<div id="chizi-slide">
 <div id="slider">
 <div rel="section1">
 <img src="http://chizi.by/get/1.jpg"/><!--Наша 1ая картинка-->
 </div>
 <div rel="section2">
 <img src="http://chizi.by/get/2.jpg"/><!--Наша 2ая картинка-->
 </div>
 <div rel="section3">
 <img src="http://chizi.by/get/3.jpg"/><!--Наша 3я картинка-->
 </div>
 </div>
 <div id="accordion">
 <div><a rel="section1">Боремся с вирусами</a></div> <!--Титульник-->
 <div>
 <!-- Содержание блока описания располагается здесь -->
 На сайте мы показываем и подробно описываем борьбу с большинством вирусов, их лечение и устранением, в ручную. <br>
 А также популярные способы защиты от вирусов.<br><br><a href="http://chizi.by/menu/virus/"><span>Далее</span></a>
 <!--Конец блока описания-->
 </div>
 <div><a rel="section2">Полезные мелочи</a></div>
 <div>
 <!-- Содержание блока описания располагается здесь -->
 Тут находиться все самое нужное и полезное что может пригодиться каждому, и что порой нужно знать чтобы не попасть в неловкую ситуацию с компьютером.<br><br><a href="http://chizi.by/menu/полезные-мелочи/"><span>Далее</span></a>
 <!--Конец блока описания-->
 </div>
 <div><a rel="section3">Чиним самостоятельно</a></div>
 <div>
 <!-- Содержание блока описания располагается здесь -->
 Способы и решения самостоятельного ремонта компьютера даже в критических ситуациях, и способы их избежать.<br><br><a href="http://chizi.by/menu/Своими-руками-чиним/"><span>Далее</span></a>
 <!--Конец блока описания-->
 </div>
 </div>
</div></div>

 

После того, как добавили код HTML. Теперь подключим к нему CSS.
CSS

 @charset "utf-8";
<style type="text/css">
/*
Стили для слидриона
 */
#slidorion {
 width:560px; /* Установим ширину контейнера. Равна сумме ширины #slider и #accordion */
 height: 350px;; /* Установим высоту контейнера. Равна высоте #slider и #accordion */
 left: 50%;
 margin-left: -384px;
 padding: 10px;
 background: #cbcbcb;
 border: 1px solid #bbb;
 -webkit-box-shadow: 0 0 34px #bbb;
 -moz-box-shadow: 0 0 34px #bbb;
 box-shadow: 0 0 34px #bbb;

}

.more-link { 
background: #333333;
color: #FFFFFF !important;
font-size: 0.9em;
padding: 5px 10px;
text-decoration: none !important;
}
#slider {

 width: 360px; /* ширина контейнера с картинками */
 height: 350px; /* Установим его высоту*/
 position: relative;
 float: left;
 overflow: hidden; /* Скроем прокрутку */
}

.slider-image {
 position: relative;
}

.slider-image img {
 width: 360px; /* Ширина картинки*/
 height: 350px; /* Высота картинки */
 position: absolute;
}

#accordion {
 float:right;
 width: 200px; /* Ширина контейнера с описателем*/
 height: 350px; /* высота */
 font-family: Verdana;
 background: #eee;
 -webkit-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
 -moz-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
 box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
 position: relative;
 z-index:999;
}

#accordion .header { /* заголовок описания. Сложный стиль */
 height: 36px;
 color: #333;
 background: #ededed;
/* градиентная заливка с css*/
 background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
 background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
 background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
 background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
 background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dcdcdc',GradientType=0 );
/* градиентная заливка с css - конец */
 border: none;
 border-top: 1px solid #ccc;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

#accordion .header a { /* стиль ссылки внутри заголовка */
 background: none;
 padding: 8px 14px;
 text-decoration: none;
 font-weight: bold;
 font-size: 12px;
 display: block;
}

#accordion .header a:hover { /* стиль ссылки внутри заголовка при наведении */
 background: #ededed;
 cursor: pointer;
}

#accordion .header a.active { /* стиль активной ссылки внутри заголовка */
 border-bottom: none;
 background-color: #676767 !important;
 color: #fff;
 height: inherit;
}

#accordion .content {
 height: 207px; /* Эту высоту нужно менять, поскольку она зависит от высоты контейнера с описанием и числа вкладок */
 font-weight: bold;
 font-size: 12px;
 margin: 0;
 padding: 16px;
 border: none;
 background: #d6d6d6;
 background: -moz-linear-gradient(top, #676767 0%, #ffffff 5%);
 background: -webkit-linear-gradient(top, #676767 0%,#ffffff 5%);
 background: -o-linear-gradient(top, #676767 0%,#ffffff 5%);
 background: -ms-linear-gradient(top, #676767 0%,#ffffff 5%);
 background: linear-gradient(top, #676767 0%,#ffffff 5%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='##676767', endColorstr='#ffffff',GradientType=0 );
</style>

Как вычислить высоту #accordion .content:
Берем высоту контейнера (#accordion height), вычитаем из него помноженную на число вкладок высоту заголовка (#accordion .header height) и делим полученное число на количество вкладок.

А теперь, наконец, подключим наши скрипты:
61710.js, 51531.js, jquery-1.9.1.js.
JS 

<script src="http://chizi.by/get/jquery-1.9.1.js"></script> 
<script src="http://chizi.by/get/61710.js"></script>
<script src="http://chizi.by/get/51531.js"></script> 
<script>
$(document).ready(function(){
 $('#chizi-slide').slidorion({
 <!-- Сюда пишем опции. только через запятые писать, кроме последнего --> 
 effect: 'slideRight',
 autoPlay: 'true',
 interval: 10000
 <!--Конец опций-->

 });
});
</script>

 

Список опций:

autoPlay: ‘true’ Автоматическая смена слайдов включена
autoPlay: ‘false’ Автоматическая смена слайдов отключена
effect: ‘fade’ Смена изображений через выцветание
effect: ‘slideLeft’ Смена изображений замещением слева
effect: ‘slideRight’ Смена изображений замещением справа
effect: ‘slideDown’ Смена изображений замещением сверху вниз
effect: ‘slideUp’ Смена изображений замещением снизу вверх
effect: ‘overLeft’ Смена изображений наползание слева
effect: ‘overRight’ Смена изображений наползание справа
effect: ‘overDown’ Смена изображений наползание сверху вниз
effect: ‘overUp’ Смена изображений наползание снизу вверх
hoverPause: ‘true’ Пауза проигрывания при наведении курсора мыши включена
hoverPause: ‘false’ Пауза проигрывания при наведении курсора мыши выключена
interval: число в миллисекундах без кавычек! Задержка перед сменой изображения
speed: число в миллисекундах без кавычек! Время смены одного слайда, то есть скорость анимации

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

Скопировать JS себе:
Если вы захотите скопировать JS себе, то просто перейдите по указанным ссылкам и, скопировав текст из JS скриптов, вставьте его в блокнот, и сохраните с таким же именем и расширением блокнот («jquery-1.9.1.js»).

 

Название статьи при не правильной раскладке клавиатуры: Bcghfdktyysq ckfqlth Slaidorion jn Chizi
Если вдруг появилось желание поблагодарить автора,просто нажмите на рекламу чуть ниже, этого будет достаточно :)

2 комментария

  1. Sv9t:

    Привет! а есть такого же вида, только на чистом css — слайдер+аккордион?

Добавить комментарий

Ваш e-mail не будет опубликован.

Вставьте верное число *