Mybb vBulletin mix
Простой Слайдер картинок и контента

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

В HTML верх

<link rel="stylesheet" type="text/css" href="http://premod.mybb.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="http://premod.mybb.ru/files/0010/b4/f8/78275.js"></script>

Туда, где нужен слайдер

<!-- Cлайдер -->
   <div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">

    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>

<!-- 1-й Контейнер слайдера -->
<div class="slider-content active">

    1-й Контент

</div>
<!-- 2-й Контейнер слайдера -->
<div class="slider-content">

    2-й Контент

</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content">

    3-й Контент

</div>

   </div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->

Пояснения



slider2 - уникальный id cлайдера(*прописывается дважды в начале и  конце),
если слайдеров несколько, для каждого свой



<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">  - красным прописываем свои цифры ширины и высоты слайдера;
padding:0 - отступ контента от краёв, обычно при вставке фоновой картинки вместо 0 - прописываем 12px



    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>
- левая и правая кнопка слайдера, красным - ширина  и ссылка на картинку,
ширину лучше выставлять равные между собой и идентичные исходной картинке(хотя... как знаете)



Очередную вкладку слайдера добавляем таким кодом

<!-- 4-й Контейнер слайдера -->
<div class="slider-content">

    4-й Контент

</div>

Красное - Ваш контент

Полный код DEMO

В HTML верх

<link rel="stylesheet" type="text/css" href="http://premod.mybb.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="http://premod.mybb.ru/files/0010/b4/f8/78275.js"></script>

<style>
/**********************
  слайдер и его  контент

**********************/
#slider2{
  margin-left:-5px;
  margin-top: 0;
/* Фон слайдера */
background:transparent url(http://s2.uploads.ru/rn5eI.jpg) 0 0 no-repeat;
/*outline:solid red 1px!important;*/
}

.Amin-Moder {
  width: 215px;
  vertical-align:top;
  display:inline-block;
  /*outline:solid red 1px;*/
  margin:34px 35px auto 15px;
}
.Amin-Moder *{
  float:none;
}

.Amin-Moder img{
  float:left;
}
.Amin-Moder img{
  padding:8px;
}

</style>

В Объявление

<div class="wrap-slider2" align="center">
<!-- Cлайдер -->
   <div id="slider2" slide-width="742" slide-height="200" class="slider" style="padding:12px;height:0;width:0">

    <img button-width="36" class="button-left hide" src="http://s3.uploads.ru/gwvyS.png"/>
    <img button-width="36" class="button-right" src="http://s3.uploads.ru/TsxA7.png"/>

<!-- 1-й Контейнер слайдера -->
<div class="slider-content active">

    <img style="margin-top:7px;" src="http://s2.uploads.ru/6dc5t.png" width=99% height=95%/>

</div>

<!-- 2-й Контейнер слайдера -->
<div class="slider-content"><span>2</span><br />

    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>
    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>

</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content"><span>3</span><br />

    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>

</div>

<!-- 4-й Контейнер слайдера -->
<div class="slider-content"><span>4</span><br />

    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>
    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>

</div>

   </div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->

</div>