0

Допустим есть слайдер:

$(document).ready(function() {
  $('.slider__controls-button').on('click', function(e) {
    e.preventDefault();

    var $this = $(this),
      container = $this.closest('.slider'),
      list = container.find('.slider__list'),
      items = container.find('.slider__item'),
      activeSlide = items.filter('.active'),
      nextSlide = activeSlide.next(),
      prevSlide = activeSlide.prev(),
      firstSlide = items.first(),
      lastSlide = items.last(),
      sliderOffset = container.offset().left,
      reqPos = 0;

      console.log(sliderOffset);
      
    if ($(this).hasClass('slider__controls-button_next')) {
      if (nextSlide.length) {
        findReqPos(nextSlide);
        removeActiveClass(nextSlide);
      } else {
        findReqPos(firstSlide);
        removeActiveClass(firstSlide);
        console.log(firstSlide.offset().left - sliderOffset);
      }
    } else {
      if (prevSlide.length) {
        findReqPos(prevSlide);
        removeActiveClass(prevSlide);
      } else {
        findReqPos(lastSlide);
        removeActiveClass(lastSlide);
      }
    }

    list.css('left', '-=' + reqPos + 'px');

    function removeActiveClass (reqSlide) {
      reqSlide.addClass('active').siblings().removeClass('active');
    }

    function findReqPos (slide) {
      reqPos = slide.offset().left - sliderOffset;
    }
    
  });	
});

.slider {
  margin-left: 400px;
  margin-top: 200px;
  position: relative;
  display: inline-block;
}

.slider__list--wrap {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.slider__list {
  list-style: none;
  padding: 0;
  width: 2000px;
  position: relative;
  left: 0;
  transition-property: left;
  transition: 0.5s;
}
.slider__list:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.slider__item {
  float: left;
}

.slider__controls-button {
  position: absolute;
  top: 150px;
}

.slider__controls-button_next {
  right: -100px;
}

.slider__controls-button_prev {
  left: -100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slider</title>
  <link rel="stylesheet" href="css/main.css">
  <script src="../jquery-1.12.0.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="maincontent">
      <div class="container">
        <div class="slider">
          <div class="slider__list--wrap">
            <ul class="slider__list">
              <li class="slider__item active">
                <img src="http://lorempixel.com/300/300/city" alt="img">
              </li>
              <li class="slider__item">
                <img src="http://lorempixel.com/300/300/people" alt="img">
              </li>
              <li class="slider__item">
                <img src="http://lorempixel.com/300/300/sports" alt="img">
              </li>
              <li class="slider__item">
                <img src="http://lorempixel.com/300/300/technics" alt="img">
              </li>
            </ul>
          </div>
          <div class="slider__controls">
            <a href="#" class="slider__controls-button slider__controls-button_next">next</a>
            <a href="#" class="slider__controls-button slider__controls-button_prev">prev</a>
          </div>
        </div> <!--END SLIDER-->
      </div>
    </div>
  </div>
  

  <script src="js/slider.js"></script>
</body>
</html>

Вопрос: как правильно реализовать поддержку для смартфонов, лэптопов и т.д. , что бы можно было листать слайдер при касании и движении пальца влево\вправо? Реально ли с помощью JQuery 1.12.0 реализовать данную функцию, и как это собственно сделать? Или же нужно воспользоваться другой библиотекой?

1 ответ 1

1

Есть плагины для JQuery реализующие эти события: https://plugins.jquery.com/tag/touch/

1
  • Большое спасибо, буду пробовать.
    – poseidon
    Commented 18 февр. 2016 в 18:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.