Bootstrap 4轮播，带有小缩略图 [英] Bootstrap 4 carousel with to small thumbnails
本文介绍了Bootstrap 4轮播，带有小缩略图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在网站上实现了带有缩略图的自举轮播，但是缩略图尺寸很小，太小了.
I've implemented a bootstrap carousel with thumbnails on my website but the thumbnail size is off, they are way too small.
我在 foto_new 页面上摆弄了一些CSS代码.但是我对CSS的了解还不足以使它正常工作.
I fiddled some with the CSS code within the foto_new page. But my knowledge of CSS is not enough to get this working.
这是我的页面代码:
<head>
<title>Reis Foto"s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/lo.css">
<link rel="stylesheet" href="css/boots.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
#myCarousel .list-inline {
white-space:nowrap;
overflow-x:auto;
}
#myCarousel .carousel-indicators {
position: static;
left: initial;
width: initial;
margin-left: initial;
}
#myCarousel .carousel-indicators > li {
<!--width: initial;-->
<!--height: initial;-->
width: 200px;
height: 50px;
text-indent: initial;
}
<!--#myCarousel .carousel-indicators li img {-->
<!--display: block;-->
<!--opacity: 0.5;-->
<!--}-->
#myCarousel .carousel-indicators li.active img {
opacity: 1;
}
#myCarousel .carousel-indicators li:hover img {
opacity: 0.75;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen-->
<div class="col-md-12" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)">
<div id="myCarousel" class="carousel slide" data-ride="carousel" align="center">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/fotos/auto.jpg" alt="Los Angeles" style="width:80%;">
</div>
<div class="carousel-item">
<img src="/fotos/robot.jpg" alt="Chicago" style="width:80%;">
</div>
<div class="carousel-item">
<img src="/fotos/vrachtwagen.jpg" alt="New york" style="width:80%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="/fotos/auto.jpg" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="/fotos/robot.jpg" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="/fotos/vrachtwagen.jpg" class="img-fluid">
</a>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>我希望缩略图更大.
推荐答案
不确定其余CSS怎么玩.
Not sure how this will play with the rest of your CSS.
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
#myCarousel .carousel-indicators {
position: static;
margin-top:20px;
}
#myCarousel .carousel-indicators > li {
width:100px;
}
#myCarousel .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#myCarousel .carousel-indicators li.active img {
opacity: 1;
}
#myCarousel .carousel-indicators li:hover img {
opacity: 0.75;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.min.js" integrity="sha256-3Iu0zFU6cPS92RSC3Pe4DBwjIV/9XKyzYTqKZzly6A8=" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen-->
<div class="col-md-12" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)">
<div id="myCarousel" class="carousel slide" data-ride="carousel" align="center">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://dummyimage.com/600x400/000/fff" alt="Los Angeles" style="width:80%;">
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/600x400/000/fff" alt="Chicago" style="width:80%;">
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/600x400/000/fff" alt="New york" style="width:80%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://dummyimage.com/600x400/000/fff" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://dummyimage.com/600x400/000/fff" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="https://dummyimage.com/600x400/000/fff" class="img-fluid">
</a>
</li>
</ol>
</div>
</div>
</div>
</div>它看起来确实像是响应，并且您可以通过以下方式更改缩略图的大小:
It does look like it is response, and you can change the thumbnail sizes with the:
#myCarousel .carousel-indicators > li {
width:100px;
}
popper.js加载有一些问题，这就是为什么它被注释掉了.
There is some issues with the popper.js loading, which is why it is commented out.
有一个小提琴:演示
这篇关于Bootstrap 4轮播，带有小缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
