引导滑块轮播，其中部分图像和后图像保留在屏幕上
问题描述 投票：0回答：1
我正在尝试为引导滑块实现以下设计：你是正确的Stack，它在这篇文章中似乎确实是很多代码。有时这是编程网站中帖子的性质，主要是代码。
所以在写完顶部段后，堆栈仍然需要我添加更多细节。让我补充一点，如果有人可以帮助我，我会非常感激，或者指向一个可以设计我的模板的画廊，或者给我一些如何根据我的需要转换自举滑块的想法。
这是代码：
CSS：
<style>
.selected img {
opacity:0.5;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: visible !important;
}
</style>
剧本：
<script>
$('#myCarousel').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
</script>
和代码：
<div class="container" style="margin-top:20px;">
<!-- main slider carousel -->
<div class="row">
<div class="col-md-12" id="slider">
<div class="col-md-3"> </div>
<div class="col-md-6" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-responsive">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-responsive">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-responsive">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-responsive">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-responsive">
</div>
<div class="item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-responsive">
</div>
<div class="item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-responsive">
</div>
</div>
<!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="col-md-3"> </div>
</div>
</div>
<!--/main slider carousel-->
<!-- thumb navigation carousel -->
<div class="col-md-12 hidden-sm hidden-xs text-center" id="slider-thumbs" style="margin-top:20px;">
<!-- thumb navigation carousel items -->
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected">
<img src="http://placehold.it/80x60&text=one" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-1">
<img src="http://placehold.it/80x60&text=two" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-2">
<img src="http://placehold.it/80x60&text=three" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-3">
<img src="http://placehold.it/80x60&text=four" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-4">
<img src="http://placehold.it/80x60&text=five" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-5">
<img src="http://placehold.it/80x60&text=six" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-6">
<img src="http://placehold.it/80x60&text=seven" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-7">
<img src="http://placehold.it/80x60&text=eight" class="img-responsive">
</a></li>
</ul>
</div>
</div>
1个回答
0
投票
投票
我建议使用第三方插件，如swiper。 Swiper有一些非常漂亮的演示：http://idangero.us/swiper/demos/
我正在谈论的演示是这个，我认为它适合您的需求：http://idangero.us/swiper/demos/300-thumbs-gallery.html
您需要的代码（除了包括swiper脚本和css文件）可以在github上找到：https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 80%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
</script>
</body>
</html>最新问题
- 修改运行Python子进程时的环境变量
- 如果我想要数据为空，如何连接表
- 如何配置 GCS Spark 连接器以使用来自两个不同项目的两个不同的 GCS 存储桶？
- PHP Laravel 版本 11. 找不到类错误
- System.NotSupportedException：不支持“System.Type”实例的序列化和反序列化。路径：$.HttpContext.Features.Key
- WinUI3 FindWindow() 不断返回 0x0000000000000000
- 如何运行 Jest 测试并覆盖一个文件
- Cartopy/matplotlib FancyArrowPatch 在文本图层上使用 text_adjust 时不渲染
- gitignore 文件问题：无法忽略node_modules
- 使用各种分隔符将输入文本从字符串动态格式化为文本块
- 在.Net Core 2.2 Web API中添加WCF引用失败
- 在 python pandas 中读取 UTC 时间戳并将其转换为欧洲日期
- 在Python 2.6中使用logging.SysLogHandler时如何设置ident字符串？
- AJAX - 在 mysql 中插入数据
- 如何处理具有多个精确匹配的web.xml？
- Android系统源码中如何修改最小宽度的值
- pytest 中的全局夹具
- 如何在ActiveAdmin索引页下方显示新资源表单？
- 如何以正确的方式在组件中获取角度/谷歌地图参考
- 如何获取CnosDB中某个传感器的总数据量？
© www.soinside.com 2019 - 2024. All rights reserved.