Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.65/46: Рейтинг темы: голосов - 46, средняя оценка - 4.65
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
1

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

11.03.2015, 00:16. Просмотров 8614. Ответов 2
Метки нет (Все метки)


Подскажите, как добавить навигацию к данной карусели?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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, но эти плагины встраивают свой код и свою ширину для блоков, поэтому у меня пока-что не получается адаптировать эти карусели под резиновый сайт.

Может вы подскажете, как правильно адаптировать эти плагины под резиновую вёрстку?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.03.2015, 00:16
Ответы с готовыми решениями:

Карусель подобрать
Доброго времени суток, форумчане. Нужно реализовать такую же карусель, с такими же функциями: то...

Карусель Изображение
помогите найди похожую Карусель Изображение. чтобы при нажатии открывалось изображения посередине...

Карусель миниатюр
Как сделать слайдер такого формата? Или подключить готовый.

Слайдер-карусель на макет
Здравствуйте! Не могу найти подходящий слайдер, или карусель незнаю как правильно назвать, под...

2
417 / 379 / 163
Регистрация: 03.01.2013
Сообщений: 966
11.03.2015, 10:55 2
Адаптивные слайдеры:
http://owlgraphic.com/owlcarousel/
http://bxslider.com/
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
11.03.2015, 12:29  [ТС] 3
класс, то что надо!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.03.2015, 12:29

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Не работает карусель (Bootstrap 4)
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Карусель&lt;/title&gt; &lt;!-- Bootstrap core...

Не работает слайдер (карусель)
&lt;div class=&quot;slider-box&quot;&gt; &lt;div class=&quot;slider&quot;&gt; &lt;?php ...

Карусель на чистом CSS
Здравствуйте. Мне нужно сделать карусель карточек товаров на чистом css. У меня есть карточки...

Карусель или слайдер
Добрый день, я супер прям супер мега про(нет) прошу помощи невидимым силам помочь с выопрос как...

Как создать адаптивную карусель
Здрасвуйте подскажите как можно осуществить такую карусель на сайте

Как реализовать такую карусель?
Доброго времени суток всем. Ребята, помогите реализовать данную карусель. Ни как не получается....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.