вопросы начальной загрузки Карусель - PullRequest
Новая
       5

вопросы начальной загрузки Карусель

0 голосов
/ 07 июля 2019

1) Я использую класс carousel-thumbnails. Каким-то образом мои миниатюры все выровнены по левой стороне и друг над другом. Как я могу заставить их выравнивать центр один за другим.

2) Я не хочу видеть точки, которые показывают, какую фотографию показывают, потому что у меня есть эскизы. Как я могу от них избавиться?

Я просто хочу показать 5 миниатюр, хотя в моем каталоге больше фотографий. Как я могу запрограммировать его так, чтобы, как только я перешел на фото 4, он загружал фото 6 и отображал на миниатюрах фото 2-6.

Я попробовал скрытые-хз в классе = "Карусель-индикаторы". Это не сработало. Но я думаю, что когда он сработает, он также удалит мои эскизы. 

<div id="myCarousel" class="carousel slide carousel-thumbnails" data-ride="carousel">

       <!-- Wrapper for slides -->
        <div class="carousel-inner"role="listbox">
          <div class="item active">
            <img src="/fotos/auto.jpg" alt="Los Angeles" style="width:80%;">
            <div class="carousel-caption">
              <h3>test</h3>
              <p>Info tekst</p>
            </div>
          </div>

          <div class="item">
          <img src="/fotos/visinstukjes.jpg" alt="vis" style="width:80%;">
            <div class="carousel-caption">
              <h3>Vis</h3>
              <p>In stukjes of zoiets</p>
            </div>
          </div>

          <div class="item">
            <img src="/fotos/robot.jpg" alt="Chicago" style="width:80%;">
          </div>

          <div class="item">
           <img src="/fotos/vrachtwagen.jpg" alt="New york" style="width:80%;">
          </div>
        </div>

       <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>

        <!--/.Controls-->
        <ol class="carousel-indicators" >
          <li data-target="#carousel-thumb" data-slide-to="0" class="active">
            <img src="/fotos/auto.jpg" width="100">
          </li>
          <li data-target="#carousel-thumb" data-slide-to="1">
            <img src="/fotos/visinstukjes.jpg" width="100">
          </li>
          <li data-target="#carousel-thumb" data-slide-to="2">
            <img src="/fotos/robot.jpg" width="100">
          </li>
          <li data-target="#carousel-thumb" data-slide-to="2">
            <img src="/fotos/vrachtwagen.jpg" width="100">
          </li>
        </ol>
      </div>

1 Ответ

0 голосов
/ 07 июля 2019

используйте этот код: 

  .mystyle{
        background-image: url('bg.png');
        width: 100px !important;
        height: 100px !important;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
  }


<div id="myCarousel" class="carousel slide carousel-thumbnails" data-ride="carousel">

       <!-- Wrapper for slides -->
        <div class="carousel-inner"role="listbox">
          <div class="item active">
            <img src="bg.png" alt="Los Angeles" style="width:80%;margin:0 auto">
            <div class="carousel-caption">
              <h3>test</h3>
              <p>Info tekst</p>
            </div>
          </div>

          <div class="item">
          <img src="bg.png" alt="vis" style="width:80%;;margin:0 auto">
            <div class="carousel-caption">
              <h3>Vis</h3>
              <p>In stukjes of zoiets</p>
            </div>
          </div>

          <div class="item">
            <img src="bg.png" alt="Chicago" style="width:80%;;margin:0 auto">
          </div>

          <div class="item">
           <img src="bg.png" alt="New york" style="width:80%;;margin:0 auto">
          </div>
        </div>

       <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>

        <!--/.Controls-->
        <ol class="carousel-indicators" >
          <li data-target="#carousel-thumb" data-slide-to="0" class="active mystyle"></li>
          <li data-target="#carousel-thumb" data-slide-to="1" class="mystyle"></li>
          <li data-target="#carousel-thumb" data-slide-to="2" class="mystyle"></li>
          <li data-target="#carousel-thumb" data-slide-to="2" class="mystyle"></li>
        </ol>
      </div>
...