jquery - 基于jquery ui slider 值隐藏或显示-6ren

jquery - 基于jquery ui slider 值隐藏或显示

转载作者：行者123 更新时间：2023-12-04 13:35:43

因此，目前我有一个 UI 滑块，它会随着值的变化而更改价目表表单上的数据，我似乎无法弄清楚的问题是，如果某个值达到了，如何将这些框中的一个或多个变灰。

我附上了一张图片来解释当在滑块上选择 1 个用户时我想要实现的目标，以及如果在 UI 滑块上选择了 2-4 个用户，我希望它显示什么。任何帮助将不胜感激我真的很挣扎。

我在photoshop中制作以更好地解释我希望实现的目标，我删除了我尝试使用的代码，因为它不起作用并且不确定我是否以正确的方式进行，我将不胜感激，因为我真的把我的头撞在墙上。

当滑块移动时，我需要将以下 div 框变灰

<div class="pricing-item">
      <div class="pricing-item-inner">
        <div class="pricing-item-content">
          <div class="pricing-item-header">
            <div class="pricing-item-title">Advanced</div>
            <div
              class="pricing-item-price"
              data-price-output='{
                  "0": ["$", "13", "/m"],
                  "1": ["$", "17", "/m"],
                  "2": ["$", "21", "/m"],
                  "3": ["$", "25", "/m"],
                  "4": ["$", "42", "/m"]
                }'
            >
              <span class="pricing-item-price-currency"></span>
              <span class="pricing-item-price-amount"></span>
              <span class="pricing-item-price-after"></span>
            </div>
          </div>
          <div class="pricing-item-features">
            <ul class="pricing-item-features-list">
              <li class="is-checked">Excepteur sint occaecat</li>
              <li class="is-checked">Excepteur sint occaecat</li>
              <li class="is-checked">Excepteur sint occaecat</li>
              <li class="is-checked">Excepteur sint occaecat</li>
              <li class="is-checked">Excepteur sint occaecat</li>
            </ul>
          </div>
        </div>
        <div class="pricing-item-cta">
          <a class="button" href="#">Buy Now</a>
        </div>
      </div>
    </div>

这是 codepen的链接代码: https://codepen.io/daniel-smit/pen/ZEQELRa

任何帮助真的将不胜感激。

最佳答案

为了让它以你想要的方式工作，你必须创建一个覆盖 <div>与 position:absolute每个内部pricing-item标记元素以及其他一些样式以将其定位在其 pricing-item 中 parent ，给 pricing-item相对位置，因此它将成为叠加层的位置引用。还为三个 pricing-item 中的每一个添加唯一的类，我给他们left , middle和 right类，以便我们可以根据滑块 <range> 引用它们输入。

.pricing-item {
  flex-basis: 280px;
  max-width: 280px;
  box-sizing: content-box;
  padding: 12px;
  position: relative;
}

.overlay {
  position: absolute;
  left: 12px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: calc(100% - 24px);
  height: calc(100% - 12px);
  display: none;
  z-index: 1;
}

和内部 handlePricingSlider()功能我添加此代码:

let val = +input.el.value;
document.querySelectorAll(".pricing-item.overlay").forEach((el) => {
  el.style.display = "none";
});
if (val === 0) {
  document
    .querySelectorAll(
      ".pricing-item.left .overlay, .pricing-item.right .overlay"
    )
    .forEach((el) => {
      el.style.display = "block";
    });
} else if (val === 1) {
  document.querySelectorAll(".pricing-item.right .overlay").forEach((el) => {
    el.style.display = "block";
  });
} else if (val > 1) {
  document.querySelectorAll(".pricing-item.right .overlay").forEach((el) => {
    el.style.display = "none";
  });
}

此代码所做的是首先重置/删除覆盖 <div>在所有元素上然后检查 <range>输入值，如果值为 0如果它的 1，它会使左右列变灰。它将使右列变灰，否则布局将被删除。

这是一个片段:

(function () {
  const pricingSliders = document.querySelectorAll(".pricing-slider");

  if (pricingSliders.length > 0) {
    for (let i = 0; i < pricingSliders.length; i++) {
      const pricingSlider = pricingSliders[i];

      // Build the input object
      const pricingInput = {
        el: pricingSlider.querySelector("input"),
      };
      pricingInput.data = JSON.parse(
        pricingInput.el.getAttribute("data-price-input")
      );
      pricingInput.currentValEl = pricingSlider.querySelector(
        ".pricing-slider-value"
      );
      pricingInput.thumbSize = parseInt(
        window
          .getComputedStyle(pricingInput.currentValEl)
          .getPropertyValue("--thumb-size"),
        10
      );

      // Build the output array
      const pricingOutputEls = pricingSlider.parentNode.querySelectorAll(
        ".pricing-item-price"
      );
      const pricingOutput = [];
      for (let i = 0; i < pricingOutputEls.length; i++) {
        const pricingOutputEl = pricingOutputEls[i];
        const pricingOutputObj = {};
        pricingOutputObj.currency = pricingOutputEl.querySelector(
          ".pricing-item-price-currency"
        );
        pricingOutputObj.amount = pricingOutputEl.querySelector(
          ".pricing-item-price-amount"
        );
        pricingOutputObj.after = pricingOutputEl.querySelector(
          ".pricing-item-price-after"
        );
        pricingOutputObj.data = JSON.parse(
          pricingOutputEl.getAttribute("data-price-output")
        );
        pricingOutput.push(pricingOutputObj);
      }

      pricingInput.el.setAttribute("min", 0);
      pricingInput.el.setAttribute(
        "max",
        Object.keys(pricingInput.data).length - 1
      );
      !pricingInput.el.getAttribute("value") &&
        pricingInput.el.setAttribute("value", 0);

      handlePricingSlider(pricingInput, pricingOutput);
      window.addEventListener("input", function () {
        handlePricingSlider(pricingInput, pricingOutput);
      });
    }
  }

  function handlePricingSlider(input, output) {
    // output the current slider value
    if (input.currentValEl)
      input.currentValEl.innerHTML = input.data[input.el.value];

    // update prices
    for (let i = 0; i < output.length; i++) {
      const outputObj = output[i];
      if (outputObj.currency)
        outputObj.currency.innerHTML = outputObj.data[input.el.value][0];
      if (outputObj.amount)
        outputObj.amount.innerHTML = outputObj.data[input.el.value][1];
      if (outputObj.after)
        outputObj.after.innerHTML = outputObj.data[input.el.value][2];
    }
    handleSliderValuePosition(input);
    let val = +input.el.value;
    document.querySelectorAll(".pricing-item .overlay").forEach((el) => {
      el.style.display = "none";
    });
    if (val === 0) {
      document
        .querySelectorAll(
          ".pricing-item.left .overlay, .pricing-item.right .overlay"
        )
        .forEach((el) => {
          el.style.display = "block";
        });
    } else if (val === 1) {
      document
        .querySelectorAll(".pricing-item.right .overlay")
        .forEach((el) => {
          el.style.display = "block";
        });
    } else if (val > 1) {
      document
        .querySelectorAll(".pricing-item.right .overlay")
        .forEach((el) => {
          el.style.display = "none";
        });
    }
  }

  function handleSliderValuePosition(input) {
    const multiplier = input.el.value / input.el.max;
    const thumbOffset = input.thumbSize * multiplier;
    const priceInputOffset =
      (input.thumbSize - input.currentValEl.clientWidth) / 2;
    input.currentValEl.style.left =
      input.el.clientWidth * multiplier - thumbOffset + priceInputOffset + "px";
  }
})();

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.1px;
}

body {
	color: #607090;
	font-size: 1rem;
	margin: 0;
	padding: 48px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
	font-family: "Heebo", sans-serif;
	font-weight: 400;
}

.button {
	display: flex;
	width: 100%;
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	padding: 12px 29px;
	text-decoration: none !important;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #5f48ff;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-radius: 2px;
	cursor: pointer;
	justify-content: center;
	text-align: center;
	letter-spacing: inherit;
	white-space: nowrap;
	transition: background 0.15s ease;
}

input[type="range"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	background: #eef1f6;
	border-radius: 3px;
	height: 6px;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 15px;
	outline: none;
}

input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	background-color: #5f48ff;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 36px;
	width: 36px;
}

input[type="range"]::-moz-range-thumb {
	background-color: #5f48ff;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	height: 36px;
	width: 36px;
}

input[type="range"]::-ms-thumb {
	background-color: #5f48ff;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 36px;
	width: 36px;
}

input[type="range"]::-moz-focus-outer {
	border: 0;
}

.pricing-slider {
	max-width: 280px;
	margin: 0 auto;
}

.form-slider span {
	display: block;
	font-weight: 500;
	text-align: center;
	margin-bottom: 16px;
}

.pricing-slider {
	margin-bottom: 48px;
}

.pricing-slider {
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.pricing-slider input {
	width: 100%;
}

.pricing-slider .pricing-slider-value {
	position: absolute;
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: #909cb5;
	margin-top: 8px;
	--thumb-size: 36px;
}

.pricing-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-right: -12px;
	margin-left: -12px;
	margin-top: -12px;
}

.pricing-item {
	flex-basis: 280px;
	max-width: 280px;
	box-sizing: content-box;
	padding: 12px;
	position: relative;
}

.overlay {
	position: absolute;
	left: 12px;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
	width: calc(100% - 24px);
	height: calc(100% - 12px);
	display: none;
	z-index: 1;
}

.pricing-item-inner {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	box-shadow: 0 8px 16px rgba(46, 52, 88, 0.16);
}

.pricing-item-title {
	font-weight: 500;
}

.pricing-item-price {
	display: inline-flex;
	align-items: baseline;
	font-size: 20px;
}

.pricing-item-price-amount {
	font-size: 36px;
	line-height: 48px;
	font-weight: 500;
	color: #191e2a;
}

.pricing-item-features-list {
	list-style: none;
	padding: 0;
}

.pricing-item-features-list li {
	margin-bottom: 0;
	padding: 14px 0;
	position: relative;
	display: flex;
	align-items: center;
}

.pricing-item-features-list li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	height: 1px;
	background: #e9ecf8;
}

.pricing-item-features-list li::after {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 12px;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2011h14v2H5z%22%20fill%3D%22%239298B8%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	-webkit-box-ordinal-group: 0;
	order: -1;
}

.pricing-item-features-list li.is-checked::after {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Ccircle%20fill%3D%22%2300C2A9%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M10.5%2012.267l-2.5-1.6-1%201.066L10.5%2016%2017%209.067%2016%208z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Pricing Switcher</title>
        <link href="https://fonts.googleapis.com/css?family=Heebo:400,500&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="style.css" />
        <style></style>
    </head>
    <body>
        <div class="pricing">
            <div class="pricing-slider">
                <label class="form-slider">
                    <span>How many users do you have?</span>
                    <input
                        type="range"
                        value="1"
                        data-price-input='{
                "0": "1",
                "1": "2-4",
                "2": "5-9",
                "3": "10-24",
                "4": "25+"                       
              }'
                    />
                </label>
                <div class="pricing-slider-value"></div>
            </div>

            <div class="pricing-items">
                <div class="pricing-item left">
                    <div class="overlay"></div>
                    <div class="pricing-item-inner">
                        <div class="pricing-item-content">
                            <div class="pricing-item-header">
                                <div class="pricing-item-title">Basic</div>
                                <div
                                    class="pricing-item-price"
                                    data-price-output='{
                    "0": ["", "Free", ""],
                    "1": ["$", "13", "/m"],
                    "2": ["$", "17", "/m"],
                    "3": ["$", "21", "/m"],
                    "4": ["$", "25", "/m"]
                  }'
                                >
                                    <span class="pricing-item-price-currency"></span>
                                    <span class="pricing-item-price-amount"></span>
                                    <span class="pricing-item-price-after"></span>
                                </div>
                            </div>
                            <div class="pricing-item-features">
                                <ul class="pricing-item-features-list">
                                    <li class="is-checked">
                                        <div
                                            class="pricing-item-price"
                                            data-price-output='{
                    "0": ["Demo text 1"],
                    "1": ["Demo text 2"],
                    "2": ["Demo text 3"],
                    "3": ["Demo text 4"],
                    "4": ["Demo text 5"]
                  }'
                                        >
                                            <span class="pricing-item-price-currency"></span>
                                        </div>
                                    </li>

                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li>Excepteur sint occaecat</li>
                                    <li>Excepteur sint occaecat</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pricing-item-cta">
                            <a class="button" href="#">Buy Now</a>
                        </div>
                    </div>
                </div>

                <div class="pricing-item middle">
                    <div class="overlay"></div>
                    <div class="pricing-item-inner">
                        <div class="pricing-item-content">
                            <div class="pricing-item-header">
                                <div class="pricing-item-title">Advanced</div>
                                <div
                                    class="pricing-item-price"
                                    data-price-output='{
                      "0": ["$", "13", "/m"],
                      "1": ["$", "17", "/m"],
                      "2": ["$", "21", "/m"],
                      "3": ["$", "25", "/m"],
                      "4": ["$", "42", "/m"]
                    }'
                                >
                                    <span class="pricing-item-price-currency"></span>
                                    <span class="pricing-item-price-amount"></span>
                                    <span class="pricing-item-price-after"></span>
                                </div>
                            </div>
                            <div class="pricing-item-features">
                                <ul class="pricing-item-features-list">
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pricing-item-cta">
                            <a class="button" href="#">Buy Now</a>
                        </div>
                    </div>
                </div>

                <div class="pricing-item right">
                    <div class="overlay"></div>
                    <div class="pricing-item-inner">
                        <div class="pricing-item-content">
                            <div class="pricing-item-header">
                                <div class="pricing-item-title">Enterprise</div>
                                <div
                                    class="pricing-item-price"
                                    data-price-output='{
                      "0": ["$", "22", "/m"],
                      "1": ["$", "33", "/m"],
                      "2": ["$", "42", "/m"],
                      "3": ["$", "88", "/m"],
                      "4": ["$", "105", "/m"]
                    }'
                                >
                                    <span class="pricing-item-price-currency"></span>
                                    <span class="pricing-item-price-amount"></span>
                                    <span class="pricing-item-price-after"></span>
                                </div>
                            </div>
                            <div class="pricing-item-features">
                                <ul class="pricing-item-features-list">
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                    <li class="is-checked">Excepteur sint occaecat</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pricing-item-cta">
                            <a class="button" href="#">Buy Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script></script>
    </body>
</html>

关于jquery - 基于jquery ui slider 值隐藏或显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62165079/

文章推荐： python - 尝试使用 GEKKO 解决此非线性优化，出现此错误

文章推荐： amazon-web-services - 同一区域内的区域之间的 AWS 延迟

文章推荐： html - 如何使下拉100％宽度包含react js中的另一个下拉？

slider - 简单画廊 slider
我正在尝试使用 div 和 javascript 创建一个简单的 slider 。我设置了一个包含六个图像的 div 和一个箭头，每次单击它时，该箭头都会将包含图像的容器拍摄为 528px(每个图像的
slider - 如何使用flexslider设置多个 slider ？
我使用flexslider，当我按照他们网站上的说明操作时，它不适用于多个 slider ，这是代码: 我需要在两个 slider 上都有一个 Controller 导航，说明如下: http://w
javascript - jQuery Slider - 如何根据另一个 slider 制作一组具有最大值的 slider ？
这是一个困难的问题，我一直在努力让它发挥作用。它确实起作用了一半，但我认为逻辑是问题所在。下面我会解释一下情况和问题。情况:想要使用 slider Controller 来选择房间内可以占用的成人、
javascript - 我的 slider 只显示第一个和第三个 slider ，但不显示表格的第二个和第四个 slider
我制作了一个简单的 slider ，它适用于普通表格，但是当我尝试将该 slider 用于我的自定义 Bootstrap 表格时，只有第一个、第三个 slider 出现，而不是第二个和第四个。 var
javascript - 在 Bootstrap slider 上具有相同值的另一个 slider 上滑动相同的 slider
我正在使用 Bootstrap slider http://seiyria.com/bootstrap-slider/对于贷款产生者。这里没问题。但是我必须使用相同的 slider ，一个位于顶部，
javascript - 光滑的 slider 随机自动播放速度，适用于具有相同 slider 类别的更多 slider
我正在使用光滑的 slider 。我在页面上有三个 slider ，它们都有相同的类和光滑的选项。但是，我想要三个不同的灵活“autoplaySpeed”选项，或者为所有三个 slider 分别添加随
javascript - 使用 Bootstrap Slider 一个 Slider 结果是另外两个 Slider 的总和
我试图用 Slider2 和 Slider3 的总和来更新 Slider1 的值，但它只显示 Slider1 或 Slider2 的值，以移动的为准。我在更新 Slider1 的值时犯了一些错误。 H
javascript - 即使 slider 的元素结束，如何使 slider 继续循环(如何包装 slider )？
我使用 css 和 html 以及 jQuery 创建了一个 slider 。该 slider 与下一个按钮配合使用效果很好，但与上一个按钮配合使用效果不佳。假设我在第一张幻灯片上有五个元素，总共有
javascript - jQuery slider : only last slider working on page with multiple sliders
我正在制作一个包含多个 slider 的页面，其中 slider 的数量和选项根据用户的不同而不同。我遇到一个问题，所有 slider 都已创建并显示，但只有最后一个 slider 是可拖动的。简单
jQuery-ui 问题 : . slider ("value")返回 slider 本身而不是 slider 的值
我正在尝试获取 jQuery-UI slider 的当前值在 JavaScript 函数中，它不起作用。如果我这样做 $("#someParticularDOMObject").find(".sl
javascript - JQuery UI 响应式(Reactive) slider (在 slider 更改时同时更新多个 slider )
我正在尝试在 JQuery UI 中的 slider 的 slide 和 change 事件上同时更新多个 slider 。我有如下代码: $(function() { var totalS
javascript - 如何在 jQuery UI Slider 中将 slider 指针移动到 slider 刻度中的特定点？
我正在使用来自 Filament 组的 jQuery UI slider ，它将 SELECT 元素转换为 slider 。它工作正常。现在我想使用 JavaScript 以编程方式将 slider
slider - NIVO SLIDER - 将幻灯片设为链接？
是否可以在 NIVO SLIDER 中将幻灯片设为链接？最佳答案嗯，不知道是不是一样，但是...... 我在 IE 所有版本中的链接都有问题，其他浏览器工作正常，通过添加解决: backgroun
slider - 光滑的 slider 将点更改为单词
在我的项目中，我使用了光滑的 slider 插件(http://kenwheeler.github.io/slick/) 我需要更改单词的默认点导航。单击单词后应更改幻灯片。最佳答案这是更新的代码
slider - nivo slider ，是一种始终显示下一个和上一个箭头的方法吗？
我正在使用 nivo slider (默认主题)，我将上一个和下一个箭头定位在图像旁边(不是在图像顶部)，我想知道是否有一种方法可以始终显示下一个和上一个箭头(现在箭头仅在您将鼠标悬停在图像上时显示)
slider - 拖动 slider 时进行标签更新
我正在使用 Slider在我的 javaFX 项目中，我有一个 Label当我移动 slider 时会更新。我想要 Label在我拖动 Slider 时进行更新不仅在拖放时。这是我的代码: be
slider - 光滑的 slider 不会总是第一次加载
我有一个事件站点，一页上有 3 个光滑的 slider ，通常光滑的 slider 不会初始化，而是我只看到所有的图像，有时如果我刷新它们都开始工作。 https://au.hairandme.com
slider - 根据 slider 死亡的海龟数量
我想让每年一定数量的海龟(由 slider 控制)死亡。到目前为止，我明白了，它可能非常简单，但我似乎无法使其发挥作用。多谢! to hunting let huntedturtles (count
slider - 响应式全屏 slider 中内容相对于行宽度的绝对定位
我有一个带背景图像的全宽 slider 。 slider 高度根据图像进行响应，因此它始终在屏幕的一侧到另一侧显示 100% 的图像。现在我尝试将内容(文本)放置在 slider 内，使其位于内容网
slider - 滑动 slider 空白
我对 Swiper slider 有一些问题。当我滚动到 slider 的末尾时，可以看到一些空白区域。 http://take.ms/siqXj swiper = new Swiper(profil

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 基于jquery ui slider 值隐藏或显示