Question

我有以下

我希望滑块从中间开始，而不是从左侧开始。我试图编辑宽度并使其为185px，但问题是它会破坏滑块，滑块从中间开始但不再向左滑动。

.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 185px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}

感谢任何帮助，谢谢你提前

Answer 1

添加200px的宽度对我有用。

/**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
	position:relative;
	display: inline-block;
	line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
	position: absolute;
	top: 0; bottom: 0; left: 0;
    /* here the change */
	width: 200px;
	max-width: 100%;
	overflow: hidden;
	resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
	content: '';
	position: absolute;
	right: 0; bottom: 0;
	width: 13px; height: 13px;
	padding: 5px;
	background: linear-gradient(-45deg, white 50%, transparent 0);
	background-clip: content-box;
	cursor: ew-resize;
	-webkit-filter: drop-shadow(0 0 2px black);
	filter: drop-shadow(0 0 2px black);
}

.image-slider img {
	user-select: none;
	max-width: 400px;
}

<div class="image-slider">
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" /></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg" />
</div>

Answer 2

CSS调整大小的最小宽度似乎是初始调整大小时的规定宽度 - 因此您无法调整小于指定宽度的大小。

因此，我认为最好的仅限CSS的解决方法是在:active下指出最小宽度 - 它会导致点击时出现一点点断断续续，但在拖动时工作正常：https://jsfiddle.net/uxjczdgk/

.image-slider > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width:50%;
    max-width: 100%;
    overflow: hidden;
    resize: horizontal;
}
.image-slider > div:active {
    width:25px;
}

老实说，你最好使用JS / JQuery解决方案。

如何让这个纯CSS图像比较滑块从中间开始？

2 个答案: