Слайдер на 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 не будет опубликован. Обязательные поля помечены *