* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } html, body { margin: 0; padding: 0 } .swiper-container { position: relative; width: 1400px; min-width: 300px; height: 400px; min-height: 120px; overflow: hidden } .swiper-wrapper { position: relative; left: 0; width: 100%; height: 100%; white-space: nowrap; transition: all .5s linear } .swiper-item { position: absolute; top: 0; display: inline-block; width: 100%; height: 100% } .swiper-btn-group { position: absolute; left: 0; top: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100% } .swiper-btn-group_prev, .swiper-btn-group_next { position: relative; width: 50px; height: 50px; margin: 10px; border-radius: 50%; transition: background-color .2s; cursor: pointer } .swiper-btn-group_prev:hover, .swiper-btn-group_next:hover { background-color: rgba(0, 0, 0, .2) } .swiper-btn-group_prev::before, .swiper-btn-group_next::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%) rotate(45deg); width: 15px; height: 15px; border-color: #fff; border-style: solid } .swiper-btn-group_prev::before { border-width: 0 0 2px 2px } .swiper-btn-group_next::before { border-width: 2px 2px 0 0; transform: translate(-70%, -50%) rotate(45deg) } .swiper-pagination { position: absolute; left: 0; bottom: 5px; display: flex; justify-content: center; align-items: center; width: 100%; height: 20px } .swiper-pagination-item { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.45); transition: all .3s; cursor: pointer } .swiper-pagination-item:not(:last-child) { margin-right: 10px } .swiper-pagination-item_active { width: 30px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.85) } .swiper-container1 { position: relative; width: 610px; min-width: 300px; height: 350px; min-height: 120px; overflow: hidden } .swiper-container1 img{ width:650px; height:380px } .swiper-wrapper1 { position: relative; left: 0; width: 100%; height: 100%; white-space: nowrap; transition: all .5s linear } .swiper-item1 { position: absolute; top: 0; display: inline-block; width: 100%; height: 100% } .swiper-item1 a{ display:block } .swiper-btn-group1 { position: absolute; left: 0; top: 45%; display: flex; justify-content: space-between; align-items: center; width: 100%; } .swiper-btn-group_prev1, .swiper-btn-group_next1 { position: relative; width: 50px; height: 50px; margin: 10px; border-radius: 50%; transition: background-color .2s; cursor: pointer } .swiper-btn-group_prev1:hover, .swiper-btn-group_next1:hover { background-color: rgba(0, 0, 0, .2) } .swiper-btn-group_prev1::before, .swiper-btn-group_next1::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%) rotate(45deg); width: 15px; height: 15px; border-color: #fff; border-style: solid } .swiper-btn-group_prev1::before { border-width: 0 0 2px 2px } .swiper-btn-group_next1::before { border-width: 2px 2px 0 0; transform: translate(-70%, -50%) rotate(45deg) } .swiper-pagination1 { position: absolute; left: 0; bottom: 5px; display: flex; justify-content: center; align-items: center; width: 100%; height: 20px } .swiper-pagination-item1 { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.45); transition: all .3s; cursor: pointer } .swiper-pagination-item1:not(:last-child) { margin-right: 10px } .swiper-pagination-item_active1 { width: 30px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.85) }