css实现轮播图弧形

这篇具有很好参考价值的文章主要介绍了css实现轮播图弧形。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css实现轮播图弧形,css,前端,javascript

<template>
  <div id="demo">
    <div class="banner-container">
      <van-swipe
        autoplay="4000"
        ref="swipe"
        style="height: 100%"
        indicator-color="white"
        :show-indicators="bannerData.length > 1"
      >
        <van-swipe-item v-for="(item, index) in bannerData" :key="index">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant';
export default {
  name: 'demo',
  computed: {},
  components: {
    'van-swipe': Swipe,
    'van-swipe-item': SwipeItem,
  },
  data() {
    return {
      bannerData: [
        {
          img: require('@/assets/1.jpg'),
        },
        {
          img: require('@/assets/2.jpg'),
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="less">
#demo {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .banner-container {
    width: 200%;
    overflow: hidden;
    position: relative;
    left: -50%;
    border-bottom-left-radius: 700px 180px;
    border-bottom-right-radius: 700px 180px;
    height: 150px;
    /deep/ .van-swipe {
      width: 50% !important;
      position: relative;
      left: 25%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

 文章来源地址https://www.toymoban.com/news/detail-858295.html

到了这里,关于css实现轮播图弧形的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用html+css+jquery实现3D轮播图

    还是先来看看效果图:  通过效果图我们先理一下思路: 首先就是需要几张图片,但只有一张是显示在我们眼前的 第二步:把一张图片分成几等份,这样点击转换的时候就会分开转 第三步:就是实现点击按钮切换下一张。 HTML部分首先我们需要一个盒子显示图片,然后在盒

    2024年02月08日
    浏览(60)
  • 前端Vue自定义简单实用轮播图封装组件 快速实现轮播图

    前端Vue自定义简单实用轮播图封装组件 快速实现轮播图, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(94)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

    2024年02月04日
    浏览(57)
  • 前端轮播图最简单实现(小白也能学会)

    轮播图大家肯定都不陌生,因为这是前端最为常见的一个功能,现在随着框架和一些插件的兴起,很少人会去原生的去写轮播图,所以今天带大家写一下原生的轮播图来熟悉一下 最为主要的就是得知道这张图片的宽度,因为每一次移动的距离就是这张图片的宽度,但是宽度我

    2024年02月04日
    浏览(38)
  • vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果

    前言 最近在写PC端的业主端时候,发现传统的菜单栏比较丑,也不符合实际应用(功能页面并不多-展示为主) 偶然发现钉钉官网的效果挺有意思的,想着把这个效果复原过来,然后夸夸搜索了一番。 经过一顿的cv打法,加上修修补补把大概的效果整了出来,时间关系最基础

    2024年02月11日
    浏览(56)
  • JavaScript-----轮播图案例展示

            这一期我们去通过JavaScript的代码实现轮播图的制作,下面有效果展示和代码资源,其中的图片资源和代码资源我都上传上去了,如果需要运行的话,你们可以去直接下载下来。希望各位喜欢! 1694164869515 功能说明 :这个轮播图可以自动轮播(周期2秒),可以点击向

    2024年02月09日
    浏览(57)
  • 教你用JavaScript制作轮播图

    欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图。图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时,再点击左右键图片弹回最初始的图片或最末尾的图片。通过实战我们将学会

    2024年02月11日
    浏览(56)
  • CSS3 -- 3D轮播图

    今天在完善我自己的个人网站时,要做一个3D轮播图,就是一个六边体,在六边体的每个面都放一张图片,但是每个边之间都会有一定的间距,效果如下: 点击两边的按钮会旋转切换图片,每隔4秒会自动切换。 在我初学的时候我觉得这个效果非常的有意思,很高大上,哈哈

    2024年02月12日
    浏览(44)
  • css3轮播图案例

    轮播图案例

    2024年01月20日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包