Fixed size of Flexslider

前端 未结 5 2121
误落风尘
误落风尘 2021-02-04 03:40

I\'m using Flexslider to pull product images of varying sizes from an API. I\'ve been throwing them into Flexslider\'s

    , but these varying image sizes don
5条回答
  •  终归单人心
    2021-02-04 03:59

    The element with the class ".flex-viewport" is the container of the slides, that element adapt his height to the taller image in the set, the trick is set all images height's to 0 except the one that is in the current slide which is inside the li element with the class ".flex-active-slide" that flexslider script toggle when slides exchange positions, the only bad thing about this trick is that the toggle of the class occurs after the new slide is put in the new position then a stutter occurs, but you can deal with that by using some javascript binding some toggleClass to the same event that trigger the slide change, help to be helpful.

    .flex-viewport  li:not(.flex-active-slide) img{ 
    
    height: 0 !important;
    }
    

提交回复
热议问题