原生js+css实现卡片式图文幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:原生js+css实现卡片式图文幻灯片切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> <style> /* SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ /* MAIN COLORS */ /* Chakra Ui: accent color- #285E61 :#81e6d9; #E6FFFA; body font color - #1A202C #718096; */ *, :after, :before{ margin: 0; padding: 0; box-sizing: border-box; font: inherit: } /* ------------------------ */ /* GENERAL STYLES */ /* ------------------------ */ body { font-family: 'Inter', sans-serif; color: #1A202C; line-height: 1; background-color: #202124; } .carousel{ height: 350px; width: 850px; margin: 40px auto; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 0; position: relative; } .slider{ width: 800px; border-radius: 8px; display: grid; place-items: center; grid-template-columns: 1fr 1fr; grid-template-rows: 30px; gap: 70px; position: relative; } .slide{ display: flex; align-items: center; gap: 86px; padding: 32px 48px 32px 86px; border-radius: 8px; position: absolute; background-color: #285E61; } img{ height: 200px; border-radius: 8px; transform: scale(1.5); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); } .testimonial__text{ font-size: 18px; font-weight: 500; line-height: 1.5; margin-bottom: 32px; color: #81e6d9; } .testimonial__author{ font-size: 14px; margin-bottom: 4px; color: #81e6d9; } .testimonial__job{ font-size:12px; color: #81e6d9; } /* CONTROLS */ .btn{ background-color: #fff; border: none; height: 40px; width: 40px; border-radius: 50%; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); cursor: pointer; display: grid; place-items: center; position: absolute; z-index: 3; } .btn--left{ /* IN RELATION TO PARENT ELEMENT */ left: 0; top: 50%; /* IN RELATION TO ELEMENT ITSELF */ transform: translate(-50%, -50%) } .btn--right{ /* IN RELATION TO PARENT ELEMENT */ right: 0; top: 50%; /* IN RELATION TO ELEMENT ITSELF */ transform: translate(50%, -50%) } .btn-icon{ height: 24px; width: 24px; stroke: #285E61; } .dots{ position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 160px); display: flex; gap: 12px; z-index: 2; } .dot{ border: 2px solid #285E61; border-radius: 50%; height: 12px; width: 12px; background-color: #fff; cursor: pointer; } .dot{ background-color: rgb(255, 255, 255); } .dot--fill{ background-color: #285E61; } </style> </head> <body> <div class="carousel"> <div class="slider"> <div class="slide"> <img class='testimonial__img'src="girl.jpg" alt="Customer photo"> <blockquote class="testimonial"> <p class="testimonial__text">Lorem ipsum dolor, sit amet consectetur adipisicing Omnis ipsa quam optio eligendi! Dolorum similique commodi deleniti harum nisi perspiciatis voluptates</p> <p class="testimonial__author">Rebecca Glasgow</p> <p class="testimonial__job">Software Engineer at Instagram</p> </blockquote> </div> <button class="btn btn--left"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn.........完整代码请登录后点击上方下载按钮下载查看
网友评论0