轮播图（免费获取+自动轮播+左右切换+触摸手势+底部导航）

最新推荐文章于 2025-04-07 21:04:02 发布

二次程序员

最新推荐文章于 2025-04-07 21:04:02 发布

阅读量1.2k

点赞数 31

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/sahjiwij/article/details/145250280

版权

在现代网页开发中，轮播图（Carousel）是一种常见的用户界面元素，用于展示图片或信息。它不仅能提升页面的动态效果，还能有效地利用有限的页面空间展示多个内容。

本文将为你展示如如何创建一个支持左右滑动、触摸手势、自动播放和底部导航的轮播图。

成果展示：

环境准备：

本文章html页面用到了tailwind+alpine，如果你需要运行他，我们可以直接从 CDN 加载这些库：

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>

页面完整结构和对应数据：

<body class="bg-gray-100 flex justify-center items-center h-screen"
x-data="{ 
    slidesData : [
      {
        image: 'https://images.pexels.com/photos/30154480/pexels-photo-30154480.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load', 
        content: [
          { bg: 'bg-blue-500', title: '容器 1', text: '这是容器1的内容。' },
          { bg: 'bg-red-500', title: '容器 2', text: '这是容器2的内容。' },
          { bg: 'bg-green-500', title: '容器 3', text: '这是容器3的内容。' },
          { bg: 'bg-yellow-500', title: '容器 4', text: '这是容器4的内容。' },
        ]
      },
      {
        image: 'https://images.pexels.com/photos/13828941/pexels-photo-13828941.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
        content: [
          { bg: 'bg-purple-500', title: '容器 5', text: '这是容器5的内容。' },
          { bg: 'bg-pink-500', title: '容器 6', text: '这是容器6的内容。' },
          { bg: 'bg-indigo-500', title: '容器 7', text: '这是容器7的内容。' },
          { bg: 'bg-teal-500', title: '容器 8', text: '这是容器8的内容。' }
        ]
      },
      {
        image: 'https://images.unsplash.com/photo-1736695796493-699707480bcf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0NHx8fGVufDB8fHx8fA%3D%3D',
        content: [
          { bg: 'bg-gra

最低0.47元/天解锁文章