kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.34k stars 5.88k forks source link

thumbnails is not showing #4078

Open palanganero opened 3 years ago

palanganero commented 3 years ago

I am trying to create a slick slide with thumbnails, but the thumbnails are broken: https://postimg.cc/4mnBds37. This is the html code:

        <div class="container-fluid">
            <div class="row">
                <div class="col-12 p-0 slideshow">
                        <img src="imagenes/uno.jpg">
                        <img src="imagenes/dos.jpg">
                        <img src="imagenes/tres.jpg">
                </div>
            </div>           
        </div>            
    <script src="slick.js"></script>

and this is the javascript:

$(".slideshow").slick({
    dots:true,
    arrows: true,
    fade:true,
    autoplay:true,
    /*centerMode: true,*/ //centrar foto

    slidesToShow: 1,
    slidesToScroll: 1,
    customPaging: function(slick,index) {
                    //var targetImage = slick.$slides.eq(index).find('img').attr('src');
                    var targetImage = $(slick.$slides[index]).find('img').attr('src');
                    return '<img src=" ' + targetImage + ' "/>';
                }

});

and the version of slick slider is: 1.8.1

palanganero commented 3 years ago

i finally solved it with this:

<div class="container-fluid">
            <div class="row">
                <div class="col-12 p-0">
                    <div class="contenedor slideshow">
                        <img data-slidertitle="imagenes/zapatos.jpg" src="imagenes/zapatos.jpg">
                        <img data-slidertitle="imagenes/zapatos.jpg" src="imagenes/zapatos.jpg">
                        <img data-slidertitle="imagenes/zapatos.jpg" src="imagenes/zapatos.jpg">
                    </div>
                </div>
            </div>           
        </div>

and this is the javascript:

$(".slideshow").slick({
    dots:true,
    arrows: true,
    fade:true,
    autoplay:true,
    /*centerMode: true,*/ //centrar foto

    slidesToShow: 1,
    slidesToScroll: 1,
    customPaging: function(slick,index) {

                var targetImage = $(slick.$slides[index]).data('slidertitle');                               
                return '<img src=" ' + targetImage + ' " style="max-width:80px;"/>';
                }

});