Topic: left and right arrow control in Basic carousel missing

rocwen free asked 7 years ago


https://od.lk/f/NF8xNTE4NDgxOTlf no other css and js in page, quite simple page,only mdb3 pro ,bootstrap,jquery.

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


Marta Wierzbicka staff answered 7 years ago


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

rocwen free answered 7 years ago


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();
global.css
.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;}

rocwen free answered 7 years ago


<!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>


Could you please share your code with us?

Please insert min. 20 characters.

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