quasar+vue实现可配置万能幻灯片示例代码-html代码-BFW代码库

quasar+vue实现可配置万能幻灯片示例代码

代码语言：html

所属分类：幻灯片

代码描述：quasar+vue实现可配置万能幻灯片示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quasar.prod.css">
  

</head>

<body>
<!--
  Forked from:
  http://www.quasarchs.com/vue-components/carousel#example--padding
-->
<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <q-toggle
      v-model="padding"
      label="Padding"
      color="purple"
      class="text-weight-bold"
    ></q-toggle>

    <q-toggle
      v-model="vertical"
      label="Vertical"
      color="purple"
    ></q-toggle>

    <q-toggle
      v-model="arrows"
      label="Arrows"
      color="purple"
    ></q-toggle>

    <q-toggle
      v-model="navigation"
      label="Navigation"
      color="purple"
    ></q-toggle>

    <div class="row items-center q-mb-md">
      <div>Navigation position:</div>
      <q-option-group
        v-model="navPos"
        :options="navigationPositions"
        color="purple"
        inline
      ></q-option-group>
    </div>

    <q-carousel
      v-model="slide"
      swipeable
      animated
      :padding="padding"
      :vertical="vertical"
      :arrows="arrows"
      :navigation="navigation"
      :navigation-position="navPos"
      height="300px"
      class="bg-purple text-white rounded-borders"
    >
      <q-carousel-slide name="style" class="column no-wrap flex-center">
        <q-icon name="style" size="56px"></q-icon>
        <div class="q-mt-md text-center">
          {{ lorem }}
        </div>
      </q-carousel-slide>
      <q-carousel-slide name="tv" class="column n.........完整代码请登录后点击上方下载按钮下载查看