Bootstrap Carousel不适用于web浏览器,但适用于移动设备



我已经在很多方面纠正了我的引导程序转盘在移动设备上而不是在web浏览器中的工作。甚至我也清除了浏览器的缓存点击指示器时没有滑动效果,甚至一切都井然有序。其他电脑正在工作。请在这里查看我的网站

这是我的鳕鱼

$(document).ready(function() {
$('#myCarousel').carousel({
interval: 5000
});
});
.ff {
max-width: 4% !important;
}
<!-- bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Fancybox app -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<!-- Font awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- Gallery BRAND WEB DESIGN PORTFOLIO -->
<section>
<div class="container">
<div class="row">
<div class="col-md-12 pb-5 padding text-center portfoliotitle">
<h5>WEBSITE SHOWCASE</h5>
<h1>This website development company <br> has actualized numerous website ideas into reality. <br> Indulge yourself into our website development and <br> design projects.</h1>
</div>

</div>
</div>
</section>

<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="myCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item py-5 active">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item py-5">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-2 ff">
<a class="carousel-control-prev text-dark" href="#myCarousel" role="dot" data-slide="prev">
<span class="fa fa-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-dark" href="#myCarousel" role="dot" data-slide="next">
<span class="fa fa-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

我在一天后找到了解决方案。如果从窗口关闭动画,它将关闭所有浏览器中的所有动画。从设置>易于访问>在Windows中显示动画>ON。这是我从stackoverflow那里得到的帮助。

最新更新