Bootstrap Carousel: Индикаторы не отображаются, анимация не работает для всех слайдов, изменение уровня слайдов - PullRequest
Новая
       38

Bootstrap Carousel: Индикаторы не отображаются, анимация не работает для всех слайдов, изменение уровня слайдов

1 голос
/ 24 сентября 2019

Я хотел бы отображать индикаторы (теги h3 / p) в своем коде на графиках в карусели BS.Похоже, это не работает, прячась за графиками.Как сделать так, чтобы оно отображалось?

Ниже приведены мои проблемы, решения которых мне нужно решить.

  1. Индикаторы дисплея (теги h3, p).
  2. Анимация отсутствуетработает для всех слайдов, работает только для активных.
  3. Удалите отображение черного цвета на слайдах и сохраните белый фон.

Ниже приведен тег для индикаторов, которые я пробовал. 

<ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

Полный HTML-код: 

<!DOCTYPE html>
<html lang="en">
<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.4.0/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>google.charts.load('current', { packages: ['corechart'] });</script>
     <script language='JavaScript'>function drawChart(ExecutedCount, NonExecutedCount, DivID) { var data = google.visualization.arrayToDataTable([['Status', 'Outcome', { role: 'style' }], ['Executed', ExecutedCount, '#8BC34A'], ['Not Executed', NonExecutedCount, '#ff4c4c']]); var groupData = google.visualization.data.group(data, [{ column: 0, modifier: function () { return 'total' }, type: 'string' }], [{ column: 1, aggregation: google.visualization.data.sum, type: 'number' }]); var formatPercent = new google.visualization.NumberFormat({ pattern: '#,##0.0%' }); var formatShort = new google.visualization.NumberFormat({ pattern: 'short' }); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, { calc: function (dt, row) { var amount = formatShort.formatValue(dt.getValue(row, 1)); var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1)); return amount + ' (' + percent + ')'; }, type: 'string', role: 'annotation' }]); var options = { 'legend': 'none', tooltip: { trigger: 'none' }, 'width': 650, 'height': 400, animation: { duration: 1500, startup: true } }; var chart = new google.visualization.ColumnChart(document.getElementById(DivID)); chart.draw(view, options); } google.charts.setOnLoadCallback(function () { drawChart(70, 5, 'GChart_0'); }); google.charts.setOnLoadCallback(function () { drawChart(80, 10, 'GChart_1'); }); google.charts.setOnLoadCallback(function () { drawChart(90, 15, 'GChart_2'); });</script>
    <link rel='icon' type='Icon.ico' href='Icon.ico' />
</head>
<body>
<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div align="center" class="item active" id='GChart_0' style='width:800; height:500;border-style:groove;border-width: 1px;'>
      <h3 style="background-color: gold;">Los Angeles</h3>
        <script type='text/javascript'>drawChart(70, 5, 'GChart_0');</script>
         <p background-color: gold;>LA is always so much fun!</p>
      </div>
      <div align="center" class="item" id='GChart_1' style='width:800; height:500;border-style:groove;border-width: 1px;'>
      <h3>NY</h3>
        <script type='text/javascript'>drawChart(80, 10, 'GChart_1');</script>
         <p>NY is always so much fun!</p>
      </div>    
      <div align="center" class="item" id='GChart_2' style='width:800; height:500;border-style:groove;border-width: 1px;'>
      <h3>California</h3>
            <script type='text/javascript'>drawChart(90, 15, 'GChart_2');</script>
             <p>California is always so much fun!</p>
      </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>
  </div>
</div>
</body>
</html>

Индикаторы должны отображаться с указанием позиции, анимация должна работать для всех слайдов и удалять / изменять цвета слайдов по умолчанию.Пожалуйста, проверьте и помогите.

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Индикаторы доступны в своей позиции.Но из-за white индикатора он не отображается.

Попробуйте применить приведенный ниже CSS. 

<style>
  .carousel-indicators li {
    background-color: #ccc !important;
  }
  .carousel-indicators .active {
    background-color: #000 !important;
  }
</style>

Рабочий пример вы можете увидеть здесь - Пример

0 голосов
/ 24 сентября 2019

В настоящее время его белый фон активен, а белая полоса на индикаторе, поэтому вы не можете его видеть, поэтому просто добавьте ниже код 

   .carousel-indicators .active {
        background-color: #000000;
    }

    .carousel-indicators li {
        border: 1px solid #020202;
    }
...