纯 Css Slider 无法向每张幻灯片添加文本

Posted 2023-05-08

【中文标题】纯 Css Slider 无法向每张幻灯片添加文本

【英文标题】：Pure Css Slider cannot add text to each slide

【发布时间】：2021-05-18 22:23:00

【问题描述】：

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

Codepen

这是一个css的sn-p

 .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;

【问题讨论】：

您希望以何种方式将文本附加到每个幻灯片元素？您是否希望在每张幻灯片的底部有一个文本元素作为描述或什么？

@dalelandry 我在页面中心寻找文本。每张幻灯片都会出现新的文本...

【参考方案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>

【讨论】：

你能帮我做一支密码笔吗？我是一个新手，我可以下载和研究代码。谢谢

只需复制粘贴到您的笔即可：)