Здравствуйте уважаемые начинающие веб-мастера.

Самый простой слайдер на чистом javascript с очень простым кодом, который работает во всех шаблонах, на которых я его тестировал.

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

HTML

Код:
<div id="carousels">
<div class="carousel demonstration"><img src="images/1.jpg"></div>
<div class="carousel"><img src="images/2.jpg"></div>
<div class="carousel"><img src="images/3.jpg"></div>
</div>

Javascript

Код:
<script>
var carousels = document.querySelectorAll('#carousels .carousel');
var currentCarousel = 0;
var carouselInterval = setInterval(nextCarousel,5000); /* Интервал между картинками */
function nextCarousel(){
carousels[currentCarousel].className = 'carousel';
currentCarousel = (currentCarousel+1)%carousels.length;
carousels[currentCarousel].className = 'carousel demonstration';
}
</script>

CSS

Код:
#carousels{
position: relative;
}
.carousel{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 3s; /* Время появления картинки */
}

.demonstration{
opacity: 1;
}

Желаю творческих успехов!