光滑的滑块过高

Question

嗨，我正在尝试制作带缩略图导航的光滑滑块。 我通过javascript添加滑块项，然后创建光滑的滑块。 问题在于，父级的高度（&& slider-nav的滑块）要高一些。 这是我的结果：

这是我的html代码：

<div class="slider-for"></div>
<div class="slider-nav"></div>

这是我的Javascript：

var ObjectData = "object": {

        "media": {
            "images": [
                {
                    "type": "bird-image",
                    "url": "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?auto=compress&cs=tinysrgb&h=350"
                },
                {
                    "type": "bird-image",
                    "url": "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?auto=compress&cs=tinysrgb&h=350"
                },
                {
                    "type": "bird-image",
                    "url": "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?auto=compress&cs=tinysrgb&h=350"
                },
                {
                    "type": "bird-image",
                    "url": "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?auto=compress&cs=tinysrgb&h=350"
                },
                {
                    "type": "bird-image",
                    "url": "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?auto=compress&cs=tinysrgb&h=350"
                }
            ],
        }
}

function createSlickSlider(){
  $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});


function appendImages(){
    objectData.media.images.forEach(function(value, index){
       $(".slider-for").append('<div><img class="image-result-top" src="'+objectData.object.media.images[index].url+'"></div>');
    });
    objectData.media.images.forEach(function(value, index){
       $(".slider-nav").append('<div><img class="image-result-bottom" src="'+objectData.object.media.images[index].url+'"></div>');
    });

    createSlickSlider();
}

appendImages();

Answer 1

你能重写你的js代码吗？

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav',
  adaptiveHeight: true
});

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true,
  adaptiveHeight: true
});