图像滑块标题

问题描述：

我有一个形象的滑块，看起来像这样：图像滑块标题

我的代码如下所示：

光滑CSS：

/* Slider */ 
.slick-slider 
{ 
    position: relative; 

    display: block; 

    -moz-box-sizing: border-box; 
     box-sizing: border-box; 

    -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 

    -webkit-touch-callout: none; 
    -khtml-user-select: none; 
    -ms-touch-action: pan-y; 
     touch-action: pan-y; 
    -webkit-tap-highlight-color: transparent; 
} 

.slick-list 
{ 
    position: relative; 

    display: block; 
    overflow: hidden; 

    margin: 0; 
    padding: 0; 
} 
.slick-list:focus 
{ 
    outline: none; 
} 
.slick-list.dragging 
{ 
    cursor: pointer; 
    cursor: hand; 
} 

.slick-slider .slick-track, 
.slick-slider .slick-list 
{ 
    -webkit-transform: translate3d(0, 0, 0); 
     -moz-transform: translate3d(0, 0, 0); 
     -ms-transform: translate3d(0, 0, 0); 
     -o-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
} 

.slick-track 
{ 
    position: relative; 
    top: 0; 
    left: 0; 

    display: block; 
} 
.slick-track:before, 
.slick-track:after 
{ 
    display: table; 

    content: ''; 
} 
.slick-track:after 
{ 
    clear: both; 
} 
.slick-loading .slick-track 
{ 
    visibility: hidden; 
} 

.slick-slide 
{ 
    display: none; 
    float: left; 

    height: 100%; 
    min-height: 1px; 
} 
[dir='rtl'] .slick-slide 
{ 
    float: right; 
} 
.slick-slide img 
{ 
    display: block; 
} 
.slick-slide.slick-loading img 
{ 
    display: none; 
} 
.slick-slide.dragging img 
{ 
    pointer-events: none; 
} 
.slick-initialized .slick-slide 
{ 
    display: block; 
} 
.slick-loading .slick-slide 
{ 
    visibility: hidden; 
} 
.slick-vertical .slick-slide 
{ 
    display: block; 

    height: auto; 

    border: 1px solid transparent; 
} 
.slick-arrow.slick-hidden { 
    display: none; 
}

油滑theme.css：

@charset 'UTF-8'; 
/* Slider */ 
.slick-loading .slick-list 
{ 
    background: #fff url('./ajax-loader.gif') center center no-repeat; 
} 

/* Icons */ 
@font-face 
{ 
    font-family: 'slick'; 
    font-weight: normal; 
    font-style: normal; 

    src: url('./fonts/slick.eot'); 
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); 
} 
/* Arrows */ 
.slick-prev, 
.slick-next 
{ 
    font-size: 0; 
    line-height: 0; 

    position: absolute; 
    top: 50%; 

    display: block; 

    width: 20px; 
    height: 20px; 
    margin-top: -10px; 
    padding: 0; 

    cursor: pointer; 

    color: transparent; 
    border: none; 
    outline: none; 
    background: transparent; 
} 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus 
{ 
    color: transparent; 
    outline: none; 
    background: transparent; 
} 
.slick-prev:hover:before, 
.slick-prev:focus:before, 
.slick-next:hover:before, 
.slick-next:focus:before 
{ 
    opacity: 1; 
} 
.slick-prev.slick-disabled:before, 
.slick-next.slick-disabled:before 
{ 
    opacity: .25; 
} 

.slick-prev:before, 
.slick-next:before 
{ 
    font-family: 'slick'; 
    font-size: 20px; 
    line-height: 1; 

    opacity: .75; 
    color: white; 

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.slick-prev 
{ 
    left: -25px; 
} 
[dir='rtl'] .slick-prev 
{ 
    right: -25px; 
    left: auto; 
} 
.slick-prev:before 
{ 
    content: '←'; 
} 
[dir='rtl'] .slick-prev:before 
{ 
    content: '→'; 
} 

.slick-next 
{ 
    right: -25px; 
} 
[dir='rtl'] .slick-next 
{ 
    right: auto; 
    left: -25px; 
} 
.slick-next:before 
{ 
    content: '→'; 
} 
[dir='rtl'] .slick-next:before 
{ 
    content: '←'; 
} 

/* Dots */ 
.slick-slider 
{ 
    margin-bottom: 30px; 
} 

.slick-dots 
{ 
    position: absolute; 
    bottom: -45px; 

    display: block; 

    width: 100%; 
    padding: 0; 

    list-style: none; 

    text-align: center; 
} 
.slick-dots li 
{ 
    position: relative; 

    display: inline-block; 

    width: 20px; 
    height: 20px; 
    margin: 0 5px; 
    padding: 0; 

    cursor: pointer; 
} 
.slick-dots li button 
{ 
    font-size: 0; 
    line-height: 0; 

    display: block; 

    width: 20px; 
    height: 20px; 
    padding: 5px; 

    cursor: pointer; 

    color: transparent; 
    border: 0; 
    outline: none; 
    background: transparent; 
} 
.slick-dots li button:hover, 
.slick-dots li button:focus 
{ 
    outline: none; 
} 
.slick-dots li button:hover:before, 
.slick-dots li button:focus:before 
{ 
    opacity: 1; 
} 
.slick-dots li button:before 
{ 
    font-family: 'slick'; 
    font-size: 6px; 
    line-height: 20px; 

    position: absolute; 
    top: 0; 
    left: 0; 

    width: 20px; 
    height: 20px; 

    content: '•'; 
    text-align: center; 

    opacity: .25; 
    color: black; 

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.slick-dots li.slick-active button:before 
{ 
    opacity: .75; 
    color: black; 
}

Then theres the HTML：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Slider demo</title> 
    <link rel="stylesheet" type="text/css" href="slick/slick.css" /> 
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" /> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style> 
    * { 
     box-sizing: border-box; 
     margin: 0; 
    } 

    body { 
     background: #cc0099; 
    } 

    .slider { 
     width: 80%; 
     /*height: 60%;*/ 
     margin: 20px auto; 
     background: white; 
     text-align: center; 
    } 

    h3 { 
     padding: 180px 20px; 
     background: gray; 
     margin: 10px; 
    } 

    .slider div img { 
     width: 100%; 
     /*border: 5px solid white;*/ 
     /*height: auto;*/ 
     margin: 0; 
     /*display: none;*/ 
     /*visibility: hidden;*/ 
     display: block; 
    } 
    </style> 
</head> 

<body> 
    <div class="slider"> 
     <div> 

      <img src="img/1.jpg" alt=""> 
      <!-- <img data-lazy="img/1.jpg" /> --> 

     </div> 

     <div> 
      <!-- <img data-lazy="img/3.jpg" /> --> 
      <img src="img/3.jpg" alt=""> 
     </div> 
     <div> 
      <!-- <img data-lazy="img/4.jpg" /> --> 
      <img src="img/4.jpg" alt=""> 
     </div> 
     <div> 
      <!-- <img data-lazy="img/5.jpg" /> --> 
      <img src="img/5.jpg" alt=""> 
     </div> 
    </div> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="slick/slick.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.slider').slick({ 
      // lazyLoad: 'ondemand', 
      dots: true, 
      infinite: true 
       // slidesToShow: 1, 
       // slidesToScroll: 1, 
       // adaptiveHeight: true 
     }); 
     // $('.slider div img').css('visibility':'visible'); 
    }); 
    </script> 
</body> 

</html>

我试着在其中一张幻灯片之间添加一个p标签。像这样：

<div class="slider"> 
      <div> 
       <p>test</p> 
       <img src="img/1.jpg" alt=""> 
       <!-- <img data-lazy="img/1.jpg" /> --> 


      </div>

但我得到这个!:

后来我尝试在透明背景一个div，但也不能工作。

我只想添加一个标题到一张幻灯片，有没有办法做到这一点而不与js混淆？

由于提前，

-Kevin

嗨凯文。我建议在jsfiddle中重新创建它 - 这将使我们更容易玩耍并提供帮助:) – Frits

我很想但我该如何做到这一点，我有很多文件夹中的文件。并且我的文档与这些文件夹相关联。 @Frits – Kevin

只上传你需要重新创建的问题，我们不需要整个网站，只是复制问题。 – Frits

答

你在你的CSS在白色背景上的.slider。如果将其删除，则可以不改变您的代码，并且您的文本将在没有白色背景的情况下出现。

如果你想覆盖图像上的文字，那么我可以建议给段落标签一个负边缘顶端

答

放眼使用，每格可以有你喜欢的任何HTML：

http://kenwheeler.github.io/slick/#getting-started

$(document).ready(function() { 
 
     console.log("TEST"); 
 
     
 
     $('.slider').slick({ 
 
      // lazyLoad: 'ondemand', 
 
      dots: true, 
 
      infinite: true 
 
       // slidesToShow: 1, 
 
       // slidesToScroll: 1, 
 
       // adaptiveHeight: true 
 
     }); 
 
     // $('.slider div img').css('visibility':'visible'); 
 
    });

/* Slider */ 
 
.slick-slider 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 

 
    -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 

 
    -webkit-user-select: none; 
 
     -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 

 
    -webkit-touch-callout: none; 
 
    -khtml-user-select: none; 
 
    -ms-touch-action: pan-y; 
 
     touch-action: pan-y; 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 

 
.slick-list 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 
    overflow: hidden; 
 

 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slick-list:focus 
 
{ 
 
    outline: none; 
 
} 
 
.slick-list.dragging 
 
{ 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 

 
.slick-slider .slick-track, 
 
.slick-slider .slick-list 
 
{ 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
     -moz-transform: translate3d(0, 0, 0); 
 
     -ms-transform: translate3d(0, 0, 0); 
 
     -o-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
} 
 

 
.slick-track 
 
{ 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 

 
    display: block; 
 
} 
 
.slick-track:before, 
 
.slick-track:after 
 
{ 
 
    display: table; 
 

 
    content: ''; 
 
} 
 
.slick-track:after 
 
{ 
 
    clear: both; 
 
} 
 
.slick-loading .slick-track 
 
{ 
 
    visibility: hidden; 
 
} 
 

 
.slick-slide 
 
{ 
 
    display: none; 
 
    float: left; 
 

 
    height: 100%; 
 
    min-height: 1px; 
 
} 
 
[dir='rtl'] .slick-slide 
 
{ 
 
    float: right; 
 
} 
 
.slick-slide img 
 
{ 
 
    display: block; 
 
} 
 
.slick-slide.slick-loading img 
 
{ 
 
    display: none; 
 
} 
 
.slick-slide.dragging img 
 
{ 
 
    pointer-events: none; 
 
} 
 
.slick-initialized .slick-slide 
 
{ 
 
    display: block; 
 
} 
 
.slick-loading .slick-slide 
 
{ 
 
    visibility: hidden; 
 
} 
 
.slick-vertical .slick-slide 
 
{ 
 
    display: block; 
 

 
    height: auto; 
 

 
    border: 1px solid transparent; 
 
} 
 
.slick-arrow.slick-hidden { 
 
    display: none; 
 
} 
 

 
@charset 'UTF-8'; 
 
/* Slider */ 
 
.slick-loading .slick-list 
 
{ 
 
    background: #fff url('./ajax-loader.gif') center center no-repeat; 
 
} 
 

 
/* Icons */ 
 
@font-face 
 
{ 
 
    font-family: 'slick'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 

 
    src: url('./fonts/slick.eot'); 
 
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); 
 
} 
 
/* Arrows */ 
 
.slick-prev, 
 
.slick-next 
 
{ 
 
    font-size: 0; 
 
    line-height: 0; 
 

 
    position: absolute; 
 
    top: 50%; 
 

 
    display: block; 
 

 
    width: 20px; 
 
    height: 20px; 
 
    margin-top: -10px; 
 
    padding: 0; 
 

 
    cursor: pointer; 
 

 
    color: transparent; 
 
    border: none; 
 
    outline: none; 
 
    background: transparent; 
 
} 
 
.slick-prev:hover, 
 
.slick-prev:focus, 
 
.slick-next:hover, 
 
.slick-next:focus 
 
{ 
 
    color: transparent; 
 
    outline: none; 
 
    background: transparent; 
 
} 
 
.slick-prev:hover:before, 
 
.slick-prev:focus:before, 
 
.slick-next:hover:before, 
 
.slick-next:focus:before 
 
{ 
 
    opacity: 1; 
 
} 
 
.slick-prev.slick-disabled:before, 
 
.slick-next.slick-disabled:before 
 
{ 
 
    opacity: .25; 
 
} 
 

 
.slick-prev:before, 
 
.slick-next:before 
 
{ 
 
    font-family: 'slick'; 
 
    font-size: 20px; 
 
    line-height: 1; 
 

 
    opacity: .75; 
 
    color: white; 
 

 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.slick-prev 
 
{ 
 
    left: -25px; 
 
} 
 
[dir='rtl'] .slick-prev 
 
{ 
 
    right: -25px; 
 
    left: auto; 
 
} 
 
.slick-prev:before 
 
{ 
 
    content: '←'; 
 
} 
 
[dir='rtl'] .slick-prev:before 
 
{ 
 
    content: '→'; 
 
} 
 

 
.slick-next 
 
{ 
 
    right: -25px; 
 
} 
 
[dir='rtl'] .slick-next 
 
{ 
 
    right: auto; 
 
    left: -25px; 
 
} 
 
.slick-next:before 
 
{ 
 
    content: '→'; 
 
} 
 
[dir='rtl'] .slick-next:before 
 
{ 
 
    content: '←'; 
 
} 
 

 
/* Dots */ 
 
.slick-slider 
 
{ 
 
    margin-bottom: 30px; 
 
} 
 

 
.slick-dots 
 
{ 
 
    position: absolute; 
 
    bottom: -45px; 
 

 
    display: block; 
 

 
    width: 100%; 
 
    padding: 0; 
 

 
    list-style: none; 
 

 
    text-align: center; 
 
} 
 
.slick-dots li 
 
{ 
 
    position: relative; 
 

 
    display: inline-block; 
 

 
    width: 20px; 
 
    height: 20px; 
 
    margin: 0 5px; 
 
    padding: 0; 
 

 
    cursor: pointer; 
 
} 
 
.slick-dots li button 
 
{ 
 
    font-size: 0; 
 
    line-height: 0; 
 

 
    display: block; 
 

 
    width: 20px; 
 
    height: 20px; 
 
    padding: 5px; 
 

 
    cursor: pointer; 
 

 
    color: transparent; 
 
    border: 0; 
 
    outline: none; 
 
    background: transparent; 
 
} 
 
.slick-dots li button:hover, 
 
.slick-dots li button:focus 
 
{ 
 
    outline: none; 
 
} 
 
.slick-dots li button:hover:before, 
 
.slick-dots li button:focus:before 
 
{ 
 
    opacity: 1; 
 
} 
 
.slick-dots li button:before 
 
{ 
 
    font-family: 'slick'; 
 
    font-size: 6px; 
 
    line-height: 20px; 
 

 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 

 
    width: 20px; 
 
    height: 20px; 
 

 
    content: '•'; 
 
    text-align: center; 
 

 
    opacity: .25; 
 
    color: black; 
 

 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
.slick-dots li.slick-active button:before 
 
{ 
 
    opacity: .75; 
 
    color: black; 
 
} 
 
    * { 
 
     box-sizing: border-box; 
 
     margin: 0; 
 
    } 
 

 
    body { 
 
     background: #cc0099; 
 
    } 
 

 
    .slider { 
 
     width: 80%; 
 
     /*height: 60%;*/ 
 
     margin: 20px auto; 
 
     background: white; 
 
     text-align: center; 
 
    } 
 

 
    h3 { 
 
     padding: 180px 20px; 
 
     background: gray; 
 
     margin: 10px; 
 
    } 
 

 
    .slider div img { 
 
     width: 100%; 
 
     /*border: 5px solid white;*/ 
 
     /*height: auto;*/ 
 
     margin: 0; 
 
     /*display: none;*/ 
 
     /*visibility: hidden;*/ 
 
     display: block; 
 
    } 
 

 

 
.slide-text { 
 
    background: #cc0099; 
 
    font-weight: bold; 
 
    font-size: 15px; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 

 
<div class="slider"> 
 
     <div> 
 

 
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt=""> 
 
      <!-- <img data-lazy="img/1.jpg" /> --> 
 
      <div class="slide-text">Text for slide 1</div> 
 
     </div> 
 

 
     <div> 
 
      <!-- <img data-lazy="img/3.jpg" /> --> 
 
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" alt=""> 
 
      <div class="slide-text">Text for slide 2</div> 
 
     </div> 
 
     <div> 
 
      <!-- <img data-lazy="img/4.jpg" /> --> 
 
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" alt=""> 
 
      <div class="slide-text">Text for slide 3</div> 
 
     </div> 
 
    </div>

是的，我在我的例子中，但我不想在文本上的白色背景。 – Kevin

那么只需使用CSS来改变它。将编辑来演示。 –

有你去。我在文本div中添加了一类“.slide-text”，但您可以将其更改为任何内容。它的规则是在css贴出的底部，所以可以将该颜色或字体样式等更改为任何你想要的。 –

答

我会暗示st把它留给CSS来避免臃肿的JS。试一试。

HTML：

<div class="slide slide--has-caption slick-slide"> 
    <img .../> 
    <div class="slide__caption">This is my caption</div> 
</div>

CSS：

.slide { 
    position: relative; 
} 

.slide__caption { 
    bottom: 0; 
    min-height: 80px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
    z-index: 2; 
}

你刚刚从gausarts的第二个评论中复制并粘贴解决方案，https://github.com/kenwheeler/slick/issues/282？如果是这样，请给出您提供给合适人员的解决方案的作者身份。 – robertjewell

相关推荐