Используйте любой слайдер и разместите его за контентом страницы, используя z-index.Мне нравится Nivo Slider , когда я просто перемещаю изображения, и bxSlider , когда мне нужно сдвинуть div или ul с произвольным содержимым.
Элемент, который вы используете.значение z-index должно быть position: relative; или position: absolute.Что касается position: absolute;, следует отметить, что он будет располагать элемент относительно первого родительского элемента, который является position: relative; или position: absolute.Это может показаться запутанным, так как насчет примера:
Поместите свой ползунок в <body> и оберните его в div:
<body>
<div class="container">
<!-- Your slider divs/imgs/ul -->
</div>
<div class="rest-of-page">
...
</div>
</body>
Затем несколько CSS:
/* Position .container relative to body (not really needed, just an example) */
body { position: relative; }
/* Float slider behind content of page, expanding to width/height of document
* and use z-index of -1 to place it behind actual page content. */
.container {
position: absolute;
top: 0%;
left: 50%;
width: 100%;
height: 100%;
z-index: -1;
}
/* Float the actual page content above slider using z-index of 0 */
.rest-of-page { position: relative; z-index: 0; }
И это должно сделать это.Обычно вы должны определить ширину для изображений слайдера, но, поигравшись с ней, я думаю, вы можете заставить ее работать.В своих собственных проектах я центрировал ползунок на странице, а не занимал весь фон, поэтому ваш пробег может отличаться.