Переполнение горизонтальной прокрутки CSS с помощью ползунка jQuery

Я пытаюсь настроить полноэкранный слайдер jquery. Я разбил проект на два этапа: 1) css и 2) js.

1) CSS, ниже показано, что я снимаю (без фиксированной высоты), а ниже код, который у меня есть, но который не работает.

Пример

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">

        /* Positioning */
        #container { width: 2500px; }
        .block { display: inline; }

        /* Styling */
        .block img { padding: 5px; }

    </style>
</head>
<body>
    <div id="container">
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    </div>
</body>
</html>

2) Javascript, используя jquery. Я бы хотел, чтобы элементы div скользили влево при нажатии на них... например JQuery Coda Slider, если это возможно.

Спасибо, любая помощь приветствуется.


javascript jquery css horizontal-scrolling jquery-plugins
person Jeffrey    schedule 17.05.2010    source источник
comment
Ссылка не работает, новая ссылка, скорее всего, следующая: kevinbatdorf.github.io/codaslider   -  person Don Cullen    schedule 09.08.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно будет начать с установки css контейнера div с фиксированной шириной и скрытым переполнением, чтобы отображалось только то, что находится в пределах области:

#container{
  width:500px;
  height:200px;
  overflow:hidden;
}

Как вы хотите, чтобы слайдер работал? Автоматический? Нажатие кнопки? есть несколько плагинов, которые, вероятно, могли бы позаботиться об этом автоматически

person kilrizzy    schedule 17.05.2010
comment
Я хотел бы иметь возможность щелкнуть следующий div, чтобы скользить влево (вроде как на рисунке выше). Также вне контейнера мне нужно иметь навигационную ссылку, которая будет идти в div. - person Jeffrey; 17.05.2010
comment
Мне действительно нужно, чтобы он выглядел как на рисунке выше, поэтому отображение следующего слайда имеет решающее значение, и все слайды будут разной высоты. Так что я установлю для overflow-x значение hidden и clip: auto в теле. - person Jeffrey; 17.05.2010
comment
у кого-то уже есть исправление, я тоже ищу это - person Maarten de Wolf; 04.11.2019

arrow_upward
0
arrow_downward

Посмотрите на это: http://apirocks.com/html5/html5.html (протестируйте с помощью Хром)

person Nicolas Viennot    schedule 17.05.2010
comment
Хороший. Очень близко к тому, что мне нужно. Интересно, можно ли настроить так, чтобы скользил только контейнер, а верхний и нижний колонтитулы оставались неизменными. - person Jeffrey; 17.05.2010
comment
Я думаю, с парой элементов div с абсолютным позиционированием вы могли бы - person Nicolas Viennot; 18.05.2010
comment
ладно, возился с этим, и мне трудно заставить относительный нижний колонтитул оставаться ниже абсолютного скользящего контейнера... любые мысли. - person Jeffrey; 18.05.2010
comment
Неработающей ссылке. Не могу следовать. - person Don Cullen; 09.08.2016