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

В HTML верх

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="https://forumstatic.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

Полный код DEMO

В HTML верх

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="https://forumstatic.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>

---

Добавлена возможность смены направления движения
и времени анимации слайда:

Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(0,700);</script>

Первая цифра - смена направления - 0 или 1

Вторая цифра примерно от 0 до 800, - время анимации кадра

---

---

Добавлен новый Вариант Кольцевого слайдера,
с возможностью автопрокрутки слайдов

Установка та же самая, изменения в назначении параметров запуска функции:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(660,4);</script>

1-я цифра - цифра примерно от 0 до 800, - время анимации кадра
2-я цифра, 4 -время автопрокрутки в секундах(от 1 до 10), (Если параметр не устанавливаем, - автопрокрутки нет.
Для  кольцевого слайдера меняем в HTML верх строку

<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>
на
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>

Можно установить свои добавки стиля к мини-меню прокрутки

Добавочный стиль мини-меню автопрокрутки, в HTML верх, ниже скрипта

<style>
#indexActive{ /*Задаём Позицию индикаторов*/
  position:absolute;
  z-index:1000;
  margin-left: 580px;
  margin-top: -6px;
}

span[id^="active_Ind"]{ /*Фон и размеры индикатор*/
  display:inline-block;
  cursor:pointer;
  float:right;
  background:transparent url(http://s3.uploads.ru/geZ4A.png) no-repeat center top;
  /*border:solid 2px blue!important;*/
  height:11px;
  width:10px;
  padding:0 1px 0 1px;
  margin:10px 6px;
}
span[id^="active_Ind"]:hover{  /*Индикатор при наведении */
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
  box-shadow:1px 1px 4px #515F6C;
}
span[id^="active_Ind"].active{ /*Активный индикатор */
  background-position: center -12px;
}
<style>

DEMO

---

Основные достоинста данных слайдеров:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров при использовании единственного скрипта(необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска
Быстрый запуск.

---

Недостатки: отсутствие возможности установки собственных скриптов внутри вкладок слайдера,
(к примеру скрипт таймера из поста 321)
Решено в этом Варианте => Скрипты от пользователей 3 ,
*При отсутсвии оных лучше пользоваться вышеприведёнными версиями