последовательные контейнеры не работают. 1-й работает, а второй не отображается в браузере - PullRequest
Новая
       15

последовательные контейнеры не работают. 1-й работает, а второй не отображается в браузере

0 голосов
/ 05 июня 2019

Я пытался работать с загрузчиком слайдера карусели. Я пытался поставить два ползунка один за другим. первый работает, но второй не отображается в браузере. где моя ошибка?

Я попытался проверить код в своем браузере. это показывает, что второй контейнер имеет размер 750X1. он имеет высоту 1. Я не мог найти решение таким образом. 

<!DOCTYPE html>
<html>
<head>    
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/animate/animate.css">
<link rel="stylesheet" href="css/owl-carosel/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl-carosel/owl.theme.default.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/magnefic-popup/magnific-popup.css">
<title></title>
</head>
<body>
<section id="team">
    <div class="content-box">
        <div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
            <h3> Our Team </h3>
            <div class="content-title-underline"></div>
        </div>

        <div class="container">
            <div class="row wow animated fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                <div class="col-md-12">
                    <div id="team-members" class="owl-carousel owl-theme">

                        <div class="team-member">
                            <img src="images/achievements/ac1500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Fariza Rahman </h4>
                                <h4 class="team-member-designation"> CEO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>



                        <div class="team-member">
                            <img src="images/achievements/ac2500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name">Khandaker Mushfiqur Rahman </h4>
                                <h4 class="team-member-designation"> CTO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>



                        <div class="team-member">
                            <img src="images/achievements/ac3500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Tabia Binte Farazi </h4>
                                <h4 class="team-member-designation"> CFO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>




                        <div class="team-member">
                            <img src="images/achievements/ac4500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Nazmus Sakib </h4>
                                <h4 class="team-member-designation"> CMO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="team-member">
                            <img src="images/achievements/ac9500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Nazmus Sakib </h4>
                                <h4 class="team-member-designation"> CMO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Наша команда 

        <div class="container">
            <div class="row wow animated fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                <div class="col-md-12">
                    <div id="team-members" class="owl-carousel owl-theme">

                        <div class="team-member">
                            <img src="images/achievements/ac1500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Fariza Rahman </h4>
                                <h4 class="team-member-designation"> CEO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>



                        <div class="team-member">
                            <img src="images/achievements/ac2500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name">Khandaker Mushfiqur Rahman </h4>
                                <h4 class="team-member-designation"> CTO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>



                        <div class="team-member">
                            <img src="images/achievements/ac3500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Tabia Binte Farazi </h4>
                                <h4 class="team-member-designation"> CFO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>




                        <div class="team-member">
                            <img src="images/achievements/ac4500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Nazmus Sakib </h4>
                                <h4 class="team-member-designation"> CMO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="team-member">
                            <img src="images/achievements/ac9500x500.jpg" class="img-responsive" alt="team member">
                            <div class="team-member-info text-center">
                                <h4 class="team-member-name"> Nazmus Sakib </h4>
                                <h4 class="team-member-designation"> CMO </h4>
                                <ul class="social-list">
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
                                    <li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>




<script src="JS/jquery.js "></script>
<script src="JS/bootsrape/bootstrap.min.js "></script>
<script src="JS/wow/wow.min.js "></script>
<script src="JS/owl-carousel/owl.carousel.min.js "></script>
<script src="JS/custom.js "></script>
<script src="JS/owl-carosel/owl.carousel.min.js"></script>
<script src="JS/magnefic-popup/jquery.magnific-popup.min.js"></script>
<script src="JS/counter/jquery.waypoints.min.js"></script>
<script src="JS/counter/jquery.counterup.min.js"></script>
<script src="JS/easing/jquery.easing.1.3.js"></script>

Я ожидаю 2 ползунка карусели один за другим.

Ответы [ 2 ]

0 голосов
/ 05 июня 2019

Я решил проблему. Наличие одинакового идентификатора для обоих ползунков создавало проблему в файле JS, где я писал функции для ползунка карусели. я просто изменил имя второго идентификатора с "team-members" на "team-members2" и написал функцию карусели для "# team-members2" в моем файле js.

0 голосов
/ 05 июня 2019

ID должны использоваться только для уникальных единичных экземпляров. Если у вас есть несколько экземпляров, требующих одного и того же кода, вы должны использовать классы.

...