Topic: left and right arrow control in Basic carousel missing
https://od.lk/f/NF8xNTE4NDgxOTlf
no other css and js in page, quite simple page,only mdb3 pro ,bootstrap,jquery.
Add comment
Could you please share your code with us?
<!DOCTYPE html>
<html xmlns="http://java.sun.com/jsf/html">
<head>
<meta charset="UTF-8">
<meta name="keywords" content=""/>
<meta name="description" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="./css/mdb.css"/>
<link rel="stylesheet" type="text/css" href="./css/global.css"/>
<style>
.top-nav-collapse {
background-color: #F44336 !important;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #3F729B !important;
}
}
</style>
</head>
<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-97785532-1', 'auto');
ga('send', 'pageview');
</script>
<div class="container-fluid">
<!--Navbar-->
<nav class="navbar navbar-fixed-top z-depth-1 scrolling-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-light" href="#">北欧商旅联盟</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="/html/map/siteseeing.html#" class="waves-effect waves-light">图游北欧 <span class="sr-only">(current)</span></a></li>
<li><a href="/html/tourGuide/tourGuide.html" class="waves-effect waves-light">本地导游</a></li>
<li><a href="#" class="waves-effect waves-light">北欧名表</a></li>
<li><a href="/postcard.html" class="waves-effect waves-light">北欧邮局明信片</a></li>
<li><a href="/postcard.html" class="waves-effect waves-light">奇幻极光游</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">联系我们</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">联盟服务<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">团找导游</a></li>
<li><a href="#">购物旅团</a></li>
<li><a href="#">老人儿童接机</a></li>
<li><a href="#">本地翻译</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">登录<b class="caret"></b></a>
<div class="dropdown-menu">
<!--Email validation-->
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="email" id="form9" class="form-control validate">
<label for="form9" data-error="wrong" data-success="right">输入您Email邮箱地址</label>
</div>
<!--Password validation-->
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form10" class="form-control validate">
<label for="form10" data-error="wrong" data-success="right">输入您的密码</label>
</div>
<div class="md-form form-group">
<fieldset class="form-group">
<input type="checkbox" class="filled-in" id="checkbox2">
<label for="checkbox2">保存在本机</label>
</fieldset>
</div>
<div class="md-form form-group">
<a href="" class="btn btn-primary btn-lg">Login</a>
</div>
</div>
</li>
<li class="nav-divider"></li>
<li><a href="/html/members/RegisterPage.html" class="waves-effect waves-light">注册</a></li>
<li class="nav-divider"></li>
<li>
<div id="chooseName6" class="chooseName">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'zh-CN', includedLanguages: 'ar,da,en,fa,fi,is,ja,jv,ko,mg,no,sv,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<!-- Carousel -->
<div id="carousel1" class="carousel slide carousel-fade hoverable">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active">
</li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner z-depth-2" role="listbox">
<!-- First slide -->
<div class="item active">
<div class="view overlay hm-blue-slight">
<a><img src="https://mdbootstrap.com/images/slides/slide%20(7).jpg" class="img-responsive" alt="slide1">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
</div>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<div class="view overlay hm-blue-slight">
<a><img src="https://mdbootstrap.com/images/slides/slide%20(23).jpg" class="img-responsive" alt="slide2">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
</div>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<div class="view overlay hm-blue-slight">
<a><img src="https://mdbootstrap.com/images/slides/slide%20(2).jpg" class="img-responsive" alt="slide3">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
</div>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control new-control " href="#carousel1" role="button" data-slide="prev">
<span class="fa fa fa-angle-left waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control new-control" href="#carousel1" role="button" data-slide="next">
<span class="fa fa fa-angle-right waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<!-- /.carousel -->
</div>
</div>
<div class="row ">
<div class="col-md-10 col-md-offset-1">
<div class="row extra-padding-both-side" style="background: #deebee">
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="/img/own/siteseeing.jpg" class="img-responsive" alt="">
<a href="/html/map/siteseeing.html">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive"
alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="/img/own/Ole-Christian-Salomonsen-landscape.jpg" class="img-responsive"
alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-10 col-md-offset-1">
<div class="row extra-padding-both-side" style="background: #999999">
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="/img/own/siteseeing.jpg" class="img-responsive" alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive"
alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive"
alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-10 col-md-offset-1">
<div class="row extra-padding-both-side" style="background: #deebee">
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="/img/own/siteseeing.jpg" class="img-responsive" alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="/img/own/Ole-Christian-Salomonsen-landscape.jpg" class="img-responsive"
alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
<div class="col-md-4">
<!--Image Card-->
<div class="card extra-space-wrapper hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive"
alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis
nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis
architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
</div>
<!--Image Card-->
</div>
</div>
</div>
</div>
<footer class="page-footer blue center-on-small-only">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">Here you can use rows and columns here to organize your footer content.</p>
</div>
<div class="col-md-6">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright text-center rgba-black-light">
<div class="container-fluid">
© 2017-2022 Copyright: <a href="https://nortourunited.com"> 北欧商旅联盟 </a>
</div>
</div>
</footer>
</div>
</body>
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/mdb.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/global.js" type="text/javascript" charset="utf-8"></script>
</html>
global.js
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});
$('.carousel').carousel();
.row.extra-padding-both-side{
padding-left: 40px;
padding-right: 40px;
}
.card.extra-space-wrapper{
margin-bottom: 30px;
margin-top: 30px;
}
div.goog-te-gadget-simple {border-radius: 5px; background: #000000; padding: 7px;}
a.goog-te-menu-value { text-decoration: none;}
a.goog-te-menu-value > span {color: #95caff;}
Hi,
without additional scripts, js, jquery and css files and code, carousel works fine. Try to copy our carousel from here: http://mdbootstrap.com/mdb3/javascript/carousel/ and paste this to pure mdb file, and then add other things.
Best,
Marta
If the picture is one, then it disappears
Marcin Luczak staff commented 3 years ago
Hi,
Please create a snippet showing your issue. This will help me recreating your problem and help you.
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags