Logos - Owl Carousel

Dependency: Full jQuery not slim version, >= 1.8.3

• This Page

Fix Height .item and .item img

• #lili-ex-1.owl-carousel.owl-theme .item
• Cut all logo images so that they don't have space
• At the largest viewport, use the current default and fix items that have extra width .lili-go-*
• Shrink viewport to a point where the widest .item img equals to the .item. That's the viewport width to hold x amount of .item
• Say the largest viewport width is 1000 and there're 5 items. Each item is 200
• Next level is to display 3 items. Then the next viewport width is 200*3 = 600
• You don't need to create @media (max-width:1000px) {...} because the second level's width is calculated as above. All extra width items will have width:100% as the largest viewport width
• For displaying 1 item, you may need to set those previous extra width items to have auto width@media (max-width:600px) { .item.lili-logo-* { width:auto!important; }}

Loop a frame with multiple figure's at a time

• figure's in each div.cs-i-logos which is a flex item
• figure has fixed width flex:0 0 100px;
• Fix figure's that have extra height (square vs other rectangles)
• Change flex-direction to column
• Now figure's have fixed height
• Auto width and fix height on .cs-i-logos figure .figure-img which were fixed width before