基于swiper 左右布局 缩略图

已于 2023-03-23 17:42:52 修改
阅读量460 收藏
点赞数 1
文章标签： html5 前端
于 2023-03-23 16:11:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54401934/article/details/129733265
版权

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="format-detection" content="telephone=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta http-equiv="x-ua-compatible" content="IE=11,10,9,8">

    <script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

    <link href="https://unpkg.com/swiper@6/swiper-bundle.css" rel="stylesheet" type="text/css">

    <script language="javascript" type="text/javascript" src="https://unpkg.com/swiper@6/swiper-bundle.js"></script>

    <script type="text/javascript">

        var Column = 3;

    </script>

    <style>

        /* clear float */

        .cf {

            zoom: 1

        }

        /* for IE */

        .cf:after {

            content: ".";

            display: block;

            clear: both;

            font-size: 0;

            height: 0;

            visibility: hidden;

            overflow: hidden

        }

        /* for other */

        .swiper-container.gallery-top,

        .swiper-container.gallery-thumbs {

            margin-left: auto !important;

            margin-right: auto !important;

            padding: 10px 0;

        }

        .swiper-slide img {

            display: block;

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

        .gallery-thumbs .swiper-button-prev:after,

        .gallery-thumbs .swiper-button-next:after {

            color: #fff;

            content: 'prev';

            font-size: 16px;

            background: #898f96;

            padding: 12px 8px;

            opacity: 0.5;

        }

        .gallery-thumbs .swiper-button-prev {

            transform: rotateZ(90deg);

            top: 18px;

            left: 54%;

            margin-left: -18px;

        }

        .gallery-thumbs .swiper-button-next {

            transform: rotateZ(-90deg);

            top: auto;

            bottom: -6px;

            right: 46%;

            margin-right: -10px;

        }

        .swiper-container-wrapper {

            height: 100%;

            width: 100%;

        }

        .swiper-button-next,

        .swiper-button-prev {

            color: #fff;

        }

        .gallery-top .swiper-slide-duplicate,

        .gallery-top .swiper-slide {

            background-size: cover;

            background-position: center;

            background-color: #fff;

            display: flex;

            flex-flow: column nowrap;

            justify-content: center;

        }

        .gallery-top .swiper-slide-duplicate .description,

        .gallery-top .swiper-slide-duplicate .title,

        .gallery-top .swiper-slide .description,

        .gallery-top .swiper-slide .title {

            display: block;

            opacity: 0;

            transition: 0.5s ease 0.5s;

        }

        .gallery-top .swiper-slide-duplicate-active .description,

        .gallery-top .swiper-slide-duplicate-active .title,

        .gallery-top .swiper-slide-active .description,

        .gallery-top .swiper-slide-active .title {

            opacity: 1;

        }

        .gallery-thumbs .swiper-slide-duplicate-active .title,

        .gallery-thumbs .swiper-slide-active .title {

            margin-bottom: 0.5rem;

            font-size: 24px;

            color: #fff;

            opacity: 0.3;

        }

        .gallery-thumbs .swiper-slide-duplicate-active .description,

        .gallery-thumbs .swiper-slide-active .description {

            font-size: 16px;

            color: #fff;

            opacity: 0.3;

        }

        .gallery-top {

            width: 100%;

            height: 100%;

        }

        /* 设置箭头符号 */

        /* .gallery-thumbs .swiper-button-prev::after,

        .gallery-thumbs .swiper-button-next::after {

            font-family: "iconfont" !important;

            content: "\e7e7";

        } */

        @media all and (-ms-high-contrast:none) {

            *::-ms-backdrop,

            .gallery-thumbs .swiper-button-prev {

                top: 0;

            }

        }

        @media (min-width: 480px) {

            .gallery-thumbs {

                width: 20%;

            }

        }

        .gallery-thumbs .swiper-wrapper {

            flex-direction: row;

        }

        @media (min-width: 480px) {

            .gallery-thumbs .swiper-wrapper {

                flex-direction: column;

            }

        }

        .gallery-thumbs .swiper-slide {

            width: 25%;

            flex-flow: row nowrap;

            height: 100%;

            opacity: 0.5;

            cursor: pointer;

        }

        @media (min-width: 480px) {

            .gallery-thumbs .swiper-slide {

                flex-flow: column nowrap;

                width: 100%;

            }

        }

        .gallery-thumbs .swiper-slide-thumb-active {

            opacity: 1;

        }

    </style>

</head>

<div class="" style="width: 80%; margin: auto;">

    <div class=" cf ">

        <div class="swiper-container-wrapper cf">

            <!-- paddingright30 box-sizing area_80 mo_paddingright0 -->

            <div class="" style="padding-right: 30px; float: left; width: 80%; box-sizing: border-box;">

                <!-- Slider main container 大图 -->

                <div class="swiper-container gallery-top gallery-top1">

                    <div class="swiper-wrapper">

                        <div class="swiper-slide ">

                            <img src="自己的图片链接" class='dis width100' />

                        </div>

                        <div class="swiper-slide ">

                            <img src="自己的图片链接" class='dis width100' />

                        </div>

                        <div class="swiper-slide ">

                            <img src="自己的图片链接" class='dis width100' />

                        </div>

                        <div class="swiper-slide ">

                            <img src="自己的图片链接" class='dis width100' />

                        </div>

                        <div class="swiper-slide ">

                            <img src="自己的图片链接" class='dis width100' />

                        </div>

                    </div>

                </div>

            </div>

            <!-- Slider thumbnail container 小图 -->

            <div class="swiper-container gallery-thumbs gallery-thumbs1" style="float: right; width: 20%;">

                <div class="swiper-wrapper">

                    <div class="swiper-slide "> <img src="自己的图片链接"

                            class='dis width100' />

                    </div>

                    <div class="swiper-slide "> <img src="自己的图片链接"

                            class='dis width100' />

                    </div>

                    <div class="swiper-slide "> <img src="自己的图片链接"

                            class='dis width100' />

                    </div>

                    <div class="swiper-slide "> <img src="自己的图片链接"

                            class='dis width100' />

                    </div>

                    <div class="swiper-slide "> <img src="自己的图片链接"

                            class='dis width100' />

                    </div>

                </div>

                <div class="swiper-button-next"></div>

                <div class="swiper-button-prev"></div>

            </div>

        </div>

    </div>

    <script>

        window.addEventListener('load', function () {

            if (window.innerWidth > 800) {

                $('.gallery-thumbs').height($('.gallery-top img').height())

            } else {

            }

        })

        $(document).ready(function () {

            var galleryThumbs1 = new Swiper(".gallery-thumbs1", {

                loop: true,

                direction: "horizontal",

                spaceBetween: 15,

                slidesPerView: 3,

                centeredSlides: true,

                watchSlidesProgress: true,

                breakpoints: {

                    800: {

                        direction: "vertical",

                        slidesPerView: 3,

                        spaceBetween: 30,

                    }

                }

            });

            var galleryTop1 = new Swiper(".gallery-top1", {

                loop: true,

                direction: "horizontal",

                navigation: {

                    nextEl: ".gallery-thumbs1 .swiper-button-next",

                    prevEl: ".gallery-thumbs1 .swiper-button-prev"

                },

                thumbs: {

                    swiper: galleryThumbs1

                }

            });

        });

    </script>

    </body>

</html>

A Duan先森。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中使用swiper6.0实现缩略图控制
WhyBecause的博客
05-28 2460
实现效果如下： swiper6.0的样式引入路径变了！！！ 1、npm install swiper 2、main.js 中引入 import '../node_modules/swiper/swiper-bundle.css'; //swiper6.0样式路径 import Swiper, { Navigation, Autoplay,Thumbs } from 'swiper'; //相关组件 Swiper.use([ Navigation, Autoplay,Thumbs]); 3、轮播图组件
Vue框架使用swiper5实现带缩略图的轮播图
weixin_49600762的博客
12-20 4276
我这里用的是 "swiper": "5.4.5"和"vue-awesome-swiper": "^3.1.3"，很多人在这就会有疑问，这两版本不对应啊，不急，这就是我发这文章的意义，一是记录一下自己的坑，二是同道中人参考。我为啥不装对应的包呢，因为我这个项目前面写的人已经装了这个了，我不能改呀，改了别人的就会出错了。首先看效果图先，毕竟需求都是不一样的嘛，我发这个文章主要是看了一些网页上的好多都存在缩略图那里的高亮居中问题，所以本文章主要就是实现当前图片看到的一些效果。
swiper8在react中用法
imber___zsk的博客
08-11 885
代码】swiper8在react中用法。
swiper自动循环轮播--第一页swiper空白
最新发布
qq_39650208的博客
04-17 368
现象复现：如果swiper-slide设置的是写死的值，则不会有问题，有问题的现象是使用图片，会给第一页和最后一页加个swiper-slide，但是没有赋予图片的属性值，导致不显示。1、如果第一页图片不多的话，可以针对性的给第一页图片赋值显示。注意：第一个标签添加的是slide列表的最后一个图片, 后一个标签则相反添加的是第一个图片.2、其实img标签是好使的，可以切换成img标签。当最后一个swiper 跳转到 第一个 swiper时。，设置after属性来设置占位图，解决问题。采用swiper组件。
Swiper响应式缩略图片幻灯片切换特效
06-01
jQuery基于Swiper制作垂直缩略图/水平缩略图片滑动切换展示，支持响应式布局。自适应浏览器屏幕大小响应式图片幻灯片特效。
jQuery+swpier实现轮播图（左边大图右边小的缩略图），附Vue实现案例
chenacxz的博客
12-19 1609
代码文件，Vue代码在文件里，下载即可使用 链接: https://pan.baidu.com/s/1Ul2ImTYgiqJHgqqW9ptmww 提取码: 1pmf 先附实现效果 引入文件 <link rel="stylesheet" type="text/css" href="css/swiper.css"> <link rel="stylesheet" ...
swiper-缩略图多次使用-左右方向
u010481557的博客
07-05 814
//预览图 $('.banxue-item .gallery-thumbs').each(function(i,ele){ window['galleryThumbs'+i] = new Swiper($(ele), { spaceBetween: 10, slidesPerView: 4, }); var prev = $(ele).find('.swiper-button-prev'); var next = $(ele).find('.swiper-button-ne.
swiper商品缩略图和大图点击时联动
aitengteng1的博客
04-27 1551
<divclass="imgshow"> <swiper:options="swiperOption"ref="swiperTop"class="swiper-no-swiping"> <!--<divclass="swiper-wrapper">--> <swiper-slide...
基于swiper图片切换显示特效代码
03-20
在【基于swiper图片切换显示代码】中，我们主要关注的是如何利用Swiper实现一个带有缩略图的画廊布局切换特效。 1. **Swiper的基本用法** - 安装：可以通过npm或直接下载CDN链接来引入Swiper到项目中。 - 初始化...
基于swiper响应式图片轮播.zip
07-04
总结起来，基于Swiper的响应式图片轮播利用了HTML、CSS和JavaScript三者的协同工作，为用户提供了一种直观、流畅的浏览体验。通过自定义样式和配置，你可以创建一个完全符合项目需求的个性化轮播组件。Swiper的灵活...
swiper图片画廊切换展示特效
06-10
总结来说，"swiper图片画廊切换展示特效"利用Swiper.js库创建了一个具有缩略图导航的交互式图片展示组件。这个组件包含了HTML结构、CSS样式和JavaScript逻辑，实现了平滑的图片切换、鼠标拖动以及自适应不同设备的...
SliderPro插件(带缩略图),可以取代swiper的插件
08-04
这个插件带有缩略图功能，使得用户在浏览时能够方便地通过缩略图预览和导航，提供了丰富的自定义选项和功能，可以替代其他如swiper等常用的滑动插件。 SliderPro的主要特点包括： 1. **响应式设计**：SliderPro...
swiper全屏响应式幻灯片代码.zip
07-04
这款代码实例包含了全屏展示、自动响应屏幕尺寸、左右滑动切换图片、带有缩略图导航以及可点击的左右方向箭头等特性。对于开发者来说，这些功能使得Swiper成为构建高质量移动应用或网站的重要工具。 1. **全屏显示*...
swiper 缩略图与banner联动
qq_42176747的博客
08-19 356
版本：“vue-awesome-swiper”: “4.1.1”,“swiper”: “5.4.5” 我的方法是两个轮播存在，一个展示，另一个多个展示，主要使用slideTo方法联动。
swiper轮播图_vue实现带有略缩图的轮播组件
weixin_39839541的博客
11-25 628
最近要用到一个带有略缩图的轮播组件，又碍于时间过于紧迫，于是就想到使用swiper插件来实现这个组件。实现过程中可以是说爽的很，效率真的是很高。对于一些不愿意造轮子的伙伴来说简直是mvp助攻啊！没有什么事是一张gif图解决不了！如果有，那就两张带有略缩图的轮播组件swiper的使用文档和api用法可以直接在官网查看！直接搜索swiper即可。在vue中使用得安装vue-awesome-swiper...
swiper插件怎么设置鼠标经过缩略图标切换图片
qq_40947819的博客
07-20 2388
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide active-nav" data-index="0"> <img src="./common/images/s1.jpg" alt="">
vue中使用swiper( vue-awesome-swiper4.0及以上版本)缩略图轮播
lichanzhaifeng的博客
05-29 8048
效果图： 1.npm安装 npm install swiper vue-awesome-swiper --save vue-awesome-swiper4.0以上版本一定要swiper 和 vue-awesome-swiper4.0一起安装，否则会报错 2.组件里调用完整代码 <template> <div class="thumb-example"> <!-- swiper1 --> <swiper class="swiper galler
使用 swiper 做轮播图
17 的博客
02-09 7352
虽然我是一个喜欢造轮子的人，但是对于 swiper，我还是直接拿过来用了，功能很多，也很方便。本文介绍一些常用的功能。
vue 插件vue-awesome-swiper实现 三张图片，左右两边显示一半的效果的示例
weixin_50450473的博客
07-26 2381
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
vue3swiper轮播图缩略图
08-24
很抱歉，我没有找到关于Vue3和Swiper轮播图缩略图的具体信息。根据我所了解的，目前在Vue.js中使用Swiper插件时，一般使用vue-awesome-swiper组件来实现轮播图，而此组件并没有特别提及关于缩略图的功能。如果你需要在Vue.js中实现轮播图缩略图的功能，你可能需要搜索其他的插件或者自定义开发来满足你的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [基于vue.js轮播组件vue-awesome-swiper实现轮播图](https://download.csdn.net/download/weixin_38556205/13239506)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue中使用轮播图swiper](https://blog.csdn.net/dcl199728/article/details/126504763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值