12 2021 档案

swiper7-33. 添加函数开启监听轮播图的各种事件(点击，滑动...)
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-14 06:40 sky-su 阅读(1315) 评论(0) 推荐(0)
swiper7-32. 双击图片放大
摘要：1 <template> 2 <div 3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 4 class="swiper mySwiper" 5 > 6 <div class="swiper-wrap 阅读全文
posted @ 2021-12-14 06:39 sky-su 阅读(688) 评论(0) 推荐(0)
swiper7- 30. 开启轮播图片懒加载
摘要：1 <template> 2 <div 3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 4 class="swiper mySwiper" 5 > 6 <div class="swiper-wrap 阅读全文
posted @ 2021-12-14 06:38 sky-su 阅读(495) 评论(0) 推荐(0)
swiper7-31. 设置轮播图的容器自动适应内容的高度
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-14 06:38 sky-su 阅读(469) 评论(0) 推荐(0)
swiper7-29. 轮播图上放文字，轮播图成为背景
摘要：1 <template> 2 <div 3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 4 class="swiper mySwiper" 5 > 6 <div 7 class="parallax- 阅读全文
posted @ 2021-12-14 06:37 sky-su 阅读(980) 评论(0) 推荐(0)
swiper7-28. history 历史记录导航，即每张轮播图都有url，可以返回，但是在vue中不行
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div data-history="1" class="swiper-slide">Slide 1</div> 5 <div data-his 阅读全文
posted @ 2021-12-14 06:36 sky-su 阅读(248) 评论(0) 推荐(0)
swiper7-27. 切换页面是浏览器的网址会有所变化，就像锚点一样
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div data-hash="slide1" class="swiper-slide">Slide 1</div> 5 <div data-h 阅读全文
posted @ 2021-12-14 06:35 sky-su 阅读(131) 评论(0) 推荐(0)
swiper7-26. 轮播图下面加缩略图，并且无限滚动
摘要：1 <template> 2 <div class="swiper-twenty-eight"> 3 <div 4 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 5 class="swiper myS 阅读全文
posted @ 2021-12-14 06:34 sky-su 阅读(640) 评论(0) 推荐(0)
02. 高德地图添加多一个图层
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>02高德地图添加多一个图层</title> 6 <style type="text/css"> 7 html, 8 body { 9 height: 100%; 阅读全文
posted @ 2021-12-13 12:04 sky-su 阅读(767) 评论(0) 推荐(0)
swiper7-25. 轮播图下面添加一个缩略图
摘要：1 <template> 2 <div class="swiper-twenty-seven"> 3 <div 4 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 5 class="swiper myS 阅读全文
posted @ 2021-12-12 18:07 sky-su 阅读(316) 评论(0) 推荐(0)
swiper7-24. 动态添加轮播图片
摘要：1 <template> 2 <div class="swiper-twenty-six"> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</div 阅读全文
posted @ 2021-12-12 18:06 sky-su 阅读(415) 评论(0) 推荐(0)
swiper7-23. 开启自动轮播图
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 18:04 sky-su 阅读(881) 评论(0) 推荐(0)
swiper7-22. 通过键盘来控制轮播图切换
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 18:03 sky-su 阅读(241) 评论(0) 推荐(0)
swiper7-21. 花式轮播图4
摘要：1 <template> 2 <div class="swiper-twenty-three"> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</d 阅读全文
posted @ 2021-12-12 18:02 sky-su 阅读(239) 评论(0) 推荐(0)
swiper7-20. 花式轮播图3
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 18:01 sky-su 阅读(197) 评论(0) 推荐(0)
swiper7-19. 花式轮播1
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide"> 5 <img src="images/nature-1.jpg" /> 6 </div> 阅读全文
posted @ 2021-12-12 18:00 sky-su 阅读(140) 评论(0) 推荐(0)
swiper7-18. 3D切换轮播图
摘要：1 <template> 2 <!-- Swiper --> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide"> 6 <img src="images/nature-1 阅读全文
posted @ 2021-12-12 17:59 sky-su 阅读(530) 评论(0) 推荐(0)
swiper7-17. 切换轮播图不是以滚动的方式
摘要：1 <template> 2 <!-- Swiper --> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide"> 6 <img src="images/nature-1 阅读全文
posted @ 2021-12-12 17:58 sky-su 阅读(219) 评论(0) 推荐(0)
swiper7-15. 一个容器放三张图片并无限滚动
摘要：1 <template> 2 <!-- Swiper --> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</div> 6 <div class=" 阅读全文
posted @ 2021-12-12 17:55 sky-su 阅读(765) 评论(0) 推荐(0)
swiper7-14. 设置无限滚动
摘要：1 <template> 2 <!-- Swiper --> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</div> 6 <div class=" 阅读全文
posted @ 2021-12-12 17:54 sky-su 阅读(1320) 评论(0) 推荐(0)
swiper7- 13.横向滚动中内嵌竖向滚动
摘要：1 <template> 2 <!-- Swiper --> 3 <div class="swiper mySwiper swiper-h"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Horizontal Slide 1< 阅读全文
posted @ 2021-12-12 17:53 sky-su 阅读(246) 评论(0) 推荐(0)
swiper7- 12. 网格布局
摘要：1 <template> 2 <!-- Swiper --> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</div> 6 <div class=" 阅读全文
posted @ 2021-12-12 17:48 sky-su 阅读(924) 评论(0) 推荐(0)
swiper7-11. 控制滑动方向（竖直，横向）
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide"> 5 <h4>Scroll Container</h4> 6 <p> 7 Lorem ips 阅读全文
posted @ 2021-12-12 17:45 sky-su 阅读(788) 评论(0) 推荐(0)
swiper7-10.增加滑动惯性
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:44 sky-su 阅读(350) 评论(0) 推荐(0)
swiper7-9.开启更好的性能
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:42 sky-su 阅读(430) 评论(0) 推荐(0)
swiper7-8. 初始化是控制图片是居中还是靠左
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:39 sky-su 阅读(597) 评论(0) 推荐(0)
swiper7-7.控制轮播图容器放几张图
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:34 sky-su 阅读(256) 评论(0) 推荐(0)
swiper7-5.设置轮播图片之间的间隔
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:28 sky-su 阅读(2453) 评论(0) 推荐(0)
swiper-4.添加滚动条
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:27 sky-su 阅读(607) 评论(0) 推荐(0)
swiper7-3.添加指示点（就是小点点）
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:26 sky-su 阅读(1112) 评论(0) 推荐(0)
swiper7-2.添加点击上一张和下一张功能
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:24 sky-su 阅读(701) 评论(0) 推荐(0)
swiper7-1.初始化配置
摘要：1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-12 17:22 sky-su 阅读(977) 评论(0) 推荐(0)