Swiper 响应式博客网站图文幻灯片

1
<!--
2
        版本:1.0
3
        整理：Muze
4
        原文：https://www.npc.ink/10919.html
5
    -->
6
<div class="blog-slider swiper-container-fade swiper-container-horizontal">
7
    <div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
8
            <div class="blog-slider__img">
9
                <img src="https://cdn.getimg.net/npc/2020/file/page/0116/pptcard/3.jpg" alt="惊悚的万圣节背景矢量素材">
10
            </div>
11
            <div class="blog-slider__content">
12
                <span class="blog-slider__code">2018-09-03</span>
13
                <div class="blog-slider__title">惊悚的万圣节背景矢量素材</div>
14
                <div class="blog-slider__text">这是一款惊悚的万圣节背景矢量素材，由黑夜、月亮、巫师、枯树、蝙蝠等元素设计。素材提供了 EPS 和 AI 两种格式，含 JPG 预览图。</div>
15
                <a href="https://www.npc.ink/10919.html" class="blog-slider__button">详情</a>
16
            </div>
17
        </div>
18
        <div class="blog-slider__item swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 750px; opacity: 1; transform: translate3d(-750px, 0px, 0px); transition-duration: 0ms;">
19
            <div class="blog-slider__img">
20
                <img src="https://cdn.getimg.net/npc/2020/file/page/0116/pptcard/1.png" alt="秋叶和果实秋天背景矢量素材">
21
            </div>
22
            <div class="blog-slider__content">
23
                <span class="blog-slider__code">2018-08-31</span>
24
                <div class="blog-slider__title">秋叶和果实秋天背景矢量素材</div>
25
                <div class="blog-slider__text">这是一款秋叶和果实秋天背景矢量素材，格式为 EPS，含 JPG 预览图。</div>
26
                <a href="https://www.npc.ink/10919.html" class="blog-slider__button">详情</a>
27
            </div>
28
        </div>
29

30
        <div class="blog-slider__item swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 750px; opacity: 0; transform: translate3d(-1500px, 0px, 0px); transition-duration: 0ms;">
31
            <div class="blog-slider__img">
32
                <img src="https://cdn.getimg.net/npc/2020/file/page/0116/pptcard/2.png" alt="现代舒适客厅矢量素材">
33
            </div>
34
            <div class="blog-slider__content">
35
                <span class="blog-slider__code">2018-09-04</span>
36
                <div class="blog-slider__title">现代舒适客厅矢量素材</div>
37
                <div class="blog-slider__text">这是一款现代风格的舒适客厅矢量素材，包含了窗户、柜子、盆栽、沙发、茶几、地毯、落地灯、挂画等元素。素材提供了 EPS 和 AI 两种格式，含 JPG 预览图。</div>
38
                <a href="https://www.npc.ink/10919.html" class="blog-slider__button">详情</a>
39
            </div>
40
        </div>
41

42
        <div class="blog-slider__item swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="2" style="width: 750px; opacity: 0; transform: translate3d(-2250px, 0px, 0px); transition-duration: 0ms;">
43
            <div class="blog-slider__img">
44
                <img src="https://cdn.getimg.net/npc/2020/file/page/0116/pptcard/3.jpg" alt="惊悚的万圣节背景矢量素材">
45
            </div>
46
            <div class="blog-slider__content">
47
                <span class="blog-slider__code">2018-09-03</span>
48
                <div class="blog-slider__title">惊悚的万圣节背景矢量素材</div>
49
                <div class="blog-slider__text">这是一款惊悚的万圣节背景矢量素材，由黑夜、月亮、巫师、枯树、蝙蝠等元素设计。素材提供了 EPS 和 AI 两种格式，含 JPG 预览图。</div>
50
                <a href="https://www.npc.ink/10919.html" class="blog-slider__button">详情</a>
51
            </div>
52
        </div>
53
    <div class="blog-slider__item swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 750px; opacity: 0; transform: translate3d(-3000px, 0px, 0px); transition-duration: 0ms;">
54
            <div class="blog-slider__img">
55
                <img src="https://cdn.getimg.net/npc/2020/file/page/0116/pptcard/1.png" alt="秋叶和果实秋天背景矢量素材">
56
            </div>
57
            <div class="blog-slider__content">
58
                <span class="blog-slider__code">2018-08-31</span>
59
                <div class="blog-slider__title">秋叶和果实秋天背景矢量素材</div>
60
                <div class="blog-slider__text">这是一款秋叶和果实秋天背景矢量素材，格式为 EPS，含 JPG 预览图。</div>
61
                <a href="https://www.npc.ink/10919.html" class="blog-slider__button">详情</a>
62
            </div>
63
        </div></div>
64
    <div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
65
</div>
66

67
<link rel="stylesheet" href="https://cdn.getimg.net/npc/2020/file/public/swiper/swiper.min.css">
68
<link rel="stylesheet" href="https://cdn.getimg.net/npc/2020/file/page/0116/demo.css">
69

70

71
<script src="https://cdn.getimg.net/npc/2020/file/public/swiper/swiper.min.js"></script>
72
<script type="text/javascript">
73

74
var swiper = new Swiper('.blog-slider', {
75
  spaceBetween: 30,
76
  effect: 'fade',
77
  loop: true,
78
  mousewheel: {
79
    invert: false,
80
  },
81
  // autoHeight: true,
82
  pagination: {
83
    el: '.blog-slider__pagination',
84
    clickable: true,
85
  }
86
});
87

88
</script>