Один из вариантов реализации простого слайдера.
Слайдер для изображений (с текстом не пробовал).
Из преимуществ — полнейшая адаптивность.
Скрипт
<script> jQuery(document).ready(function ($) { timer = setInterval(function () { moveRight(); }, 3000); $('#slider ul').hover( function() { clearInterval(timer); }, function() { timer = setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: + slideWidth }, 200, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: - slideWidth }, 200, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); </script>
В верстку сайта
<div id="slider"> <a class="control_next">></a><a class="control_prev"><</a> <ul> <li>1 изображение</li> <li>2 изображение</li> <li>3 изображение</li> <li>4 изображение</li> </ul> </div>
CSS
/* Стиль слайдера Incredibly Basic Slider */ #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; width: 100% !important; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 100%; /* 500px */ height: 300px; background: #ccc; text-align: center; line-height: 300px; } #slider ul li img { width: 100%; height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; text-decoration: none; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; }
Пример
[site-socialshare]