<style type="text/css">

        body {

                background: #eee;

                margin: 0;

                font-family: arial;

        }

        .wrapper {

                background: #fff;

                width: 700px;

                padding: 1px 15px 15px;

                margin: 0 auto;

        }

        .slider {

                z-index: 9;

                width: 700px;

                height: 290px;

                overflow: hidden;

                margin: 0 0 7px;

                position: relative;

        }

        .slider ul,

        .slider li {

                padding: 0;

                margin: 0;

                list-style-type: none;

        }

        .slider ul {

                width: 9999px;

        }

        .slider ul li {

                list-style-type: none;

                float: left;

                width: 700px;

                height: 290px;

        }

        .slider .nav {

                position: absolute;

                left: 15px;

                bottom: 12px;

        }

        .slider .nav span {

                opacity: 0.9;

                background: #fff;

                margin: 0 8px 0 0;

                width: 16px;

                height: 16px;

                border-radius: 8px;

                cursor: pointer;

                overflow: hidden;

                display: block;

                float: left;

                box-shadow: 0 1px 2px #000;

        }

        .slider .nav span.on {

                background: #2e9419;

        }

        </style>

$(document).ready(function() {

        $(".slider").each(function () { // обрабатываем каждый слайдер

        var obj = $(this);

        $(obj).append("<div class='nav'></div>");

        $(obj).find("li").each(function () {

        $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации

        $(this).addClass("slider"+$(this).index());

        });

        $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню

        });

});

 

function sliderJS (obj, sl) { // slider function

        var ul = $(sl).find("ul"); // находим блок

        var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока

        var step = $(bl).width(); // ширина объекта

        $(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки

}

 

//автопромотка

window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},5000);

 

$(document).on("click", ".slider .nav span", function() {

        var sl = $(this).closest(".slider"); // находим, в каком блоке был клик

        $(sl).find("span").removeClass("on"); // убираем активный элемент

        $(this).addClass("on"); // делаем активным текущий

        var obj = $(this).attr("rel"); // узнаем его номер

        sliderJS(obj, sl); // слайдим

        return false;

});

 

       

        <div class="slider">

                <ul>

                        <li><h2>Заголовок 1</h2>

                                <p>Описание 1</p>

                        </li>

                        <li><h2>Заголовок 2</h2>

                                <p>Описание 2</p>

                        </li>

                        <li><h2 >Заголовок 3</h2>

                                <p>Описание 3</p>

                        </li>

 

                </ul>

        </div>