swiper 轮播图鼠标放上去显示浮动窗滚动列表

星空小梦

已于 2023-02-06 20:50:16 修改

阅读量495

点赞数

CC 4.0 BY-SA版权

分类专栏： swiper 文章标签： vue.js javascript 前端

于 2023-01-17 22:50:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50885665/article/details/128721602

本文介绍了如何使用Vue.js和JavaScript创建一个轮播图，当鼠标悬停在图片上时，会显示浮动窗口展示详细信息。内容涵盖了轮播图的垂直显示和内部元素的布局调整。

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

轮播图垂直显示:

direction: "vertical",

轮播图里面显示个数 (注:不是轮播个数()

slidesPerView: 5,//区域内 显示个数

一、

<template>
  <div style="height: calc(100vh - 111px - 62vh - 5vh);">
    <div class="title">理论</div>
    <swiper
      class="swiper"
      :options="swiperOption"
      style="height: calc(100% - 4vh);"
    >
      <swiper-slide v-for="(item, index) of 10" :key="i