Html "active" of the Carousel

Asked

Viewed 133 times

0

Good.

I have a project with several views that contain a Carousel. For example, this is my main page p1

and when I press, for example, the first "See more" button this appears p2

So far so good! But if I leave this "window" and press another "see more" button, this happens to me, IE, the slide does not start in the first photo. p3

My html code is as follows (I only have two galleries because 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 someone help me? Another question, where I change the transition time from one photo to another?

c# html asp.net-mvc carousel

  • Friend would be good you also put the HTML and JS you used. Only with CSS complicates to answer you...

  • I already edited the code! I put only "two sections of images" not to be extended.

No answers

Browser other questions tagged c# html asp.net-mvc carousel

You are not signed in. Login or sign up in order to post.