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
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
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
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;}
<!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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No