Как мне спрятать bootstrap 3 стрелки карусели на первом и последнем предмете этой вертикальной карусели? - PullRequest
Новая
       36

Как мне спрятать bootstrap 3 стрелки карусели на первом и последнем предмете этой вертикальной карусели?

0 голосов
/ 11 января 2020

Я хотел бы использовать https://codepen.io/danbhala/pen/eNZrQW вертикальный слайдер карусели. Единственный фрагмент кода, который мне не хватает, это стрелки, которые прячутся на первом и последнем элементе. Я попытался расширить его с помощью https://www.bootply.com/99354, который я нашел в inte rnet, изменил имена классов, но безуспешно. Кто-нибудь, кто может мне помочь? 

<body class="bg-grey-two" data-animated-bg="#f8f8f8:20-#eeeeee">
   <div class="container">
  <div class="page-header">
    <h1>Bootstrap Vertical Carousel</h1>
    <p class="lead">Out of the box, Bootstrap only comes with a traditional horizontal  carousel. This Pen has the HTML and CSS to get it to animate vertically with up/down carousel controls.</p>
  </div>
</div>

<div class="bg-info">
  <div class="container">
    <div id="carousel-example-vertical" class="carousel vertical slide" data-interval="false" Use data-wrap="false">
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 2</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 3</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 4</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 5</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
      </div>

      <!-- Controls -->
      <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 13 января 2020

Вот загрузочный лист: https://www.bootply.com/fJSwakXQTJ

Просто нужно изменить идентификатор карусели внутри js и выполнить некоторые изменения в именах классов: 

JS:

$('#carousel-example-vertical').on('slid', '', function() {
  var $this = $(this);

  if($('.carousel-inner .item:first').hasClass('active')) {
    $('.up.carousel-control').hide();
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    $('.down.carousel-control').hide();
  } else {
    $this.children('.carousel-control').show();
  }

});
...