Здравствуйте, у меня есть слайдер (сразу скажу, что JS я ничего не знаю), слайдер простенький, но мне стали необходимы элементы управления, а именно, кнопки "вперед"\"назад". Я пробовал впихнуть туда их сам способом "работает, не работает", но ничего не вышло, пожалуйста помогите. Заранее огромное спасибо. (пожалуйста, без советов использовать другой слайдер)
Вот код JS:
jQuery(function($) {
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
});
Вот код вставки:
<ul class="slider" style="height: 300px !important;">
<li>
<img src="/img/slider-main/slider-1.jpg">
</li>
<li>
<img src="/img/slider-main/slider-2.jpg">
</li>
<li>
<img src="/img/slider-main/slider-3.jpg">
</li>
</ul>
И вот CSS:
.slider {
margin: 0;
width: 650px;
height: 420px;
position: relative;
overflow: hidden;
background: rgba(0,0,0,0.4);
z-index: -1;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.slider ul {
padding-left: 0px !important;
}