Очень странно ведет себя слайдер

311
06 ноября 2017, 23:56

Вот сайт http://theescape.zone/

Слайды:

  • id="lt1"
  • id="lt2"
  • id="lt3"
  • id="lt4"
  • id="lt5"

Булеты:

  • id="ln1"
  • id="ln2"
  • id="ln3"
  • id="ln4"
  • id="ln5"

Свои ID получают правильно, если по ним тыкать - все хорошо, но...

При загрузке страницы начинается автослайд и когда он переходит на id="lt5" и id="ln5", то не добавляет класс img5 к тегу <img class="head-image">

    $(document).ready(function(){
      $(window).on('scroll', function(){
        if($(window).scrollTop()>0){
          $('.header').addClass('affix');
        } else {
          $('.header').removeClass('affix');
        }
      });
$('#ln1').click(function(){
  $('.line .text-head').removeClass("active");
  $('.line a').removeClass("active");
  $('#ln1').addClass("active");
  $('#lt1').addClass("active");
  $('.head-image').addClass("img1");
  $('.head-image').removeClass("img2");
  $('.head-image').removeClass("img3");
  $('.head-image').removeClass("img4");
  $('.head-image').removeClass("img5");
  clearTimeout(timerId);
})
$('#ln2').click(function(){
  $('.line .text-head').removeClass("active");
  $('.line a').removeClass("active");
  $('#ln2').addClass("active");
  $('#lt2').addClass("active");
  $('.head-image').addClass("img2");
  $('.head-image').removeClass("img1");
  $('.head-image').removeClass("img3");
  $('.head-image').removeClass("img4");
  $('.head-image').removeClass("img5");
  clearTimeout(timerId);
})
$('#ln3').click(function(){
  $('.line .text-head').removeClass("active");
  $('.line a').removeClass("active");
  $('#ln3').addClass("active");
  $('#lt3').addClass("active");
  $('.head-image').addClass("img3");
  $('.head-image').removeClass("img2");
  $('.head-image').removeClass("img1");
  $('.head-image').removeClass("img4");
  $('.head-image').removeClass("img5");
  clearTimeout(timerId);
})
$('#ln4').click(function(){
  $('.line .text-head').removeClass("active");
  $('.line a').removeClass("active");
  $('#ln4').addClass("active");
  $('#lt4').addClass("active");
  $('.head-image').addClass("img4");
  $('.head-image').removeClass("img1");
  $('.head-image').removeClass("img2");
  $('.head-image').removeClass("img3");
  $('.head-image').removeClass("img5");
  clearTimeout(timerId);
})
$('#ln5').click(function(){
  $('.line .text-head').removeClass("active");
  $('.line a').removeClass("active");
  $('#ln5').addClass("active");
  $('#lt5').addClass("active");
  $('.head-image').addClass("img5");
  $('.head-image').removeClass("img1");
  $('.head-image').removeClass("img2");
  $('.head-image').removeClass("img3");
  $('.head-image').removeClass("img4");
  clearTimeout(timerId);
})
var myElement1 = document.getElementsByClassName("head-image")[0];
var mc1 = new Hammer(myElement1);
mc1.get('pan').set({ direction: Hammer.DIRECTION_ALL });
// listen to events...
    mc1.on("swipeleft", function(ev1) {  
    if ($('#ln5').hasClass("active")) {
          $('.line .text-head').removeClass("active");
          $('.line a').removeClass("active");
          $('#ln1').addClass("active");
          $('#lt1').addClass("active");
          $('.head-image').removeClass("img5");
          $('.head-image').removeClass("img4");
          $('.head-image').removeClass("img3");
          $('.head-image').removeClass("img2");
          $('.head-image').addClass("img1");
          clearTimeout(timerId);
          return false;
        }       
      if ($('#ln4').hasClass("active")) {
          $('.line .text-head').removeClass("active");
          $('.line a').removeClass("active");
          $('#ln5').addClass("active");
          $('#lt5').addClass("active");
          $('.head-image').removeClass("img4");
          $('.head-image').removeClass("img3");
          $('.head-image').removeClass("img2");
          $('.head-image').removeClass("img1");
          $('.head-image').addClass("img5");
          clearTimeout(timerId);
          return false;
        }       
      if ($('#ln3').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln4').addClass("active");
        $('#lt4').addClass("active");
        $('.head-image').addClass("img4");
        $('.head-image').removeClass("img5");
        $('.head-image').removeClass("img3");
        $('.head-image').removeClass("img2");
        $('.head-image').removeClass("img1");
        clearTimeout(timerId);
        return false;
      } 
      if ($('#ln2').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln3').addClass("active");
        $('#lt3').addClass("active");
        $('.head-image').removeClass("img4");
        $('.head-image').addClass("img3");
        $('.head-image').removeClass("img2");
        $('.head-image').removeClass("img5");
        $('.head-image').removeClass("img1");
        clearTimeout(timerId);
        return false;
      }
      if ($('#ln1').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln2').addClass("active");
        $('#lt2').addClass("active");
        $('.head-image').removeClass("img4");
        $('.head-image').removeClass("img5");
        $('.head-image').removeClass("img1");
        $('.head-image').addClass("img2");
        $('.head-image').removeClass("img3");
        clearTimeout(timerId);
        return false;
      }
    });
    mc1.on("swiperight", function(ev1) {

      if ($('#ln1').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln5').addClass("active");
        $('#lt5').addClass("active");
        $('.head-image').addClass("img5");
        $('.head-image').removeClass("img4");
        $('.head-image').removeClass("img3");
        $('.head-image').removeClass("img2");
        $('.head-image').removeClass("img1");
        clearTimeout(timerId);
        return false;
      }
      if ($('#ln2').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln1').addClass("active");
        $('#lt1').addClass("active");
        $('.head-image').removeClass("img5");
        $('.head-image').removeClass("img4");
        $('.head-image').removeClass("img3");
        $('.head-image').removeClass("img2");
        $('.head-image').addClass("img1");
        clearTimeout(timerId);
        return false;
      } 
      if ($('#ln3').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln2').addClass("active");
        $('#lt2').addClass("active");
        $('.head-image').removeClass("img5");
        $('.head-image').removeClass("img4");
        $('.head-image').removeClass("img1");
        $('.head-image').addClass("img2");
        $('.head-image').removeClass("img3");
        clearTimeout(timerId);
        return false;
      }
      if ($('#ln4').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln3').addClass("active");
        $('#lt3').addClass("active");
        $('.head-image').removeClass("img5");
        $('.head-image').removeClass("img4");
        $('.head-image').addClass("img3");
        $('.head-image').removeClass("img2");
        $('.head-image').removeClass("img1");
        clearTimeout(timerId);
        return false;
      }
      if ($('#ln5').hasClass("active")) {
        $('.line .text-head').removeClass("active");
        $('.line a').removeClass("active");
        $('#ln4').addClass("active");
        $('#lt4').addClass("active");
        $('.head-image').removeClass("img5");
        $('.head-image').removeClass("img3");
        $('.head-image').addClass("img4");
        $('.head-image').removeClass("img2");
        $('.head-image').removeClass("img1");
        clearTimeout(timerId);
        return false;
      }
    });


var timerId = setInterval(function() {
    var $next = $('.block1 .active').removeClass('active').next()
    if ($next.length) {
        $next.addClass('active'); 
    }
    else {
        $("#ln1").addClass('active');
    }
    if ($('#ln1').hasClass("active")) {
      $('.line .text-head').removeClass("active");
      $('.line a').removeClass("active");
      $('#ln1').addClass("active");
      $('#lt1').addClass("active");
      $('.head-image').addClass("img1");
      $('.head-image').removeClass("img2");
      $('.head-image').removeClass("img3");
      $('.head-image').removeClass("img4");
      $('.head-image').removeClass("img5");
    }
    if ($('#ln2').hasClass("active")) {
      $('.line .text-head').removeClass("active");
      $('.line a').removeClass("active");
      $('#ln2').addClass("active");
      $('#lt2').addClass("active");
      $('.head-image').removeClass("img1");
      $('.head-image').addClass("img2");
      $('.head-image').removeClass("img3");
      $('.head-image').removeClass("img4");
      $('.head-image').removeClass("img5");
    }
    if ($('#ln3').hasClass("active")) {
      $('.line .text-head').removeClass("active");
      $('.line a').removeClass("active");
      $('#ln3').addClass("active");
      $('#lt3').addClass("active");
      $('.head-image').removeClass("img1");
      $('.head-image').removeClass("img2");
      $('.head-image').addClass("img3");
      $('.head-image').removeClass("img4");
      $('.head-image').removeClass("img5");
    } 
    if ($('#ln4').hasClass("active")) {
      $('.line .text-head').removeClass("active");
      $('.line a').removeClass("active");
      $('#ln4').addClass("active");
      $('#lt4').addClass("active");
      $('.head-image').removeClass("img1");
      $('.head-image').removeClass("img2");
      $('.head-image').removeClass("img3");
      $('.head-image').removeClass("img5");
      $('.head-image').addClass("img4");
    } 
    if ($('#ln5').hasClass("active")) {
      $('.line .text-head').removeClass("active");
      $('.line a').removeClass("active");
      $('#ln5').addClass("active");
      $('#lt5').addClass("active");
      $('.head-image').addClass("img5");
      $('.head-image').removeClass("img2");
      $('.head-image').removeClass("img3");
      $('.head-image').removeClass("img4");
      $('.head-image').removeClass("img1");
    }
      }, 5000);  
    });

После очень внимательных поисков была найдена опечатка в JS коде слайдера, но теперь появился еще 1 вопрос: при загрузке нужно взять цифру из первого элемента булетов и передать значение в <img class="head-image img<--сюда-->">

READ ALSO
Как проверить наличие ключа в LocalStorage?

Как проверить наличие ключа в LocalStorage?

Хочу добавлять ключи в LocalStorage, если они там отсутствуютКак мне считывать - есть ли ключ с названием, например, "ключ" в LocalStorage?

569
Текст при наведении в maphighlight.js

Текст при наведении в maphighlight.js

Есть скрипт подсветки области maphighlightjs

253
Возможно ли использовать JSX компоненты в TypeScript (TSX)?

Возможно ли использовать JSX компоненты в TypeScript (TSX)?

Для различных библиотек JavaScript предумотрены Types Definitions что бы эти библиотеки можно было использовать в TypeScriptА если я хочу использовать пакет...

303