纯 Css Slider 无法为每张幻灯片添加文字

Question

I have been trying to fix this pure CSS slider and i am not able to attach text to the center of the slider and custom text for each slide..i tried using absolute position but it didn't work. 请帮我解决这个问题。 谢谢

密码笔

这是 Css 的片段

 .slide {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 100%;
  background: #ccc;
  text-align: center;
  line-height: 300px;
  background-size: cover;
  background-position: 50% 50%;
  color: #fff;
  -webkit-transform: translate3d(0px, 0px, 0px);
  visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

Answer 1

如果要使元素居中，则需要使用 pourcentage。

只需在您的 li 中添加一个标签即可为每张幻灯片显示不同的文本。

 $.global = new Object(); $.global.item = 1; $.global.total = 0; $(document).ready(function() { var WindowWidth = $(window).width(); var SlideCount = $('#slides li').length; var SlidesWidth = SlideCount * WindowWidth; $.global.item = 0; $.global.total = SlideCount; $('.slide').css('width',WindowWidth+'px'); $('#slides').css('width',SlidesWidth+'px'); $("#slides li:nth-child(1)").addClass('alive'); $('#left').click(function() { Slide('back'); }); $('#right').click(function() { Slide('forward'); }); }); function Slide(direction) { if (direction == 'back') { var $target = $.global.item - 1; } if (direction == 'forward') { var $target = $.global.item + 1; } if ($target == -1) { DoIt($.global.total-1); } else if ($target == $.global.total) { DoIt(0); } else { DoIt($target); } } function DoIt(target) { var $windowwidth = $(window).width(); var $margin = $windowwidth * target; var $actualtarget = target+1; $("#slides li:nth-child("+$actualtarget+")").addClass('alive'); $('#slides').css('transform','translate3d(-'+$margin+'px,0px,0px)'); $.global.item = target; $('#count').html($.global.item+1); }

 body::-webkit-scrollbar { display: none; } #slide-window { position:fixed; width:100%; height:100%; overflow:hidden; top:0px; left:0px; } #slides { height:100%; position:absolute; margin:0px; padding:0px; -webkit-transform: translate3d(0px,0px,0px); transform: translate3d(0px,0px,0px); transition: all 0.66s ease; -webkit-transition: all 0.66s ease; }.slide { list-style:none; position: relative; float: left; margin: 0; padding: 0; width: 500px; height: 100%; background: #ccc; text-align: center; line-height: 300px; background-size: cover; background-position:50% 50%; color:#fff; -webkit-transform: translate3d(0px,0px,0px); visibility:hidden; -webkit-transform-style: preserve-3d; }.slide span { font-weight:bold; font-size:200%; text-shadow: 0 0 10px #666 }.alive { visibility:visible; }.nav { position:fixed; z-index:9; top:50%; cursor:pointer; color:#fff; opacity:0.7; transition: all 0.66s ease; -webkit-transition: all 0.66s ease; }.nav:hover { opacity:1.0; } #left { left:3%; } #right { right:3%; } #credit { position:fixed; top: 40%; left: 43%; color:#eaeaea; font-family: 'Courier New', Courier, monospace; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div id="slide-window"> <ol id="slides" start="1"> <li class="slide color-0 alive" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-JSxf5Nm/0/X3/Burning-Man-Day-6%20%28202%20of%201606%29-X3.jpg);"><span>Text 1</span></li> <li class="slide color-1" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KMjVHRd/0/X3/Andramada-X3.jpg);"><span>Text 2</span></li> <li class="slide color-2" style="background-image:url(http://stuckincustoms.smugmug.com/Burning-Man/i-dd9xmfn/0/X3/The%20Steamy%20Car-X3.jpg);"><span>Text 3</span></li> <li class="slide color-3" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KscS8CF/0/X3/Burning-Man-Day-1%20%281006%20of%201210%29-X3.jpg);"><span>Text 4</span></li> <li class="slide color-4" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-jQcPqJb/0/X3/Burning-Man-Last-Day-Night%20%28151%20of%201120%29-X3.jpg);"><span>Text 5</span></li> </ol> <span class="nav fa fa-chevron-left fa-3x" id="left"></span> <span class="nav fa fa-chevron-right fa-3x" id="right"></span> <div id="credit">Photography by Trey Ratcliff<br>Slide No.<span id="count">1</span><br><span id="zoom">zoom</span></div> </div>