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

Question

Я пытаюсь сделать слайдер изображений для своего сайта, но я не могу заставить кнопки (влево и вправо) перемещать изображения

Это то, что я хочу сделать: https://jsfiddle.net/Narek_T/wsemLhtz/6/

$(".arrow-click").click(function() {
  var box = $(".image-container"),
    x;
  if ($(this).hasClass("arrow-right")) {
    x = ((box.width() / 2)) + box.scrollLeft();
    box.animate({
      scrollLeft: x,
    })
  } else {
    x = ((box.width() / 2)) - box.scrollLeft();
    box.animate({
      scrollLeft: -x,
    })
  }
})

Это то, что я имею до сих пор: https://jsfiddle.net/7qfpa245/

Answer 1

                <div class="image-container-outer">
                  <div class="left-scroll arrow-click arrow-left">&#8672;</div>
                  <div class="right-scroll arrow-click arrow-right">&#8674;</div>

                <div class="image-container">
                  <img src="https://images.ecosia.org/42-uZar58L8RQsWtZWq_TtJXV1A=/0x390/smart/http%3A%2F%2Fwallpapers-image.ru%2F1920x1080%2Fsummer%2Fwallpapers%2Fsummer-wallpapers-1920x1080-0001.jpg" alt="DW Image" class="port-image" />
                  <img src="https://images.ecosia.org/42-uZar58L8RQsWtZWq_TtJXV1A=/0x390/smart/http%3A%2F%2Fwallpapers-image.ru%2F1920x1080%2Fsummer%2Fwallpapers%2Fsummer-wallpapers-1920x1080-0001.jpg" alt="DW Image" class="port-image" />
                  <img src="https://images.ecosia.org/42-uZar58L8RQsWtZWq_TtJXV1A=/0x390/smart/http%3A%2F%2Fwallpapers-image.ru%2F1920x1080%2Fsummer%2Fwallpapers%2Fsummer-wallpapers-1920x1080-0001.jpg" alt="DW Image" class="port-image" />
                </div>
              </div>

Итак, проблема была в вашем HTML.Вы обнаруживали событие click в классе 'arrow-click', но затем проверяли класс 'arrow-right', которого не было в вашем javascript.

При добавлении этого класса в HTML вы прокручиваете.

edit: вот скрипка с рабочим результатом https://jsfiddle.net/k3jsx17f/

edit2: вот еще один JSFiddle of vanillaВерсия JS (нет таких библиотек, как jQuery), которая может помочь, если вы не можете заставить работать jQuery (хотя стоит поработать над тем, чтобы jQuery работал, если вы спросите меня) https://jsfiddle.net/k3jsx17f/1/

edit3: Итак, главная проблема, с которой вы столкнулисья понимал, как прикреплять события к узлам HTML или объектам jQuery.Чтобы прикрепить события к объектам jQuery, вам нужно убедиться, что DOM отрисован, чтобы у вас было что присоединить.Вот почему вы должны поместить слушателей событий в вашей функции document.ready.Делая это, вы сделаете так, чтобы ваш код, к которому вы прикрепляете элемент click-click к событию click, ждет, пока он будет загружен и готов в DOM, прежде чем выполнять.Это небольшое исправление, но понимание того, почему, безусловно, поможет вашей веб-разработке в будущем.