Слайдер на javascript

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

Самый простой слайдер на чистом 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;
}

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

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

7 комментариев на «Слайдер на javascript»

  1. stariс говорит:

    Пользуйтесь на здоровье

  2. Сергей говорит:

    Уважаемый автор. Весьма был доволен Вашим кодом для простого слайдера.
    С уважением, Сергей, 67 лет, г. Москва.

  3. stariс говорит:

    Попробуйте вот в таком виде. Я кое что исправил.

  4. stariс говорит:

    По поводу JS, вам лучше вот сюда. Я наверно так подробно не смогу всё объяснить так как сам изучаю его методом тыка. Продуктивный метод между прочим.

  5. Наталья говорит:

    Здравствуйте, Сергей. Мой первый сайт не в WordPress, поэтому шорткод мне не нужен. Я пишу сайт вручную. Вставила туда карусель от Вас на css. Всё отлично работает. Попробовала на JS — ничего. Ну рано, так рано. Всё равно спасибо, много интересного на Вашем сайте.

  6. stariс говорит:

    Наверное Наташ чуть рановато. Эта карусель сделана для песочницы, т.е чистый код. В шаблоне можно попробовать вставить весь код, и css и html и script в шёрткод, и вывести в нужном месте. Если же вставлять этот слайдер в шапке, то можно опять попробовать шёрткод в хеадер, или html в header, scc в style, а скрипт через функцию в functions.php. Короче дело ясное, что дело тёмное? Так для каждого шаблона ещё будут нюансы в которых сначала надо разобраться. Попробуйте через шёрткод, если не получится, оставьте до приобретения более основательных знаний, а то просто не поймёте меня. Вообще вставить в ручную карусель в шаблон под силу только не плохому программисту.

  7. Наталья говорит:

    Все скопировала, css в файл css, картинки в контент, JavaScript в html файл в .
    Ничего не заработало. Картинки лежат в контенте спокойненько. Ничего не движется.
    Что не так? (делаю первый сайт, поэтому мало что понимаю, в джаваскрипт вообще ничего)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *