如何根据每张幻灯片的高度上下移动滑块上的导航按钮？

时间：2018-07-02 18:03:43

标签： javascript html css responsive-design slider

如下所示，单选按钮静态地位于底部。使它们动态化的最佳方法是什么，以便每张幻灯片始终与文本保持相等的距离？

我被困在导航div的处理方式上，以使其能够响应幻灯片高度（该特定幻灯片上有多少文字）：

.csslider {
  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  text-align: center;
  position: relative;
  color: #555;
}
.csslider > input {
  display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider > ul {
  position: relative;
  width: 50%;
  height: 170px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
.csslider > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider > .navigation {
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 2px;
  padding: 5px;
  background: #555;
}
.csslider > .navigation label:hover:after {
  opacity: 1;
}
.csslider > .navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -3px;
  margin-top: -3px;
  background: #8dc124;
  border-radius: 50%;
  padding: 3px;
  opacity: 0;
}
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider.inside .navigation {
  bottom: -50px;
  margin-bottom: 10px;
}
.csslider.inside .navigation label {
background-color: #555;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after {
  opacity: 1;
}
.csslider > .arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #555;
  cursor: pointer;
  -moz-transition: .15s;
  -o-transition: .15s;
  -webkit-transition: .15s;
  transition: .15s;
}
.csslider > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #8dc124;
  margin: 0 0px;
}
.csslider > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6) {
  display: block;
  left: 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
  display: block;
  right: 0;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
<!DOCTYPE html>
<html>
<head>
    <title>Slider test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider1" class="csslider infinity inside">
    <input type="radio" name="slides" id="slides_1" checked />
    <input type="radio" name="slides" id="slides_2" />
    <input type="radio" name="slides" id="slides_3" />
    <input type="radio" name="slides" id="slides_4" />
    <input type="radio" name="slides" id="slides_5" />
    <input type="radio" name="slides" id="slides_6" />
    <ul>
        <li>
            <p id="solutionsTitle">Title</p>
             Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibu beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur sdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut.
        </li>
        <li>
            <p id="solutionsTitle">Title1</p>
               Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
        </li>
        <li>
            <p id="solutionsTitle">Title2</p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
        </li>
        <li>
            <p id="solutionsTitle">Title 3</p>
Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
        </li>
        <li>
            <p id="solutionsTitle">Title 4</p>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut
        </li>
        <li>
             <p id="solutionsTitle">Title 5</p>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut
        </li>
    </ul>
    <div class="arrows">
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_5"></label>
        <label for="slides_6"></label>
    </div>
    <div class="navigation">
        <div>
            <label for="slides_1"></label>
            <label for="slides_2"></label>
            <label for="slides_3"></label>
            <label for="slides_4"></label>
            <label for="slides_5"></label>
            <label for="slides_6"></label>
        </div>
    </div>
</div>
</body>
</html>

CodePen

这是一个jsfiddle链接http://jsfiddle.net/reqzxj6s/

1 个答案:

答案 0 :(得分：1)

我认为没有Leo Van Deuren所说的纯CSS解决方案。我使用了非常简单的jquery代码，并更改了一些CSS来解决您的问题。我希望这可以帮助你。检查它：https://jsfiddle.net/1jb6rxez/10

HTML 

$(document).ready(function(){

  // init situation
  $("#slides_1").prop('checked', true);
  var num="1";

  checkHeight();

  $("label").click(function(){
    num=$(this).attr("for").replace('slides_','');
    checkHeight();
  })

  $(window).resize(function(){
    //check ul height if I resize my browser
    checkHeight();
  })

  function checkHeight(){
    $("ul").css({"height":$("li:nth-child("+num+")").height()});
  }
})
.csslider {
	-moz-perspective: 1300px;
	-ms-perspective: 1300px;
	-webkit-perspective: 1300px;
	perspective: 1300px;
	text-align: center;
	position: relative;
	color: #555;
}
.csslider > input {
	display: none;
}

.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
	margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
	margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
	margin-left: -300%;
	
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
	margin-left: -200%;

}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
	margin-left: -100%;
	
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
	margin-left: 0%;
}

.csslider > ul {
	position: relative;
	display: inline-block;
	width: 50%;
	z-index: 1;
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	padding: 0;
	clear: both;
	overflow: hidden;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.csslider > ul > li {
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	font-size: 15px;
	font-size: initial;
	line-height: normal;

	-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	vertical-align: top;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	white-space: normal;
}
.csslider > ul > li.scrollable {
	overflow-y: scroll;
}
.csslider > .navigation {
	position: static;
	/*position: absolute;*/
	bottom: -10px;
	left: 50%;
	z-index: 10;
	margin-bottom: -10px;
	font-size: 0;
	line-height: 0;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*.csslider > .navigation > div {
	margin-left: -100%;
}*/
.csslider > .navigation label {
	position: relative;
	display: inline-block;
	cursor: pointer;
	border-radius: 50%;
	margin: 0 2px;
	padding: 5px;
	background: #555;
}
.csslider > .navigation label:hover:after {
	opacity: 1;
}
.csslider > .navigation label:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3px;
	margin-top: -3px;
	background: #8dc124;
	border-radius: 50%;
	padding: 3px;
	opacity: 0;
}
.csslider > .arrows {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.csslider.inside .navigation {
	bottom: -50px;
	margin-bottom: 10px;
}
.csslider.inside .navigation label {
	background-color: #555;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after, 
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after, 
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after, 
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after, 
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after, 
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after {
	opacity: 1;
}
.csslider > .arrows {
	position: absolute;
	left: -31px;
	top: 50%;
	width: 100%;
	height: 26px;
	padding: 0 31px;
	z-index: 0;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
.csslider > .arrows label {
	display: none;
	position: absolute;
	top: -50%;
	padding: 13px;
	box-shadow: inset 2px -2px 0 1px #555;
	cursor: pointer;
	-moz-transition: .15s;
	-o-transition: .15s;
	-webkit-transition: .15s;
	transition: .15s;
}
.csslider > .arrows label:hover {
	box-shadow: inset 3px -3px 0 2px #8dc124;
	margin: 0 0px;
}
.csslider > .arrows label:before {
	content: '';
	position: absolute;
	top: -100%;
	left: -100%;
	height: 300%;
	width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type, 
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0), 
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1), 
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2), 
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3), 
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4), 
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5), 
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6) {
	display: block;
	left: 0;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type, 
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2), 
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3), 
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4), 
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5), 
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
	display: block;
	right: 0;
	-moz-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div id="slider1" class="csslider infinity inside">
      <input type="radio" name="slides" id="slides_1" checked />
      <input type="radio" name="slides" id="slides_2" />
      <input type="radio" name="slides" id="slides_3" />
      <input type="radio" name="slides" id="slides_4" />
      <input type="radio" name="slides" id="slides_5" />
      <input type="radio" name="slides" id="slides_6" />
      <ul>
        <li>
          <p id="solutionsTitle">Title</p>
          Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibu beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur sdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut. </li>
        <li>
          <p id="solutionsTitle">Title1</p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam </li>
        <li>
          <p id="solutionsTitle">Title2</p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, </li>
        <li>
          <p id="solutionsTitle">Title 3</p>
          Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, </li>
        <li>
          <p id="solutionsTitle">Title 4</p>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut </li>
        <li>
          <p id="solutionsTitle">Title 5</p>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut </li>
      </ul>
      <div class="arrows">
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_5"></label>
        <label for="slides_6"></label>
      </div>
      <div class="navigation">
        <div>
          <label for="slides_1"></label>
          <label for="slides_2"></label>
          <label for="slides_3"></label>
          <label for="slides_4"></label>
          <label for="slides_5"></label>
          <label for="slides_6"></label>
        </div>
      </div>
    </div>
</body>

相关问题
最新问题