#383·WOW

#ul 中的 <section> 未能正常呈现 wowjs 滚动动画

作者: menghan465创建于 2024年12月29日更新于 2024年12月29日

.all { display: flex; /* use Flexbox / flex-direction: row; / horizontal alignment / justify-content: center; / center on the main axis / align-items: flex-start; / top alignment on the cross axis / width: 50%; / set the width to 60% / margin: 0 auto; / center the container / } .carousel { width: 50%; / set the width of the carousel to 50% / margin-right: 20px; / leave space on the right / } .left { width: 50%; margin-right: 20px; position: relative; width: 736px; / set the width to 736px / float: left; / make the carousel float to the left / margin-right: 20px; / leave space on the right / } .homestay-container { width: 50%; / set the width of the homestay list to 50% / display: flex; flex-direction: column; / vertical alignment / align-items: flex-start; / left alignment / } / carousel styles / .carousel { top: 42px; position: relative; width: 736px; / set the width to 736px / height: 409px; / set the height to 409px / overflow: hidden; float: left; / make the carousel float to the left / margin-right: 20px; / leave space on the right / margin-bottom: 10px; / leave space downwards of 10px / } .map-container { width: 100%; height: 500px; border: none; position: relative; top: 50px; } .carousel img { width: 100%; height: 100%; / height adjusts automatically / object-fit: cover; / maintain the image proportion */ } .carousel .slides { display: flex; transition: transform 0.5s ease; } .carousel .slide { min-width: 100%; } .carousel .controls { …

内容来源: mattdelacdev/WOW