Pure Css Slider 无法在每张幻灯片上添加文本

问题描述

我一直在尝试修复这个纯 CSS 滑块，但我无法将文本附加到滑块的中心和每张幻灯片的自定义文本..我尝试使用绝对位置，但没有奏效。 请帮我解决这个问题。 谢谢

Codepen

这是一个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;
}

解决方法

如果要使元素居中，则需要使用 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);
  transform: translate3d(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);
  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>