Salut à tous.

Je viens vous voir par rapport au plugin Slick Carousel. J'ai essayé d'utiliser le "slider syncing", le but étant de choisir une image dans une navigation, et que cette image soit ensuite affichée.

Du coup j'ai essayé de reproduire un peu ce que je trouvais sur le site, et j'en suis arrivé là dans le html :

<div class="row">
                <div class="col m8 offset-m2 slider-for">
                    <img class="responsive-img" src="{{ URL::asset("images/food.jpg") }}" alt="">
                </div>
                <div class="col m12 slider-nav">
                    <div class="col">
                        <img class="responsive-img" src="{{ URL::asset("images/food.jpg") }}" alt="">
                    </div>
                    <div class="col">
                        <img class="responsive-img" src="{{ URL::asset("images/food1.jpg") }}" alt="">
                    </div>
                    <div class="col">
                        <img class="responsive-img" src="{{ URL::asset("images/food2.jpg") }}" alt="">
                    </div>
                    <div class="col">
                        <img class="responsive-img" src="{{ URL::asset("images/food3.jpg") }}" alt="">
                    </div>
                    <div class="col">
                        <img class="responsive-img" src="{{ URL::asset("images/food4.jpg") }}" alt="">
                    </div>
                    <div class="col">
                        <img class="responsive-img" src="{{ URL::asset("images/food5.jpg") }}" alt="">
                    </div>
                </div>
            </div>

et dans le js j'ai pris le code de slick :

<script>
            $('.slider-for').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true,
                fade: true,
                asNavFor: '.slider-nav'
            });
            $('.slider-nav').slick({
                slidesToShow: 5,
                slidesToScroll: 1,
                asNavFor: '.slider-for',
                centerMode: true,
                focusOnSelect: true
            });
        </script>

On en arrive à mon soucis. Au niveau de l'affichage, c'est OK, j'ai mes images, le carousel fonctionne ça va. Mais, je rencontre deux soucis :

1 - Lorsque j'affiche l'image suivante/précédente, l'image du dessus ne s'actualise pas en fonction de celle-ci. 

2 - Au bout de deux images passées, l'image principale disparaît, mais n'est pas remplacée, et redeviens normale lorsque je clique sur sa version miniature dans la navigation.

J'ai l'impression que j'ai oublié un petit truc pour que mon tout fonctionne. Est-ce que vous auriez une idée qui m'aiderait ? Merci !