Good.
I have a project with multiple views that contain a carousel. For example, this is my home page
AndwhenIclickonthefirst"See More" button, this appears
So far so good! But if I leave this "window" and click on another "see more" button, this happens to me, that is, the slide does not start on the first photo.
Myhtmlcodeisasfollows(Ihaveonlytwogalleriesbecauseastheyarequitethecodeisquiteextensive):
window.onload = function() {
$(document).ready(function() {
$('#data').after('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
}
body {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
width: 960px;
margin: 40px auto;
}
h2 {
font-size: 21px;
color: #008000;
font-weight: normal;
}
#ancora {
text-align: right;
color: black;
position: absolute;
top: 205px;
right: 200px;
text-decoration: underline;
}
#customers {
border-collapse: collapse;
}
#customers td,
#customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
background-color: black;
color: white;
}
th,
td {
padding: 5px;
text-align: center;
}
.center {
text-align: center;
}
.btn-info {
color: #fff;
background-color: rgba(0, 128, 0, 1);
border-color: rgba(0, 0, 0, .075);
cursor: pointer !important;
}
.btn {
text-align: left;
}
.btn-info:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:active:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:focus {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.container {
width: auto;
height: auto;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
* {
-webkit-box-sizing: content-box;
}
.imagem {
width: 150px;
height: 150px;
object-fit: cover;
}
#data tr {
display: none;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
#data td,
#data th {
border: 1px solid #ddd;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
background-color: black;
color: white;
}
td {
width: 350px;
text-align: center;
}
a:-webkit-any-link {
color: white;
cursor: pointer;
text-decoration: underline;
}
#nav {
margin: 0 auto;
float: none;
display: table;
}
#nav a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
#nav a.active {
background-color: #008000;
color: white;
border: 1px solid #008000;
}
#nav a:hover:not(.active) {
background-color: #ddd;
}
#nav a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.carousel-control.right {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Projetos de Jardim & Lazer</h2>
<a id="ancora" href="/Home/Index">Página Inicial</a>
<table id="data" style="width:100%">
<tbody>
<tr>
<th></th>
<th><strong>Tipo de relva</strong></th>
<th><strong>Descrição</strong></th>
<th><strong>Localidade</strong></th>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Boticas1.jpg"></td>
<td><strong>DOMO® SCALA (PHILI)</strong></td>
<td>Boticas Hotel Art & Spa</td>
<td>Boticas - Vila Real</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Boticas Hotel Art & Spa</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Boticas2.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas3.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas4.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas5.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® SCALA (PHILI)
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Seia1.jpg"></td>
<td><strong>DOMO® MONZA</strong></td>
<td>Centro Escolar</td>
<td>Seia - Guarda</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Centro Escolar de Seia</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Seia2.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia3.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia4.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® MONZA
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>