Carousel" Active " in html

Question

Carousel" Active " in html

Good.

I have a project with multiple views that contain a carousel. For example, this is my main page

And when I press, for example, the first button" See More " appears this

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 in the first photo.

My html code is as follows (I just have to two galleries because as they are quite a lot the code is quite extensive):

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>
  <script src="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">&times;</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">&times;</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>

Can anyone help me? Another question, Where do I change the transition time from one photo to another?

0

c#html asp.net-mvc carousel

Author: Leandro Angelo, 2018-05-17

Source