项目实训（八）分类界面的展示

目录

一、Swiper插件

1、安装swiper

2、导入css中

二、分类界面设计

1、左侧side部分代码

2、右侧详细内容

3、成果展示

---

一、Swiper插件

1、安装swiper

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

2、导入css中

@import '../../public/static/css/swiper-bundle.min.css';

二、分类界面设计

1、左侧side部分代码

<div class="swiper mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="t_thumbs">
                      <div class="t_thumbs_img">
                        <img src="../../public/static/img/推荐1.jpg" alt="">
                      </div>
                      <div class="t_thumbs_info">
                        <a href="#" class="t_thumbs_title">炙黄芪</a>
                        <p class="t_thumbs_body">黄芪的炮制加工品</p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="t_thumbs">
                      <div class="t_thumbs_img">
                        <img src="../../public/static/img/推荐2.jpg" alt="">
                      </div>
                      <div class="t_thumbs_info">
                        <a href="#" class="t_thumbs_title">天冬</a>
                        <p class="t_thumbs_body">百合科植物天冬的块根</p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="t_thumbs">
                      <div class="t_thumbs_img">
                        <img src="../../public/static/img/推荐3.jpg" alt="">
                      </div>
                      <div class="t_thumbs_info">
                        <a href="#" class="t_thumbs_title">丁香</a>
                        <p class="t_thumbs_body">桃金娘科植物丁香的花蕾</p>
                      </div>
                    </div>
                  </div>

                </div>

2、右侧详细内容

 <div class="home-1-slider">
              <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="t_sliders">
                      <div class="t_sliders_info">

                        <h4 class="t_sliders_title">炙黄芪</h4>
                        <p class="t_sliders_body">益气补中 属补虚药下分类的补气药</p>
                        <p class="t_sliders_text">  本品呈圆形或椭圆形的厚片，直径0.8~3.5厘米，厚0.1～0.4厘米。外表皮淡棕黄色或淡棕褐色，略有光泽，可见纵皱纹或纵沟。切面皮部黄白色，木部淡黄色，有放射状纹理和裂隙。具蜜香气，味甜，略带黏性，嚼之微有豆腥味。</p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="t_sliders">
                      <div class="t_sliders_info">
                        <h4 class="t_sliders_title">天冬</h4>
                        <p class="t_sliders_body">养阴润燥、润肺生津。属补虚药下属分类的补阴药。</p>
                        <p class="t_sliders_text">长纺锤形，略弯曲，长5～18厘米，直径0.5～2厘米。表面黄白色至淡黄棕色，半透明，光滑或具深浅不等的纵皱纹，偶有残存的灰棕色外皮。质硬或柔润，有黏性，断面角质样，中柱黄白色。气微，味甜、微苦。</p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="t_sliders">
                      <div class="t_sliders_info">
                        <h4 class="t_sliders_title">丁香</h4>
                        <p class="t_sliders_body">温中降逆、补肾助阳 属温里药</p>
                        <p class="t_sliders_text"> 略研棒状。花冠圆球形，花瓣4，覆瓦状抱合，棕褐色至黄褐色，花瓣内为雄蕊和花柱，搓碎后可见众多黄色细粒状的花药。萼筒圆柱状，略扁，有的稍弯曲，红棕色或棕褐色，上部有4枚三角状的萼片，“十”字形分开。质坚实，富油性。气芳香浓烈，味辛辣，有麻舌感。</p>
                      </div>
                    </div>
                  </div>


                </div>
                <div class="swiperButton">
                  <div class="swiper-button-next">
                    <i class="fas fa-angle-right"></i>
                  </div>
                  <div class="swiper-button-prev">
                    <i class="fas fa-angle-left"></i>

                  </div>
                </div>

              </div>

            </div>

3、成果展示

 其中点击左侧、滑动右侧内容、点击翻页按钮都可以实现翻页效果。