第二个 Instagram 按钮的 CSS 属性

Question

Вася

Asked:2024-03-21 05:00:36 +0000 UTC2024-03-21 05:00:36 +0000 UTC 2024-03-21 05:00:36 +0000 UTC

如何修复滑块更改照片的功能，其工作因连接轮播而中断？

772

有一个滑块可让您隐藏和显示之前和之后的图像。

初步解决方案

我想用这个幻灯片计划的更多内容制作一个轮播，但是当我连接它时，slick слайдера滑块的功能崩溃了，现在我只能得到一次性的、尖锐的单侧图像变化。

我试图从幻灯片本身中删除触摸事件（通过项目符号切换幻灯片就足够了），以便本机滑块功能正常工作，但到目前为止还没有任何结果，我需要帮助。

带滑块的滑块代码

$(document).ready(function() {
  $('#comparison-carousel').slick({
    infinite: true,
    //swipe: false,
    //swipeToSlide: 'false',
    //accesibility: false,
    //draggable: false,
    touchMove: false,
    slidesToScroll: 1,
    mobileFirst: true,
    dots: true,
    arrows: false,
    responsive: [{
        breakpoint: 0,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 992,
        settings: {
          slidesToShow: 3,
        }
      }
    ]
  });
});


function imageComparison(selector) {

  let comparison = $(selector)
    .addClass("image-comparison")
    .prepend('<div class="image-comparison__before"></div>')
    .append('<button class="image-comparison__slider"></button>');

  let images = comparison
    .find("img")
    .addClass("image-comparison__image")
    .css("max-width", comparison.width());

  let before = comparison
    .find(".image-comparison__before")
    .append(images.eq(0));

  comparison
    .find(".image-comparison__slider")
    .on("dragstart", () => false) // отмена drug&drop
    .on("mousedown", function(e) {
      let slider = $(this);
      let doc = $(document).on("mousemove", (e) => {
        let offset = e.pageX - comparison.position().left;
        let width = comparison.width();

        // установим границы, чтобы ползунок не выходил
        if (offset < 0) offset = 0;
        if (offset > width) offset = width;

        slider.css("left", offset + "px");
        before.css("width", offset + "px");
      });

      doc.on("mouseup", () => doc.off("mousemove"));
    });
};

imageComparison("#image-comparison");
imageComparison("#image-comparison2");
imageComparison("#image-comparison3");
imageComparison("#image-comparison4");

.img-fluid {
  max-width: 100%;
  height: auto;
}

.image-comparison {
  position: relative;
  overflow: hidden;
  margin-bottom: 70px;
}

#comparison .slick-dots {
  text-align: center;
}

.image-comparison__before {
  position: absolute;
  width: 50%;
  overflow: hidden;
}

.image-comparison__image {
  display: block;
}


/* Ползунок */

.image-comparison__slider {
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  cursor: col-resize;
  outline: none;
  border: none;
}


/* Стрелки */

.image-comparison__slider::before {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: 40px;
  height: 40px;
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAARVBMVEX///8AAACTk5P8/Pze3t7p6emAgIDl5eXh4eGEhISKioqOjo4rKyvs7OwZGRkHBwcfHx8kJCR5eXnY2NigoKAaGhoRERGOZdFBAAADW0lEQVR4nO3cYW/qMAyF4XhrKTBoYWz8/596GWIb0CaZdYuNj877fVIexWkBdU2JMcYYY4wxxhhjjDHGGGOMMcaYW6/eC3h07wfvFTy4lTTeS3hsCwEXnoDYwpWAC89AZOFCwIUXIK5wJeDCHyCq8BcIKrwCYgrXAi683kFI4S0QULgWcOE9EE44AqIJx0Aw4dsYiCWc2EEs4SQQSTgNBBJOnUEoYWYHcYRZIIowN6IwwgIQQ1gCQgiLQAThSxEIICzvIICwBpTOe4X/WRUoi5dZswZWzuADMgbWdzC40AFoK7QfUWOhC9BS6AM0FDoB7YReQDOhG9BK6Ac0En74AY2E7RFdmLYbdGFq3YhWwrTt0YVpu0MXeg2qoTC1e3Rh2sIL09ZhF22FHmfRWJha85uGtfAPH+AO6XXOzIX1K2r437xTVyHGF6YWXli53CAIy4MKIUzdJ7qwdBZBhKnNfplCEaYuR4QRpm6IKOw0y8sQn1vYqNY3PajPLhw0C1xO3fqfXShH1S5GFIosFX/Qjb9MBRCq1rgcncUIQtWgLu+vqBGEMqgGNaJQeRb7iELVTaPpAwqlV53FiELdoC5DClXEq0ENJFQNajMEFEqveRh2GVGoe973+9YfS6i69TfHgELZqYgRhXJUn8VoQt1Z/BrUeMJeNahDQKHsVLsYUSiDivjc/1EyLdQRn7uMUDeoT11OKLvWe2kzlRWKgBALwk+MQS0IZQ9BLAmlRxjUohDiLFaEAINaEcreYRfnfYbsUBHK0Z5YW9Lc2V9urIWysSaaC2W/RReK2BI9hLZXVA+h7Vl0EcrOcFB9hNLbEZ2EhoPqJZSN1S66Cc0+wPkJ5QNdaPXmGHigm9Du3T/wQCeh5dub4IEuQtv3bzkA30yBDkJjoL3Q/hVxs7aoAq13cO6mnr2HAlZ/8w4PrAnNz+D8lYXxd7AiRAAWhRDAkhADWBCuvZc2U1khCjArBBnRlBXC7GBOCAScFiIBJ4U4Z/CrCSHUDk4JwYBjIRpwJIQD3gtX3uuZvwYdeCvEG9F0K0TcwRshJvBKCAr8FaICf4QL74U8rAYdeBHCjmi6CJGBZyHwiKazEBt4EkKP6KnDu/cKHp3De4kZY4wxxhhjjDHGGGOMMcYYY4x99w+juSvDzdAgZgAAAABJRU5ErkJggg==") no-repeat center;
  background-size: cover;
}

.image-comprison__slider:hover,
.image-comprison__slider:focus,
.image-comprison__slider:hover::before,
.image-comprison__slider:focus::before {
  background-color: #ccc;
  outline: none;
  border: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div id="comparison-carousel">
  <div>
    <div id="image-comparison">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e6a/e6a224ebbace87260f550a6a0e152f57_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e75/e75686b6572485306bc0c16bd2b77a5c_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
    </div>
  </div>
  <div>
    <div id="image-comparison2">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/ca7/ca71fad8869b1018ddf573a6a6438391_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/286/286895ba056ca1bbe8eaeb9151335235_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
    </div>
  </div>
  <div>
    <div id="image-comparison3">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/70f/70f72068248b5a9cf4bfaffbd6c67214_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/8ae/8ae6352483b873219b4023a4aeede69f_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
    </div>
  </div>
  <div>
    <div id="image-comparison4">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/44b/44bd45b92bee48008cbe6c2aaf7ded2b_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/631/631d3a4c9e39d866437b0b931eab2fb1_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
    </div>
  </div>
</div>

1 个回答

Voted

Arbery · Answer 1 · 2024-03-23T08:38:34Z

这与触摸事件无关，而仅与滑块有关。由于在开头添加元素，导致偏移大小计算错误。

let offset = e.pageX - comparison.position().left- 由于它comparison.position().left要大得多，因此将始终等于 0。

不是使用comparison.position().left（从父元素开始计数）而是使用comparison[0].getBoundingClientRect().left（在屏幕内计数）

$(document).ready(function() {
  $('#comparison-carousel').slick({
    infinite: true,
    //swipe: false,
    //swipeToSlide: 'false',
    //accesibility: false,
    //draggable: false,
    touchMove: false,
    slidesToScroll: 1,
    mobileFirst: true,
    dots: true,
    arrows: false,
    responsive: [{
        breakpoint: 0,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 992,
        settings: {
          slidesToShow: 3,
        }
      }
    ]
  });
});


function imageComparison(selector) {

  let comparison = $(selector)
    .addClass("image-comparison")
    .prepend('<div class="image-comparison__before"></div>')
    .append('<button class="image-comparison__slider"></button>');

  let images = comparison
    .find("img")
    .addClass("image-comparison__image")
    .css("max-width", comparison.width());

  let before = comparison
    .find(".image-comparison__before")
    .append(images.eq(0));

  comparison
    .find(".image-comparison__slider")
    .on("dragstart", () => false) // отмена drug&drop
    .on("mousedown", function(e) {
      let slider = $(this);
      let doc = $(document).on("mousemove", (e) => {
        let offset = e.pageX - comparison[0].getBoundingClientRect().left;
        let width = comparison.width();

        // установим границы, чтобы ползунок не выходил
        if (offset < 0) offset = 0;
        if (offset > width) offset = width;

        slider.css("left", offset + "px");
        before.css("width", offset + "px");
      });

      doc.on("mouseup", () => doc.off("mousemove"));
    });
};

imageComparison("#image-comparison");
imageComparison("#image-comparison2");
imageComparison("#image-comparison3");
imageComparison("#image-comparison4");

.img-fluid {
  max-width: 100%;
  height: auto;
}

.image-comparison {
  position: relative;
  overflow: hidden;
  margin-bottom: 70px;
}

#comparison .slick-dots {
  text-align: center;
}

.image-comparison__before {
  position: absolute;
  width: 50%;
  overflow: hidden;
}

.image-comparison__image {
  display: block;
}


/* Ползунок */

.image-comparison__slider {
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  cursor: col-resize;
  outline: none;
  border: none;
}


/* Стрелки */

.image-comparison__slider::before {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: 40px;
  height: 40px;
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAARVBMVEX///8AAACTk5P8/Pze3t7p6emAgIDl5eXh4eGEhISKioqOjo4rKyvs7OwZGRkHBwcfHx8kJCR5eXnY2NigoKAaGhoRERGOZdFBAAADW0lEQVR4nO3cYW/qMAyF4XhrKTBoYWz8/596GWIb0CaZdYuNj877fVIexWkBdU2JMcYYY4wxxhhjjDHGGGOMMcaYW6/eC3h07wfvFTy4lTTeS3hsCwEXnoDYwpWAC89AZOFCwIUXIK5wJeDCHyCq8BcIKrwCYgrXAi683kFI4S0QULgWcOE9EE44AqIJx0Aw4dsYiCWc2EEs4SQQSTgNBBJOnUEoYWYHcYRZIIowN6IwwgIQQ1gCQgiLQAThSxEIICzvIICwBpTOe4X/WRUoi5dZswZWzuADMgbWdzC40AFoK7QfUWOhC9BS6AM0FDoB7YReQDOhG9BK6Ac0En74AY2E7RFdmLYbdGFq3YhWwrTt0YVpu0MXeg2qoTC1e3Rh2sIL09ZhF22FHmfRWJha85uGtfAPH+AO6XXOzIX1K2r437xTVyHGF6YWXli53CAIy4MKIUzdJ7qwdBZBhKnNfplCEaYuR4QRpm6IKOw0y8sQn1vYqNY3PajPLhw0C1xO3fqfXShH1S5GFIosFX/Qjb9MBRCq1rgcncUIQtWgLu+vqBGEMqgGNaJQeRb7iELVTaPpAwqlV53FiELdoC5DClXEq0ENJFQNajMEFEqveRh2GVGoe973+9YfS6i69TfHgELZqYgRhXJUn8VoQt1Z/BrUeMJeNahDQKHsVLsYUSiDivjc/1EyLdQRn7uMUDeoT11OKLvWe2kzlRWKgBALwk+MQS0IZQ9BLAmlRxjUohDiLFaEAINaEcreYRfnfYbsUBHK0Z5YW9Lc2V9urIWysSaaC2W/RReK2BI9hLZXVA+h7Vl0EcrOcFB9hNLbEZ2EhoPqJZSN1S66Cc0+wPkJ5QNdaPXmGHigm9Du3T/wQCeh5dub4IEuQtv3bzkA30yBDkJjoL3Q/hVxs7aoAq13cO6mnr2HAlZ/8w4PrAnNz+D8lYXxd7AiRAAWhRDAkhADWBCuvZc2U1khCjArBBnRlBXC7GBOCAScFiIBJ4U4Z/CrCSHUDk4JwYBjIRpwJIQD3gtX3uuZvwYdeCvEG9F0K0TcwRshJvBKCAr8FaICf4QL74U8rAYdeBHCjmi6CJGBZyHwiKazEBt4EkKP6KnDu/cKHp3De4kZY4wxxhhjjDHGGGOMMcYYY4x99w+juSvDzdAgZgAAAABJRU5ErkJggg==") no-repeat center;
  background-size: cover;
}

.image-comprison__slider:hover,
.image-comprison__slider:focus,
.image-comprison__slider:hover::before,
.image-comprison__slider:focus::before {
  background-color: #ccc;
  outline: none;
  border: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div id="comparison-carousel">
  <div>
    <div id="image-comparison">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e6a/e6a224ebbace87260f550a6a0e152f57_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e75/e75686b6572485306bc0c16bd2b77a5c_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
    </div>
  </div>
  <div>
    <div id="image-comparison2">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/ca7/ca71fad8869b1018ddf573a6a6438391_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/286/286895ba056ca1bbe8eaeb9151335235_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
    </div>
  </div>
  <div>
    <div id="image-comparison3">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/70f/70f72068248b5a9cf4bfaffbd6c67214_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/8ae/8ae6352483b873219b4023a4aeede69f_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
    </div>
  </div>
  <div>
    <div id="image-comparison4">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/44b/44bd45b92bee48008cbe6c2aaf7ded2b_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
      <img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/631/631d3a4c9e39d866437b0b931eab2fb1_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
    </div>
  </div>
</div>

如何修复滑块更改照片的功能，其工作因连接轮播而中断？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何修复滑块更改照片的功能，其工作因连接轮播而中断？

1 个回答

相关问题