将主站点导航添加到Bootstrap中的swiper对象

Question

我正在使用Bootstrap模板，并且试图将主站点导航更改为页面底部的图像交换器。我尝试了几种方法，都没有成功。

我已经能够链接到网站，但是我无法在html页面中链接。

请提供解决或帮助我解决上述功能的方法。

HTML代码：

站点菜单

<!-- menu start -->
            <div class="fadeIn-element" id="menu">
                <nav class="menu">
                    <ul>
                        <li>
                            <a href="#home">Home</a>
                        </li>
                        <li>
                            <a href="#news">Buttons/Lists</a>
                        </li>
                        <li>
                            <a href="#services">Gestures</a>
                        </li>
                        <li>
                            <a href="#works">Drag & Drop</a>
                        </li>
                        <li>
                            <a href="#web">Web Services</a>
                        </li>
                        <li>
                            <a href="#example">Examples</a>
                        </li>
                    </ul>
                </nav>
            </div><!-- menu end -->

缩略图刷

 <!-- thumbnail slider start -->
                <div class="hero-bg">
                    <!-- thumbnail slider top start -->
                    <div class="swiper-container swiper-slider-top">
                        <!-- thumbnail slider IMG start -->
                        <div class="swiper-wrapper">
                            <div class="swiper-slide thumbnail-slider-bg-1 overlay cover-all"></div>
                            <div class="swiper-slide thumbnail-slider-bg-2 overlay cover-all"></div>
                            <div class="swiper-slide thumbnail-slider-bg-3 overlay cover-all"></div>
                            <div class="swiper-slide thumbnail-slider-bg-4 overlay cover-all"></div>
                            <div class="swiper-slide thumbnail-slider-bg-5 overlay cover-all"></div>
                            <div class="swiper-slide thumbnail-slider-bg-6 overlay cover-all"></div>
                            <div class="swiper-slide thumbnail-slider-bg-7 overlay cover-all"></div>
                            <div class="swiper-slide thumbnail-slider-bg-8 overlay cover-all"></div>
                        </div><!-- thumbnail slider IMG end -->
                        <!-- controls start -->
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div><!-- controls end -->
                    </div><!-- thumbnail slider top end -->
                    <!-- thumbnail slider bottom start -->
                    <div class="swiper-container swiper-slider-bottom swiper-slider-bottom-text">
                        <!-- thumbnail slider thumbnail IMG start -->
                        <div class="swiper-wrapper">
                                        <div class="swiper-slide thumbnail-slider-bg-1"> News <a class='default-link'  onclick='location.a href = "#news"'></a></div>
                            <div class="swiper-slide thumbnail-slider-bg-2"></div>
                            <div class="swiper-slide thumbnail-slider-bg-3"></div>
                            <div class="swiper-slide thumbnail-slider-bg-4"></div>
                            <div class="swiper-slide thumbnail-slider-bg-5"></div>
                            <div class="swiper-slide thumbnail-slider-bg-6"></div>
                            <div class="swiper-slide thumbnail-slider-bg-7"></div>
                            <div class="swiper-slide thumbnail-slider-bg-8"></div>
                        </div><!-- thumbnail slider thumbnail IMG end -->
                    </div><!-- thumbnail slider bottom end -->
                </div><!-- thumbnail slider end -->

JavaScript代码：

站点菜单

// 7. menu
    $("#menu li a, #menu-mobile li a").on("click", function(e) {
        e.preventDefault();
        animateSlider(this.hash);
    });
    function animateSlider(hash) {
        if (!$("#containerOT div.open").length) {
            if (hash == "#news") {
                openPopup(hash);
            }
            if (hash == "#about") {
                openPopup(hash);
            }
            if (hash == "#services") {
                openPopup(hash);
            }
            if (hash == "#works") {
                openPopup(hash);
            }
            if (hash == "#web") {
                openPopup(hash);
            }
            if (hash == "#example") {
                openPopup(hash);
            }
        } else {
            if (hash == "#home") {
                openAndClose(hash)
            }
            if (hash == "#news") {
                openAndClose(hash)
            }
            if (hash == "#about") {
                openAndClose(hash)
            }
            if (hash == "#services") {
                openAndClose(hash)
            }
            if (hash == "#works") {
                openAndClose(hash)
            }
            if (hash == "#web") {
                openAndClose(hash)
            }
            if (hash == "#example") {
                openAndClose(hash)
            }
        }
    }
    function openPopup(hash) {
        $(hash + "-lifting").slideToggle().addClass("open");
    }
    function openAndClose(hash) {
        if ($(hash + "-lifting").hasClass("open")) {
            $($(hash + "-lifting")).slideToggle().removeClass();
        } else {
            $("#containerOT div.open").slideToggle().removeClass();
            $(hash + "-lifting").slideToggle().addClass("open");
        }
    }
	

缩略图刷

// 15. swiper
    // 15.1. swiper thumbnail slider horizontal thumbs
    var swipersliderTop = new Swiper(".swiper-slider-top", {
        direction: "vertical",
		nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        autoplay: 4000,
        speed: 1600,
        spaceBetween: 0,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 1,
        loop: true,
        slideToClickedSlide: true,
        mousewheelControl: true,
        keyboardControl: true
    });
    var swipersliderBottom = new Swiper(".swiper-slider-bottom", {
		direction: "horizontal",
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 1,
        loop: true,
        slideToClickedSlide: true,
		mousewheelControl: true,
        keyboardControl: true
    });
    swipersliderTop.params.control = swipersliderBottom;
    swipersliderBottom.params.control = swipersliderTop;
	// 15.2. swiper thumbnail slider vertical thumbs
    var swipersliderTopthumbsVertical = new Swiper(".swiper-slider-top-thumbs-vertical", {
        direction: "horizontal",
		nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        autoplay: 4000,
        speed: 1600,
        spaceBetween: 0,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 1,
        // loop: true,
        slideToClickedSlide: true,
        mousewheelControl: true,
        keyboardControl: true
    });
    var swipersliderBottomthumbsVertical = new Swiper(".swiper-slider-bottom-thumbs-vertical", {
		direction: "vertical",
        spaceBetween: 10,
        centeredSlides: true,
        // slidesPerView: "auto",
		slidesPerView: 7,
        touchRatio: 1,
        // loop: true,
        slideToClickedSlide: true,
		mousewheelControl: true,
        keyboardControl: true
    });
    swipersliderTopthumbsVertical.params.control = swipersliderBottomthumbsVertical;
    swipersliderBottomthumbsVertical.params.control = swipersliderTopthumbsVertical;
    // 15.3. swiper timeline slider
    var timelineSwiper = new Swiper(".timeline .swiper-container", {
        direction: "vertical",
        autoplay: false,
        speed: 1600,
        spaceBetween: 0,
        loop: false,
        mousewheelControl: true,
        keyboardControl: true,
        pagination: ".swiper-pagination",
        paginationBulletRender: function(swiper, index, className) {
            var year = document.querySelectorAll(".swiper-slide")[index].getAttribute("data-year");
            return '<span class="' + className + '">' + year + '</span>';
        },
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        paginationClickable: true,
        breakpoints: {
            768: {
                direction: "horizontal",
            }
        }
    });
    // 15.4. swiper parallax slider
    var swiper = new Swiper(".parallax .swiper-container", {
        autoplay: 4000,
        speed: 800,
        parallax: true,
        mousewheelControl: true,
        keyboardControl: true,
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        paginationClickable: true
    });