Я нахожусь в процессе обновления веб-сайта, который я администрирую, чтобы использовать Bootstrap 4. Мне нужна карусель на странице индекса, которая рекламирует предстоящие события.Мои события определены в файле JSON, а HTML создается с помощью различных подпрограмм PHP, которые читают этот JSON.Поэтому все элементы в карусели сконструированы одинаково.
Изначально отображаются 3 события, и при использовании элементов управления карусели становятся доступными дополнительные блоки из 3.
На первый взгляд, все работает нормально - элементы управления, прокрутка до следующего или предыдущего блока из 3 и так далее.Проблема в ссылках.Нажав на кнопку «Подробнее» на любом из первых 5 событий, вы перейдете на дополнительную страницу и отобразите подробную информацию о событии, как и ожидалось.Но нажав кнопку события 6 и далее, вы перейдете к последнему событию на второй странице.Все ссылки, на которые ссылается карусель, существуют на дополнительной странице.
Следующие элементы отображаются в разделе HEAD страницы
<link rel='stylesheet' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/indexCarousel.css' />
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='scripts/bootstrap.min.js'></script>
<script type='text/javascript' src='scripts/bjqs-1.3.min.js' ></script>
Ниже приведен источник страницы тела сгенерированной страницы.(Я опускаю события 4-9 для краткости - я уверен, что вы можете выяснить, как это выглядит):
<div class='container-fluid'>
<div class='row'>
<div class='col-md-10 col-center m-auto'>
<div id='myCarousel' class='carousel slide' data-ride='carousel' data-interval='0'>
<div class='carousel-inner'>
<div class='item carousel-item active'>
<div class='row'>
<div class='col-sm-4'>
<div class='thumb-wrapper'>
<div class='img-box'>
<img src='images/photo1.jpg' class='img-responsive img-fluid' alt=''>
</div>
<div class='thumb-content'>
<h4>Description of photo1</h4>
<p>some other text</p>
<a href='secondpage.php#link1' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
</div>
</div>
</div>
<div class='col-sm-4'>
<div class='thumb-wrapper'>
<div class='img-box'>
<img src='images/photo2.jpg' class='img-responsive img-fluid' alt=''>
</div>
<div class='thumb-content'>
<h4>Description of photo2</h4>
<p>some other text</p>
<a href='secondpage.php#link2' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
</div>
</div>
</div>
<div class='col-sm-4'>
<div class='thumb-wrapper'>
<div class='img-box'>
<img src='images/photo3.jpg' class='img-responsive img-fluid' alt=''>
</div>
<div class='thumb-content'>
<h4>Description of photo3</h4>
<p>some other text</p>
<a href='secondpage.php#link3' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
</div>
</div>
</div>
</div> <!-- end of row -->
</div> <!-- end of carousel-item -->
<div class='item carousel-item'>
<div class='row'>
...
<div class='col-sm-4'>
<div class='thumb-wrapper'>
<div class='img-box'>
<img src='images/photo10.jpg' class='img-responsive img-fluid' alt=''>
</div>
<div class='thumb-content'>
<h4>Description of photo10</h4>
<p>some other text</p>
<a href='secondpage.php#link10' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<a class='carousel-control left carousel-control-prev' href='#myCarousel' data-slide='prev'><i class='fa fa-angle-left'></i></a>
<a class='carousel-control right carousel-control-next' href='#myCarousel' data-slide='next'><i class='fa fa-angle-right'></i></a>
</div>
</div>
</div> <!-- end of row -->
</div> <!-- end of container -->
Любые указатели на то, почему ссылки 6 и далее не работают, будут благодарныполучено.Я почесал голову в течение нескольких недель, и это почти последний кусок ребрендинга, поэтому я хочу, чтобы он заработал.