Question

我正在研究Mangoapps。我需要创建一个滑动横幅。但是我必须这样做仅使用CSS和html，没有为横幅写js的规定（包括对任何js文件的引用）。

我找到了这两种类型的纯CSS滑块：

使用<label>标记进行导航，例如http://codeconvey.com/Tutorials/cssSlider/。 <label>与Mangoapps无法正常工作，已经要求开发团队解决，但尚无答案。
使用<nav> / <a>。 问题在于，每当我点击下一个/上拉幻灯片，但向上滚动到顶部。我理解原因，但我想在点击时修复它的位置。这是jsfiddle：https://jsfiddle.net/thisisdev4u/8s7u12jr/

让我知道，如果可以解决这个问题，或者是否有任何其他方法可以制作带有导航箭头/点的基于CSS的纯滑块。

Answer 1

我制作了这个带有2个开关替代品的纯CSS旋转木马滑块：标签箭头和单选按钮。

我无法在 mangoapps 上对其进行测试，因此如果radio按钮无法在那里工作，您可以使用{{1}隐藏它们如果display: none不能在那里工作，你可以简单地删除它们。

Codepen 1

Codepen 2 - 无限动画滚动的替代版本，直到检查任何选项为止;

＆＃13;

labels

＆＃13;

body {
  margin: 0;
  background: lavender;
}

#container {
  text-align: center;
}

#pic1, #pic2, #pic3, #pic4 {
  position: relative;
  display: inline-block;
  width: 640px;
  height: 423px;
  margin: 0;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
}

input[type=radio] {
  margin-top: 10px;
  margin-bottom: 10px;
}

#sel1:checked ~ #canvas #pic1 {
margin-left: 0%;
}

#sel2:checked ~ #canvas #pic1 {
margin-left: -100%; 
}

#sel3:checked ~ #canvas #pic1 {
margin-left: -200%; 
}

#sel4:checked ~ #canvas #pic1 {
margin-left: -300%; 
}

.left {
  position: absolute;
  top: 40%;
  left: 5%;
  z-index: 200;
}

.right {
  position: absolute;
  top: 40%;
  right: 5%;
  z-index: 200;
}

#canvas {
  left: 0;
  right: 0;
  margin: auto;
  width: 640px;
  height: 423px;
  white-space: nowrap;
  overflow: hidden;
  outline: 2px solid black;
}

.left, .right {
display: none;
}

#radio4_left, #radio2_right {
  display: inline-block; 
}

#sel2:checked ~ label#radio4_left,  #sel2:checked ~ label#radio2_right, #sel3:checked ~ label#radio4_left,  #sel3:checked ~ label#radio2_right, #sel4:checked ~ label#radio4_left,  #sel4:checked ~ label#radio2_right {
  display: none;
}

#sel1:checked ~ label#radio4_left, #sel1:checked ~ label#radio2_right {
display: inline-block;
}

#sel2:checked ~ label#radio1_left, #sel2:checked  ~ label#radio3_right {
display: inline-block;
}

#sel3:checked ~ label#radio2_left, #sel3:checked  ~ label#radio4_right {
display: inline-block;
}

#sel4:checked ~ label#radio3_left, #sel4:checked  ~ label#radio1_right {
display: inline-block;
}

＆＃13;

纯CSS滑块滚动点击导航

1 个答案: