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
    18 фев 2016 в 18:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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