Я начинающий разработчик и первый постер по stackoverflow, и мне нужна помощь, чтобы найти причину проблемы с наведением курсора на веб-странице, которую я использую bootstrap, чтобы иметь карусель с миниатюрами на На моей странице, и после некоторого возни с кодом, индикаторы обмена изображениями выглядят почти так, как я хочу, однако при щелчке по ним или наведении указателя мыши на теги они просто исчезают. Я понятия не имею, что является причиной проблемы, и хотя я использую купленный шаблон, это единственная часть сайта с проблемами. Я новичок с CSS и Bootstrap, и я действительно в замешательстве, спасибо заранее
HTML:
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Art Expositores</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Art Expositores | (34) 3325-3264 | Expositores de qualidade com design personalizado feitos sob medida para o mercado varejo alimentar, gôndolas, expositores madeirados, checkouts, balções refrigerados e outros. Atendemos todo o Brasil." content="">
<meta name="keywords" content="expositores, expositores madeira, gôndolas, checkouts, balções refrigerados, supermercado, atacadista,
padaria, açougue, hipermercado, minimercado, hortifruti." />
<meta name="author" content="N Soluções Agência Digital - www.nsolucoes.digital" />
<!-- <link rel="manifest" href="site.webmanifest"> -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/gijgo.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- css dos botões -->
<link rel="stylesheet" href="css/botoes.css">
<!-- <link rel="stylesheet" href="css/responsive.css"> -->
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- header-start -->
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v5.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/pt_BR/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="943828549099534"
theme_color="#006600"
logged_in_greeting="Olá! Como podemos ajudar?"
logged_out_greeting="Olá! Como podemos ajudar?">
</div>
<header>
<div class="header-area" style="z-index: 9999">
<div id="sticky-header" class="main-header-area">
<div class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-xl-5 col-lg-6">
<div class="main-menu d-none d-lg-block">
<nav>
<ul id="navigation">
<li><a href="index.html">Inicio</a></li>
<li><a href="empresa.html">Empresa</a></li>
<li><a class="active">Produtos <i class="ti-angle-down"></i></a>
<ul class="submenu">
<li><a href="adega.html">Adega</a></li>
<li><a href="hortifruti.html">Hortifruti</a></li>
<li><a href="ovosealho.html">Ovos & Alhos</a></li>
<li><a href="churrasco.html">Churrasco</a></li>
<li><a href="padaria.html">Padaria</a></li>
<li><a href="lanchonete.html">Lanchonete</a></li>
<li><a href="salmourado.html">Salmourado</a></li>
<li><a href="vitrines.html">Vitrines & Recepção</a></li>
<li><a href="diversos.html">Diversos</a></li>
<li><a href="refrigeracao.html">Refrigeração</a></li>
<li><a href="gondolas.html">Gôndolas/Check-Out</a></li>
<li><a href="cvisual.html">Comunicação Visual</a></li>
<li><a href="projetos.html">Projetos 2D 3D</a></li>
<li><a href="hotelaria.html">Hotelaria</a></li>
</ul>
</li>
<li><a href="clientes.html">Clientes</a></li>
<li><a href="noticias.html">Notícias</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-2">
<div class="logo-img">
<a href="index.html">
<img src="img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-xl-5 col-lg-4 d-none d-lg-block">
<div class="book_room">
<div class="socail_links">
<ul>
<li>
<a href="https://www.facebook.com/artexpositoresmadeira/" target="_blank">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/artexpositores/" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
<!-- <li>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li> -->
</ul>
</div>
<!-- <div class="book_btn d-none d-lg-block">
<a href="sistema/index.php">Acesso Cliente</a>
</div> -->
</div>
</div>
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- bradcam_area_start -->
<div class="bradcam_area breadcam_adega">
<h3>Adega</h3>
<div class="text-center" style="margin-top: 75px;">
<span style="color: white;">Saiba Mais</span><br><br>
<a id="botao" href="#descer" class="btn btn-primary" style="padding-right: 25px; padding-left: 25px; border-radius: 50px; border-color: #006600; color: white; background-color: #006600;"><i class="fa fa-arrow-down" style="color: white;"></i></a>
</div>
</div>
<!-- bradcam_area_end -->
<br><br><br><br><br><br><br>
<!-- about_main_info_start -->
<!--================Blog Area =================-->
<section class="blog_area single-post-area text-center" id="descer">
<div class="container">
<div class="row">
<div class="col-lg-13 posts-list">
<div class="single-post">
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="img/produtos/1adega/new/1.jpg" alt="Primeiro slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/2.jpg" alt="Segundo slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/3.jpg" alt="Terceiro slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/4.jpg" alt="Quarto slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/5.jpg" alt="Quinto slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/6.jpg" alt="Sexto slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/7.jpg" alt="Sétimo slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/8.jpg" alt="Oitavo slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/9.jpg" alt="Novo slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/produtos/1adega/new/10.jpg" alt="Décimo slide">
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" style="font-weight: bold; font-size: larger; border-radius: 50%; background-color: green; color: white; padding: 10px;"><</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" style="font-weight: bold; font-size: larger; border-radius: 50%; background-color: green; color: white; padding: 10px;">></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<p align="center">
<ol class="carousel-indicators align-items-center" >
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="0" class="active"> <img class="d-block w-100" src="img/produtos/1adega/new/1.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="1"><img class="d-block w-100"
src="img/produtos/1adega/new/2.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="2"><img class="d-block w-100"
src="img/produtos/1adega/new/3.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="3"><img class="d-block w-100"
src="img/produtos/1adega/new/4.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="4"><img class="d-block w-100"
src="img/produtos/1adega/new/5.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="5"><img class="d-block w-100"
src="img/produtos/1adega/new/6.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="6"><img class="d-block w-100"
src="img/produtos/1adega/new/7.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="7"><img class="d-block w-100"
src="img/produtos/1adega/new/8.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="8"><img class="d-block w-100"
src="img/produtos/1adega/new/9.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" style="width: 100px;" data-slide-to="9"><img class="d-block w-100"
src="img/produtos/1adega/new/10.jpg"
class="img-fluid"></li>
</ol>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- forQuery_start -->
<div class="forQuery">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1 col-md-12">
<div class="Query_border">
<div class="row align-items-center justify-content-center">
<div class="col-xl-6 col-md-6">
<div class="Query_text">
<p>Peça sua Adega</p>
</div>
</div>
<div class="col-xl-6 col-md-6">
<div class="phone_num">
<a href="https://api.whatsapp.com/send?1=pt_BR&phone=5534988989840&text=Ol%C3%A1!%20estou%20no%20site%20da%20Art%20Expositores,%20gostaria%20de%20%20saber%20mais%20detalhes%20sobre%20Adegas" target="blanck" class="mobile_no">WhatsApp</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- forQuery_end-->
<!--================ Blog Area end =================-->
<!-- footer -->
<footer class="footer">
<div class="copy-right_text">
<div class="container">
<div class="footer_border"></div>
<div class="row">
<div class="col-xl-8 col-md-7 col-lg-9">
<p class="copy_right">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0.-->
Copyright ©<script>document.write(new Date().getFullYear());</script> Art Expositores. Todos os direitos reservados.
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0.-->
</div>
<div class="col-xl-4 col-md-5 col-lg-3">
<div class="socail_links">
<a href="https://nsolucoes.digital" target="_blank" style="color: white; font-size: small;">Desenvolvido por N Soluções</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--botões-->
<button class="gototop" id="toTop" style="border-radius: 50%; bottom: 145px; background-color: #006600"><i class="fa fa-chevron-up" style="color: white;"></i></button>
<a href="http://api.whatsapp.com/send?1=pt_BR&phone=+5534988989840" class="gototop" target="_blank" style="bottom: 90px; background-color: #006600; border-radius: 50%"><i class="fa fa-whatsapp" style="color: white;"></i></a>
<!-- JS here -->
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/ajax-form.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/scrollIt.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/nice-select.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/gijgo.min.js"></script>
<!--contact js-->
<script src="js/contact.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/mail-script.js"></script>
<!-- código do botão de scroll-->
<script>
$("#toTop").click(function () {
//1 second of animation time
//html works for FFX but not Chrome
//body works for Chrome but not FFX
//This strange selector seems to work universally
$("html, body").animate({scrollTop: 0}, 1000);
});
</script>
<script type="text/javascript">
document.querySelectorAll('#botao').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<script src="js/main.js"></script>
</body>
</html>
Я не буду публиковать стиль . css потому что это минимизировано, если не запрошено; для всего остального я использую bootstrap .min. css