привязать перетаскиваемый слайд к следующей или предыдущей позиции слайда

Question

привязать перетаскиваемый слайд к следующей или предыдущей позиции слайда

У меня есть этот jsfiddle . Я хочу, чтобы ползунок был перетаскиваемым, но когда вы даже перемещаете один элемент немного с каждой стороны, он должен завершить целый шаг и привязать к позиции своего драгоценного / следующего слайда. как здесь .

Я пытался играть с .draggable (), но на самом деле ничего не получал.

Это код до сих пор:

    <div class="ido">
  <div class="slider">
    <div class="sliderin">
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text2 text2 text2</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text3 text3 text3</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="idopagination">
    <span class="nexter"><img src="https://thegreenbox.co.il/wp-content/uploads/2018/06/leftarrow.png"></span>
    <span class="prever"><img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/rightarrow.png"></span>
  </div>
</div>


.ido {
  max-width: 900px;
  margin: 50px auto;
  padding: 50px;
  position: relative;
}

.idopagination {
  position: absolute;
  top: 0;
  left: 60px;
}

.idopagination span:hover {
  cursor: pointer;
}

.nexter {
  margin-right: 15px;
}

.prever {
  pointer-events: none;
}

.prever img {
  filter: grayscale(100%);
}

.item {
  display: inline-block;
  float: right;
  text-align: center;
}

.item .image {
  width: 90%;
  float: none;
  border: 1px solid black;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
}

.image img {
  width: 96%;
  margin: 5px auto;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.button {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 50px;
  text-align: center;
  background: gray;
  color: white;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  border-radius: 0 10px 10px 0;
}

.button:hover,
.button-close:hover {
  cursor: pointer;
}

.modal-content {
  height: 350px !important;
  padding: 50px;
  border: 10px solid gray;
  border-radius: 20px;
  background: white;
  z-index: 9999;
  display: none;
  margin: 0 auto;
  position: relative;
}

.button-close {
  position: absolute;
  right: 0;
  top: 20px;
  width: 50px;
  text-align: center;
  background: gray;
  color: white;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  border-radius: 10px 0 0 10px;
}

.modal-dialog {
  position: relative;
  width: 700px;
  margin: 50px auto;
}

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 1px;
}

.sliderin {
  position: absolute;
}

  // MODAL //

  $(function() {
    $(".modal-content").draggable();
  });

  $(".button").click(function() {
    $(this)
      .parent()
      .find(".modal")
      .fadeToggle("200");
    $(this)
      .parent()
      .find(".modal-content")
      .fadeToggle("200");
  });

  $(".button-close").click(function() {
    $(this)
      .closest(".modal")
      .fadeToggle("200");
    $(this)
      .closest(".modal-content")
      .fadeToggle("200");
  });

  $(document).keydown(function(e) {
    if (e.keyCode == 27) {
      $(".modal").fadeOut("200");
      $(".modal-content").fadeOut("200");
    }
  });

  // SLIDER //

  var sliderwidth = $(".slider").width();

  if (sliderwidth > 869) {
    var itemwidth = parseInt(sliderwidth, 10) / 3;
    $(".slider .sliderin .item").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10) * 3;
    var firstpos = parseInt(itemwidth, 10) * 6;
    var endpos = parseInt(firstpos, 10) - 1;
  } else if (sliderwidth < 870 && sliderwidth > 579) {
    var itemwidth = parseInt(sliderwidth, 10) / 2;
    $(".slider .sliderin .item").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10) * 4.5;
    var firstpos = parseInt(itemwidth, 10) * 7;
    var endpos = parseInt(firstpos - itemwidth - 1);
  } else {
    $(".slider .sliderin .item").css("width", sliderwidth);
    var itemwidth = sliderwidth;
    var sliderinwidth = parseInt(sliderwidth, 10) * 9;
    var firstpos = parseInt(itemwidth, 10) * 8;
    var endpos = parseInt(firstpos, 10) - 1;
  }

  var leftedge = parseInt(-1);

  $(".slider .sliderin").css({
    width: sliderinwidth,
    left: -firstpos
  });

  var sliderheight = $(".slider .sliderin .item").height();
  $(".slider").css("height", sliderheight);

  function modifyWidth() {
    var sliderwidth = $(".slider").width();

    if (sliderwidth > 869) {
      var itemwidth = parseInt(sliderwidth, 10) / 3;
      $(".slider .sliderin .item").css("width", itemwidth);
      var sliderinwidth = parseInt(sliderwidth, 10) * 3;
      var firstpos = parseInt(itemwidth, 10) * 6;
      var endpos = parseInt(firstpos, 10) - 1;
    } else if (sliderwidth < 870 && sliderwidth > 579) {
      var itemwidth = parseInt(sliderwidth, 10) / 2;
      $(".slider .sliderin .item").css("width", itemwidth);
      var sliderinwidth = parseInt(sliderwidth, 10) * 4.5;
      var firstpos = parseInt(itemwidth, 10) * 7;
      var endpos = parseInt(firstpos - itemwidth - 1);
    } else {
      $(".slider .sliderin .item").css("width", sliderwidth);
      var itemwidth = sliderwidth;
      var sliderinwidth = parseInt(sliderwidth, 10) * 9;
      var firstpos = parseInt(itemwidth, 10) * 8;
      var endpos = parseInt(firstpos, 10) - 1;
    }

    var leftedge = parseInt(-1);

    $(".slider .sliderin").css({
      width: sliderinwidth,
      left: -firstpos
    });

    var sliderheight = $(".slider .sliderin .item").height();
    $(".slider").css("height", sliderheight);
  }

  $(".idopagination .nexter").click(function() {
    $(this)
      .parent()
      .parent()
      .find(".sliderin")
      .animate({
        left: "+=" + itemwidth
      }, "slow", function() {
        var posn = $(this).position();
        if (posn.left > leftedge) {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "none");
        }
        if (posn.left < -endpos) {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "none");
        }
      });
  });

  $(".idopagination .prever").click(function() {
    $(this)
      .parent()
      .parent()
      .find(".sliderin")
      .animate({
        left: "-=" + itemwidth
      }, "slow", function() {
        var posp = $(this).position();
        if (posp.left > leftedge) {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "none");
        }
        if (posp.left < -endpos) {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "none");
        }
      });
  });

  // END //

  $(window).resize(function() {
    modifyWidth();
  });

jquery,

0

Ответов: 3

JQuery,

Похожие вопросы

score 0 · Accepted Answer

0

Я медленно добираюсь туда:

    var start,stop;

    $(".sliderin").draggable({
        axis: "x",
        start: function(event, ui) {
            start = ui.position.left;
        },
        stop: function(event, ui) {
            stop = ui.position.left;
            if (start < stop) {
            $(".sliderin").animate({
            left: "+=" + itemwidth
          }, "slow")
            }
            else {
            $(".sliderin").animate({
            left: "-=" + itemwidth
          }, "slow")
            }
    }
});

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

score 0 · Accepted Answer

0

Поэтому я попробовал это сейчас:

  var start, stop;

  $(".sliderin").draggable({
    axis: "x",
    start: function(event, ui) {
      start = ui.position.left;
    },
    stop: function(event, ui) {
      stop = ui.position.left;
      var distance = parseInt(start, 10) - (stop, 10);
      var whatsleft = parseInt(itemwidth, 10) - (distance, 10);
      if (start < stop) {
        $(".sliderin").animate({
          left: "+=" + whatsleft
        }, "slow")
      } else {
        $(".sliderin").animate({
          left: "-=" + whatsleft
        }, "slow")
      }


    }
  });

но я думаю, что по какой-то причине он не собирает «расстояние» var. Я делаю что-то неправильно?

score 0 · Accepted Answer

0

понял :)

я должен был ввести parseInt перед каждым var в уравнении.
Я должен вычислять расстояние от начальной точки до конечной точки по-разному при движении вправо или влево: справа это было (стоп-старт), так как слева было (старт-стоп).
как только я рассчитал это расстояние, я мог бы анимировать расстояние элемента в качестве оставшейся анимации.

вот он: http://jsfiddle.net/idoangel/z6t1odn2/1/

и вот код, который нужно добавить к оригиналу:

 var start, stop;

  $(".sliderin").draggable({
    axis: "x",
    start: function(event, ui) {
      start = ui.position.left;
    },
    stop: function(event, ui) {
      stop = ui.position.left;
      var distancer = parseInt(stop, 10) - parseInt(start, 10);
      var distancel = parseInt(start, 10) - parseInt(stop, 10);
      var whatsleftr = parseInt(itemwidth, 10) - parseInt(distancer, 10);
      var whatsleftl = parseInt(itemwidth, 10) - parseInt(distancel, 10);
      if (start < stop) {
        $(".sliderin").animate({
          left: "+=" + whatsleftr
        }, "slow")
      } else {
        $(".sliderin").animate({
          left: "-=" + whatsleftl
        }, "slow")
      }
    }
  });