带有按钮的 Jquery 自动滑块

Question

任何人都可以推荐任何带有按钮的优质产品自动滑块。我是 jquery 的新手，所以任何好的简单 jquery 滑块都可以。我正在寻找建立这种slider .当点击图片时，它应该打开带有描述like this的点击图片。在此先感谢您对如何制作此滑块的任何帮助。

Answer 1

弹出：colorbox

滑块：elastislide-responsive-carousel

http://jsfiddle.net/ckraoftt/1/

HTML：

<div class="column">
    <ul id="carousel" class="elastislide-list">
        <li><a href="img4.jpg"><img src="img44" alt="image04" /></a></li>
        <li><a href="img3.jpg"><img src="img33" alt="image03" /></a></li>
        <li><a href="img2.jpg"><img src="img22" alt="image02" /></a></li>
        <li><a href="img1.jpg"><img src="img11" alt="image01" /></a></li> 
    </ul>
</div>

JQ：

$( '#carousel' ).elastislide( {
    orientation : 'vertical'
} );

$('#carousel a').colorbox({photo :true});

---

EDIT2：

http://jsfiddle.net/ckraoftt/7/

为所有一个标签添加 2 个属性：

data-txt="image 4 4000$" //text after image

data-button-url="http://test.com/shop/4"  //url for button Shop

JQ

$( '#carousel' ).elastislide( {
    orientation : 'vertical'
} );

$('#carousel a').colorbox({
    html:function(){

        var src=$(this).attr('href');
        var txt=$(this).attr('data-txt');
        var url=$(this).attr('data-button-url');

        var img='<img src="'+src+'">';
        var text= '<div class="pp_txt">'+txt+'</div>';
        var btn='<a class="pp_btn" href="'+url+'">SHOP</a>';

        var html='<div class="popup">'+img+text+btn+'</div>';
        return html;
    }