如何在Lightbox图库导航栏中居中选中的active图片并左浮图片

我在Django应用中使用Lightbox图库，点击图片会弹出包含主图、前后切换按钮和底部缩略图导航栏的模态框。现在需要实现底部导航栏中选中的active缩略图自动居中显示，同时缩略图保持左排列的布局。

JS代码 #

<script type="text/javascript">
    function openModal() {
        document.getElementById("myModal").style.display = "block";
      }

      function closeModal() {
        document.getElementById("myModal").style.display = "none";
      }

      var slideIndex = 1;
      showSlides(slideIndex);

      function plusSlides(n) {
        showSlides(slideIndex += n);
      }

      function currentSlide(n) {
        showSlides(slideIndex = n);
      }

      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
    }
</script>

{% endblock %}

HTML代码 #

<div id="myModal" class="modal">
    <div class="close-modal-container">
        <a href="#" class="btn d-flex align-items-center text-light" onclick="closeModal()" aria-label="{% trans "Close" %}">
            <span class="close-icon">{% icon 'CLOSE' 20 version='v2' %}</span>
            <span class="gr-link2 ml-2">{% trans "Close" %}</span>
        </a>
    </div>
    <div class="body-container">
        {% for file in files %}
            {% if file.is_image %}
                <div class="mySlides">
                    <div class="image-icon-cont">
                        <div class="d-flex flex-column">
                            <img class="modal-main-img" src="{{ file.file.url }}" alt="{{ file.tag }}">
                            <div class="my-1 text-light">
                                <span class="mr-1 subtitle1">{{ forloop.counter }} / {{ files|length }}</span>
                                <span class="subtitle1">{{ file.tag }}</span>
                            </div>
                        </div>
                        <a class="prev" onclick="plusSlides(-1)">{% icon "ARROW_LEFT" 24 version='v2' %}</a>
                        <a class="next" onclick="plusSlides(1)">{% icon "ARROW_RIGHT" 24 version='v2' %}</a>
                    </div>
                </div>
            {% endif %}
        {% endfor %}


        <div class="image-file-bottom-slides">
            {% for file in files %}
                {% if file.is_image %}
                    <img class="demo cursor slide-image mx-2" src="{{ file.file.url }}" alt="{{ file.tag }}" onclick="currentSlide({{ forloop.counter }})">
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

CSS代码 #

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: #212121;
  transform: translate(-50%, -50%);
  max-height: none;
  max-width: 100%;
  ::-webkit-scrollbar{
    display: none !important;
  }
}

/* Next & previous buttons */
.prev {
  position: absolute;
  cursor: pointer;
  padding: 10px;
  background-color: #FFFFFF;
  color: #212121;
  border-radius: 3px;
  left: 15px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.next {
  position: absolute;
  cursor: pointer;
  padding: 10px;
  background-color: #FFFFFF;
  color: #212121;
  border-radius: 3px;
  right: -30px;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #F2F2F2;
}

.modal-main-img {
  width: 70vw;
  height: 70vh;
  object-fit: cover;
}

.active,
.demo:hover {
  opacity: 0.6 !important;
}

.modal-main-img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.slide-image{
  width: 137.67px;
  height: 94px;
  cursor: pointer;
  opacity: 1;
  border-radius: 3px;
}

.image-file-bottom-slides{
  display: flex;
  background-color: #212121;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  justify-content: flex-end;
}
.image-file-bottom-slides::-webkit-scrollbar {
  display: none;
}

.mySlides{
  background-color: #212121;
}
.image-icon-cont{
  position: relative;
  display: flex;
  justify-content: center;
}
.body-container{
  padding: 40px;
}

1. 调整CSS布局 #

修改底部导航栏的CSS，移除右对齐属性并添加平滑滚动：

.image-file-bottom-slides{
  display: flex;
  background-color: #212121;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 移除justify-content: flex-end，恢复左对齐 */
  scroll-behavior: smooth; /* 添加平滑滚动效果 */
}

2. 修改JS代码添加居中逻辑 #

在showSlides函数末尾添加滚动定位代码，让选中的缩略图自动居中：

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";

    // 新增：让active缩略图居中显示
    const activeDot = dots[slideIndex - 1];
    const container = document.querySelector('.image-file-bottom-slides');
    // 计算居中位置：容器半宽 - 缩略图半宽 + 缩略图偏移量
    const scrollPosition = activeDot.offsetLeft - (container.offsetWidth / 2) + (activeDot.offsetWidth / 2);
    container.scrollTo({
        left: scrollPosition,
        behavior: 'smooth'
    });
}

效果说明 #

• 无论是点击缩略图切换，还是通过prev/next按钮切换，当前选中的缩略图都会自动滚动到导航栏居中位置
• 平滑滚动效果提升了交互体验，缩略图始终保持左排列的基础布局

内容的提问来源于stack exchange，提问作者Bokijonov