使用 CSS 创建响应式图像滑块

最新推荐文章于 2024-05-28 09:53:05 发布

林中白虎

最新推荐文章于 2024-05-28 09:53:05 发布

阅读量705

点赞数 3

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_33003143/article/details/137233624

版权

本文详细介绍了如何使用CSS和JavaScript创建一个响应式图像滑块，包括使用媒体查询调整不同设备尺寸下的布局，以及利用position:absolute和:nth-child实现图片放大、缩略图显示和切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 CSS 创建响应式图像滑块

效果展示

在这里插入图片描述

PC 端效果

在这里插入图片描述

移动端 / iPad 效果

CSS 知识点

媒体查询知识点复习
position: absolute 的使用复习
:nth-child 的使用复习

页面需求及实现思路

需求

页面会根据设备大小形成不同的布局方式
当前展示图片放大并且展示对应的标题和描述
其他未展示的图片以小缩略图展示在当前激活的图片上

实现思路

使用@media实现不同大小页面的样式，主要是针对图片容器进行适度修改就可以
找一个总容器来装载所有相关页面元素，当超出的元素则会隐藏
找一个容器专门来装载所有图片元素，并使用inset来控制边距
找一个容器专门装载图片元素和相关信息，并使用:nth-child和left控制缩略图的位置

整体页面布局

<!-- 总容器 -->
<div class="container">
  <!-- 图片展示容器 -->
  <div class="slider">
    <!-- 图片元素，第一个元素为当前激活展示的元素，第二个为预备激活展示的元素 -->
    <div class="slides" style="--img: url('./bg1.jpg')">
      <div class="content">
        <h2>Slide 01</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eos,
          labore explicabo impedit nostrum in!
        </p>
      </div>
    </div>
    <div class="slides" style="--img: url('./bg2.jpg')">
      <div class="content">
        <h2>Slide 02</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eos,
          labore explicabo impedit nostrum in!

最低0.47元/天解锁文章