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

星空小梦

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

阅读量410

点赞数

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

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

本文链接：https://blog.csdn.net/weixin_50885665/article/details/128721602

版权

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

摘要由CSDN通过智能技术生成

轮播图垂直显示:

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="index">
        <div class="xx">
          <el-popover
           
            width="700"
            trigger="hover"
            popper-class="tanchuang"
          >
            <div>
              <el-row :gutter="20