Image Slider Bildunterschrift

ich ein Bild Schieber haben, die wie folgt aussieht: Image Slider Bildunterschrift

Meine Codes wie folgt aussehen:

Slick 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; 
}

Slick-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; 
}

Dann gibt es die 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>

Ich habe versucht, ein P-Tag zwischen einer der Folien hinzuzufügen. So:

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


      </div>

Aber ich diese wieder !:

Später versuchte ich es in einem div mit einem transparenten Hintergrund, aber das hat nicht funktioniert.

Ich möchte nur eine Beschriftung zu einer einzelnen Folie hinzufügen, gibt es eine Möglichkeit, dies zu tun, ohne mit der js zu stören?

Vielen Dank im Voraus,

-Kevin

Quelle

2016-05-13 Kevin

Hallo Kevin einen negativen margin-top empfehlen geben. Ich würde vorschlagen, dies in jsfiddle neu zu erstellen - es wird es für uns einfacher zu spielen und helfen :) – Frits

Ich würde gerne, aber wie kann ich das tun, habe ich viele Dateien in Ordnern. und mein Dokument ist mit diesen Ordnern verknüpft. @Frits – Kevin

Nur hochladen, was Sie brauchen, um das Problem neu zu erstellen, wir brauchen nicht die gesamte Website, nur eine Replikation des Problems. – Frits

Sie haben einen weißen Hintergrund auf Ihrem .slider in Ihrem CSS. Wenn Sie es entfernen, können Sie Ihren Code unberührt lassen und Ihr <p> Text wird ohne den weißen Hintergrund angezeigt.

Sollten Sie den Text auf dem Bild zu überlagern, dann kann ich den Absatz-Tag

Quelle

2016-05-13 16:39:35

bei der Verwendung der Suche kann jeder div jede html haben Sie möchten:

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>

Quelle

2016-05-13 14:16:29

Ja, ich habe das in meinem Beispiel, aber ich möchte nicht einen weißen Hintergrund auf den Text. – Kevin

Nun verwenden Sie einfach CSS, um das zu ändern. Wird bearbeiten, um zu demonstrieren. –

Da gehst du. Ich habe dem text div eine Klasse von ".slide-text" hinzugefügt, aber Sie können sie in alles ändern. Die Regel dafür ist am unteren Rand von css gepostet, also kannst du diese Farbe oder Schriftart ändern, etc. was immer du willst. –

-1

würde ich vorschlagen st, um es dem CSS zu überlassen, aufgeblähtes JS zu vermeiden. Probieren Sie es aus.

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

Quelle

2016-05-13 14:19:04 claudios

hast du einfach die Lösung aus dem zweiten Kommentar von gausarts hierher kopiert und eingefügt, https://github.com/kenwheeler/slick/issues/282? Wenn ja, geben Sie bitte die Urheberschaft der Lösung an, die Sie der richtigen Person zur Verfügung gestellt haben. – robertjewell

Image Slider Bildunterschrift

Antwort

Verwandte Themen