Слайдер на javascript

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

Для Вас самая простая карусель (слайдер с эффектом плавного появления) на javascript.

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

CSS
.slider {
  position: relative;
  width: 300px;
  height: 200px;
}

.slide {
  position: absolute;

HTML
<div class="slider">
  <img class="slide" src="images/1.jpg">
  <img class="slide" src="images/2.jpg">
  <img class="slide" src="images/3.jpg">
</div>

JavaScript

 <script type="text/javascript">
  
 var slidersNum = 0,
  sliderElements = document.querySelectorAll('.slider .slide'),
  slidersCount = sliderElements.length,
  sliderTimer;

sliderElements[slidersNum].classList.add("active");

sliderTimer = setInterval(slide, 4000);

function displaySlide(slideNum) {
  sliderElements[slidersNum].classList.remove("active");
  slidersNum = (slideNum < slidersCount ? (slideNum >= 0 ? slideNum : slidersCount - 1) : 0);
  sliderElements[slidersNum].classList.add("active");
}

function slide() {
  displaySlide(slidersNum + 1)
}

function prev() {
  clearInterval(sliderTimer);
  displaySlide(slidersNum - 1);
  sliderTimer = setInterval(slide, 4000);
}

function next() {
  clearInterval(sliderTimer);
  displaySlide(slidersNum + 1);
  sliderTimer = setInterval(slide, 4000);
}


</script>

Наверное проще уже ничего не придумаешь, но тем не менее минимум кода не повлияет на скорость загрузки, а хорошие картинки сделают карусель привлекательной.

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

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

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

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

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

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

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

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

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

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

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

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

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