swiper 立体3D相册滑动效果

我就是我 2022-04-04 11:47 596阅读 0赞

<link rel="stylesheet" type="text/css" href="https://www.swiper.com.cn/dist/css/swiper.min.css">
    
    body {
                margin: 0;
                padding: 0;
            }
            .swiper-container {
                width: 100%;
                padding-top: 10px;
                padding-bottom: 30px;
            }
            .swiper-slide {
                background-position: center;
                background-size: cover;
                width: 240px;
                height: 320px;
    
            }
    		.swiper-slide img{
    			width: 100%;
    			height: 100%;
    		}

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="http://www.yuetuvip.com/img/banner4.jpg" >
                </div>
                <div class="swiper-slide">
                	<img src="http://www.yuetuvip.com/img/banner4.jpg" >
                </div>
                <div class="swiper-slide">
                	<img src="http://www.yuetuvip.com/img/banner4.jpg" >
                </div>
                <div class="swiper-slide">
                	<img src="http://www.yuetuvip.com/img/banner4.jpg" >
                </div>
    
            </div>
        </div>

<script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script>
        <script type="text/javascript">
            	var mySwiper = new Swiper('.swiper-container', {
            	effect: 'coverflow', //3d滑动
            	grabCursor: true,
            	centeredSlides: true,
            	slidesPerView: 'auto',
            	loop:true,
            	slidesPerView: 2,
            	coverflow: {
            		rotate: 0,  //设置为0
            		stretch: 0,
            		depth: 200,
            		modifier: 2,
            		slideShadows : true
            	}   
            });
        </script>

欢迎讨论！！~~~

发表评论取消回复

表情：

评论列表（有 0 条评论，596人围观）

还没有评论，来说两句吧...

相关阅读

相关【3D旋转相册效果实现】

最终效果图展示: ![在这里插入图片描述][20190929222316567.gif] HTML部分 1.首先在html中写上名为 perspective 的di

缺乏、安全感/ 2023年08月17日 16:55/ 0 赞/ 82 阅读

相关 3D立体相册

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2022年12月29日 11:28/ 0 赞/ 125 阅读

相关实现3D立体相册

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

以你之姓@/ 2022年12月25日 15:56/ 0 赞/ 174 阅读

相关 swiper-翻页效果---3D翻转效果

本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

妖狐艹你老母/ 2022年09月23日 04:00/ 0 赞/ 586 阅读

相关 HTML5 3D立体图片相册

[HTML5][]非常强大，尤其是和CSS3结合，有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用，它可以用鼠标多拽从多个角

古城微笑少年丶/ 2022年08月04日 16:52/ 0 赞/ 126 阅读

相关 CSS3通过3D变换立体旋转相册

图片镇楼： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

川长思鸟来/ 2022年04月14日 02:57/ 0 赞/ 317 阅读

相关 swiper的图册滑动效果

首先，我们要做的效果是这样子的！！~~ ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

柔情只为你懂/ 2022年04月04日 12:25/ 0 赞/ 336 阅读

相关 swiper 立体3D相册滑动效果

<link rel="stylesheet" type="text/css" href="https://www.swiper.com.cn/dist/css/swip

我就是我/ 2022年04月04日 11:47/ 0 赞/ 597 阅读

相关 css3完成图片3d立体旋转效果

<view class="cuboidBox"> <view class="cuboidFace frontFace"><image class="mo

心已赠人/ 2021年11月29日 14:56/ 0 赞/ 520 阅读

相关 3D立体动态相册实现代码

创建dandelioncloud.html拷贝html保存。html完成。创建创建 css文件夹，在创建好的css文件夹里创建style.css复制css样式到st...

红太狼/ 2020年05月20日 02:35/ 1 赞/ 986 阅读