Fügen Sie einen Link zu dynamischen Slider caption

Question

Ich habe einen Slider, der von Amazingslider Plugin erstellt. Es funktioniert gut, aber gibt es eine Möglichkeit, einen Link (href) zur Beschriftung jedes Bildes hinzuzufügen? Ich habe es versucht, aber der Link wird nicht im Schieberegler angezeigt.

Hier ist mein Code-Schnipsel:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://www.worldinbag.com/js/amazingslider.js"></script> 
 
<script src="http://www.worldinbag.com/js/initslider-1.js"></script> 
 

 
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:804px;margin:0px auto 59px; overflow:hidden;"> 
 
    <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;"> 
 
    <ul class="amazingslider-slides" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="This is a caption This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption " 
 
     /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="This is a caption" /> 
 
     </li> 
 

 
    </ul> 
 
    <ul class="amazingslider-thumbnails" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" /> 
 
     </li> 
 

 
    </ul> 
 

 
    </div> 
 
</div>

Answer 1

Was können Sie tun, ist ein Link-Tag zu dem Titel Attribut hinzuzufügen. Dies funktioniert, wenn Sie einfache Anführungszeichen oder entkam doppelte Anführungszeichen verwenden:

<a href='#your-url'>your caption</a> 

Mit dieser Methode nur möglich, es ist Links auf die Beschriftung einfügen, nicht die ganze Beschriftung selbst zu verknüpfen.

Und noch ein Hinweis: Versuchen Sie nicht, Inline-Stile zu verwenden, verwenden Sie besser die Klassen und IDs, die Sie bereits verwenden, um Ihre Stile anzuwenden.

#amazingslider-wrapper-1 { 
 
    display: block; 
 
    position: relative; 
 
    max-width: 804px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
#amazingslider-1 { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.worldinbag.com/js/amazingslider.js"></script> 
 
<script src="http://www.worldinbag.com/js/initslider-1.js"></script> 
 

 

 
<div id="amazingslider-wrapper-1"> 
 
    <div id="amazingslider-1"> 
 
    <ul class="amazingslider-slides" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="<a href='#'>This is a link</a> This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption " 
 
     /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="<a href='#'>This is a link</a>" /> 
 
     </li> 
 

 
    </ul> 
 
    <ul class="amazingslider-thumbnails" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" /> 
 
     </li> 
 

 
    </ul> 
 

 
    </div> 
 
</div>