TopBanana的名片|「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金。

简介

本次演示使用了简单的div格式，简单的实现了卡片轮滑切换。一个好的名片展示当然离不开各种好看的图片，但是我发现一个问题，就是码上掘金不能添加外部网站的图片，貌似只能通过文章引入图片，然后通过文章的图片url添加到代码中。

图片资源

个人简介图片

这里我用的是一张小蜘蛛的图片，我很喜欢小蜘蛛的设定，他的故事能引起我的共鸣。

工作图片

这里我用的是一段很简洁的代码来表示我的态度，只不过是只要学不死就往死里学的另一种代码表示。

爱好

emm，我想作为码农，应该不止我一个人喜欢宅在家里吧，追剧，看书，玩游戏，一个人舒舒服服的坐着或者躺在自己温暖的房间，尤其是在寒冷的冬天，桌子上再放上一倍热气腾腾的咖啡，再惬意不过了。

代码篇

HTML

<div>
            <div>
              <img src="" alt="">
            </div>
            <div>
              <span>Hobby</span>
              <div>おた</div>
              <div>生活圈子很小，喜欢宅在家里看书，看剧，玩游戏，偶尔把我的想象力倾泻在键盘上，最喜欢的是《better call saul》，刷剧看书涉猎很广，星战，权游，绝命毒师，爱死机，尼采。。。。。。</div>
              <a href="">More</a>
            </div>
</div>

展示的是三个片段，所以需要三个这种格式的div，其中外部用一个div包裹，中间的图片和文字介绍各用一个div包裹，中间的具体格式可以根据需求自己调整，这里只是简单的贴出来一个整体框架，具体的css格式因为比较多，就不在这里贴出来了。

js

var swiper = new Swiper('.blog-slider', {
      spaceBetween: 30,
      effect: 'fade',
      loop: true,
      mousewheel: {
        invert: false,
      },

      pagination: {
        el: '.blog-slider_pagination',
        clickable: true,
      }
    });

这里的交互用到了Swiper，Swiper常用于移动端网站的内容触摸滑动， Swiper是纯js打造的滑动特效插件，能实现轮播图、触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper是开源的，大家可以去官网下载学习使用哦。