Простая карусель

@phpk · Регистрация: 15.05.2013

Подскажите, как добавить навигацию к данной карусели?

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <style>
        html, body, ul {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
        }
 
        #banner {
            width: 100% !important;
            height: 570px;
            background: aqua;
            position: relative;
            overflow: hidden;
        }
 
        #banner ul {
            /*display: table;*/
            width: 100%;
            overflow: hidden;
            position: relative;
        }
 
        #banner ul li {
            display: block;
            width: 90%;
            margin: 0 auto;
            height: 568px;
            overflow: hidden;
            text-align: center;
            position: relative;
            background: yellow;
            border: 1px solid #000000;
        }
 
        #banner h2 {
            font: 49.2px sans-serif;
            color: white;
            letter-spacing: 2px;
            margin: 160px auto 0;
            overflow: hidden;
            /*z-index: 10000;*/
        }
        .banner-prev, .banner-next {
            font: 30px sans-serif;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-1.11.1.js"></script>
    <script>
        $(document).ready(function () {
 
            var width = $('#carousel .test').width();
 
            function carousel() {
 
                $('#carousel').delay(3000).animate({right: '+=' + width}, 1000, function () {
                    var first = $('#carousel .test:first-child');
 
                    first.remove();
                    $(this).append(first);
                    $(this).css({right: '-=' + width});
 
                    carousel();
                });
            }
 
            carousel();
 
            $(".banner-prev").click(function () {
                carousel();
            });
        });
    </script>
 
</head>
<body>
 
<div id="banner">
    <ul id="carousel">
        <li class="test">
            <h2>Window 1</span></h2>
 
            <span class="banner-prev">< </span><span class="banner-next"> ></span>
        </li>
        <li class="test">
            <h2>Window 2</span></h2>
 
            <span class="banner-prev">< </span><span class="banner-next"> ></span>
        </li>
        <li class="test">
            <h2>Window 3</span></h2>
 
            <span class="banner-prev">< </span><span class="banner-next"> ></span>
        </li>
 
    </ul>
</div>
 
</body>
</html>

Функция в строках 76-78 не работает!

А вообще мне нужна карусель, чтобы её можно было встроить в резиновый сайт.
Я уже пробовал несколько готовых решений, такие как jcarousellite.js или carouFredSel, но эти плагины встраивают свой код и свою ширину для блоков, поэтому у меня пока-что не получается адаптировать эти карусели под резиновый сайт.

Может вы подскажете, как правильно адаптировать эти плагины под резиновую вёрстку?

@monochromer · 11.03.2015, 10:55

Адаптивные слайдеры:
http://owlgraphic.com/owlcarousel/
http://bxslider.com/

@phpk · 11.03.2015, 12:29 **[ТС]**

класс, то что надо!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!

@monochromer 417 / 379 / 163 Регистрация: 03.01.2013 Сообщений: 966
	11.03.2015, 10:55	2
	Адаптивные слайдеры: http://owlgraphic.com/owlcarousel/ http://bxslider.com/ 1

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	11.03.2015, 12:29 [ТС]	3
	класс, то что надо!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!! 0

Опции темы