bootstrap 轮播图显示多张图片

前言：
有个项目想用bootstrap 轮播图显示从数据库里读出的图片，学了一半被告知不用了，所以想把现在知道的记录下来，防止忘记，白学一阵就很难受。
项目
下面是6张本地图片的轮播图显示，将其改造成从数据库里读取出来的所有图片的轮播图显示（我想实现的轮播图显示与常见的轮播图略有不同，点击下方小图片在其上方显示大图片）
区别在这段代码：

style="background-image: url(img/bg-img/36.jpg);"

<!--游戏展示-->
                    <!--使用Bootstrap 轮播（Carousel）插件-->
                    <div id="gameSlides" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="img/bg-img/35.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="img/bg-img/36.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="img/bg-img/37.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="img/bg-img/38.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="img/bg-img/39.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="img/bg-img/40.jpg" alt="">
                            </div>
                        </div>
                        <ol class="carousel-indicators">
                            <li data-target="#gameSlides" data-slide-to="0" class="active" style="background-image: url(img/bg-img/35.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="1" style="background-image: url(img/bg-img/36.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="2" style="background-image: url(img/bg-img/37.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="3" style="background-image: url(img/bg-img/38.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="4" style="background-image: url(img/bg-img/39.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="5" style="background-image: url(img/bg-img/40.jpg);"></li>
                        </ol>
                    </div>

常见的：教程容易搜到类似菜鸟教程

个人的一些实验所得
1、改了轮播指标的背景图，可以看到下方缩略图变了，但是海报位置(上方大图)仍然是按照“轮播项目”内的图片地址显示（我把第2张图和第6张图换成和第一张图一样的，然后点击第二张图，还是显示第二张图原本的样子）


2、验证了 data-slide-to=“0” 的作用，在轮播指标里又加了两张图片，分别设为“1”和“2”，点击第7、8张图片现实的是第2、3张图片，可知data-slide-to="0"是指向第1张图片，以此类推。


我把data-slide-to=“0，1，2…6"删了之后运行项目发现点击下方缩略图上方海报图不反应，可知在此类（无上一页、下一页）轮播图中data-slide-to=”？“还是相当关键的。
而在有上下分页的轮播图中，删除轮播指标内的data-slide-to=”？"并无影响。如下图：

3、本想通过thymeleaf从后台取数据进行遍历然后通过bootstrap 轮播图显示，但是出现一个问题，轮播指标和轮播项目里都有一个active（对轮播项目来说是默认显示的图片，对轮播指标来说是默认选择的图片或高亮的小图标），如果在一个div块里进行遍历要么都是active要么都不是active，无法设置默认的。
上面问题本人没有解决办法，想了一个取巧的办法，将本地的一张图片设置为默认显示的图片（即将需要默认显示的数据写死，然后遍历其余数据）