???????效果演示：

?

???代碼目錄：

主要代碼實(shí)現(xiàn)：

CSS樣式：

@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext"); html {position: relative;overflow-x: hidden !important; }body {font-family: "Quicksand", sans-serif; }a, a:hover {text-decoration: none; }.icon {display: inline-block;width: 1em;height: 1em;stroke-width: 0;stroke: currentColor;fill: currentColor; }.background {position: fixed;width: 100%;height: 100%;left: 0;top: 0; }.background:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(45deg, rgba(209, 0, 42, 0.6) 0%, #0E5DC4 100%);opacity: 0.9; }.background img {width: 100%;height: 100%;object-fit: cover;pointer-events: none;user-select: none; }.item-bg {width: 300px;height: 500px;position: absolute;top: 30px;background: #fff;border-radius: 10px;box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);opacity: 0;transition: all 0.3s;left: -30px; }.item-bg.active {left: 0;top: 0;opacity: 1; }.news-slider {z-index: 2;max-width: 1300px;margin-left: auto;margin-right: auto;margin-top: 60px; }@media screen and (max-width: 1300px) {.news-slider {max-width: 1000px;} }@media screen and (max-width: 576px) {.news-slider {margin-top: 45px;} }.news-slider__wrp {display: flex;align-items: flex-start;position: relative;z-index: 2; }.news-slider__item {width: 400px;flex-shrink: 0; }@media screen and (max-width: 992px) {.news-slider__item {width: 340px;} }.news-slider__item.swiper-slide {opacity: 0;pointer-events: none;transition: all 0.3s; }.news-slider__item.swiper-slide-active, .news-slider__item.swiper-slide-prev, .news-slider__item.swiper-slide-next {opacity: 1;pointer-events: auto; }.news-slider__ctr {position: relative;z-index: 12; }.news-slider__arrow {background: #fff;border: none;display: inline-flex;width: 50px;height: 50px;justify-content: center;align-items: center;box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);border-radius: 50%;position: absolute;top: 50%;z-index: 12;cursor: pointer;outline: none !important; }.news-slider__arrow:focus {outline: none !important; }.news-slider__arrow .icon-font {display: inline-flex; }.news-slider__arrow.news-slider-prev {left: 15px;transform: translateY(-50%); }.news-slider__arrow.news-slider-next {right: 15px;transform: translateY(-50%); }.news-slider__pagination {text-align: center;margin-top: 50px; }.news-slider__pagination .swiper-pagination-bullet {width: 13px;height: 10px;display: inline-block;background: #fff;opacity: 0.2;margin: 0 5px;border-radius: 20px;transition: opacity 0.5s, background-color 0.5s, width 0.5s;transition-delay: 0.5s, 0.5s, 0s; }.news-slider__pagination .swiper-pagination-bullet-active {opacity: 1;background: #ffffff;width: 100px;transition-delay: 0s; }@media screen and (max-width: 576px) {.news-slider__pagination .swiper-pagination-bullet-active {width: 70px;} }.news__item {padding: 40px;color: #fff;border-radius: 10px;display: block;transition: all 0.3s; }@media screen and (min-width: 800px) {.news__item:hover {color: #222222;transition-delay: 0.1s;}.news__item:hover .news-date,.news__item:hover .news__title,.news__item:hover .news__txt {opacity: 1;transition-delay: 0.1s;}.news__item:hover .news__img {box-shadow: none;} }.news__item.active {color: #222222; }.news__item.active .news-date, .news__item.active .news__title, .news__item.active .news__txt {opacity: 1; }.news__item.active .news__img {box-shadow: none; }@media screen and (max-width: 992px) {.news__item {padding: 30px;} }@media screen and (max-width: 576px) {.news__item {padding: 20px;} }.news-date {padding-bottom: 20px;margin-bottom: 20px;border-bottom: 2px solid;display: inline-block;opacity: 0.7;transition: opacity 0.3s; }@media screen and (max-width: 576px) {.news-date {margin-bottom: 10px;display: inline-flex;align-items: center;padding-bottom: 0;} }.news-date__title {display: block;font-size: 32px;margin-bottom: 10px;font-weight: 500; }@media screen and (max-width: 576px) {.news-date__title {margin-right: 10px;} }.news-date__txt {font-size: 16px; }.news__title {font-size: 25px;font-weight: 500;opacity: 0.7;margin-top: 10px;margin-bottom: 15px;transition: opacity 0.3s; }@media screen and (max-width: 576px) {.news__title {font-size: 22px;margin-bottom: 10px;} }.news__txt {margin: 10px 0;line-height: 1.6em;font-size: 15px;opacity: 0.7;transition: opacity 0.3s; }.news__img {border-radius: 10px;box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);height: 200px;margin-top: 30px;width: 100%;transition: all 0.3s;transform-origin: 0% 0%; }@media screen and (max-width: 576px) {.news__img {height: 180px;margin-top: 20px;} }.news__img img {max-width: 100%;border-radius: 10px;height: 100%;width: 100%; }

部分HTML代碼 :

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>響應(yīng)式新聞卡片滑塊</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel='stylesheet' href='css/swiper.min.css'><link rel="stylesheet" href="css/style.css"></head><body><div class="wrapper"><div class="background"><img src="img/b.jpg" alt=""></div><div class="item-bg"></div><div class="news-slider"><div class="news-slider__wrp swiper-wrapper"><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">24</span> <span class="news-date__txt">May</span> </div><div class="news__title">漂亮山水</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/1.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">25</span> <span class="news-date__txt">May</span> </div><div class="news__title">旅游景點(diǎn)</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/2.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">26</span> <span class="news-date__txt">May</span> </div><div class="news__title">景區(qū)打卡</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/3.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">27</span> <span class="news-date__txt">May</span> </div><div class="news__title">城市美景</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/4.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">28</span> <span class="news-date__txt">May</span> </div><div class="news__title">旅游景點(diǎn)</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/5.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">29</span> <span class="news-date__txt">May</span> </div><div class="news__title">景區(qū)打卡</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/6.jpg" alt="news"> </div></a></div></div><div class="news-slider__ctr"><div class="news-slider__arrows"><button class="news-slider__arrow news-slider-prev"><span class="icon-font"><svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg></span></button><button class="news-slider__arrow news-slider-next"><span class="icon-font"><svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg></span></button></div><div class="news-slider__pagination"></div></div></div></div><svg hidden="hidden"><defs><symbol id="icon-arrow-left" viewBox="0 0 32 32"><title>arrow-left</title><path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path></symbol><symbol id="icon-arrow-right" viewBox="0 0 32 32"><title>arrow-right</title><path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path></symbol></defs> </svg><script src="js/jquery.min.js"></script><script src='js/swiper.min.js'></script><script src="js/script.js"></script></body></html>

上面的img圖片和jquery.min.js等需要引入即可運(yùn)行

源碼獲取

精彩推薦更新中：

HTML5大作業(yè)實(shí)戰(zhàn)100套

??打卡 文章 更新? 37??/? 100天

大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦 、需要完整文件隨時(shí)聯(lián)系我或交流喲~！

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。