Карусель начальной загрузки скрывает элементы управления в первом и последнем

Как скрыть левый элемент управления, если карусель находится на первом элементе, и как скрыть правый элемент управления, если карусель находится на последнем элементе.

Мой код ниже успешно скрывает элемент управления, но при загрузке страницы он выглядит так, как будто первый элемент карусели находится посередине, и пользователь может пройти весь путь с помощью левого или правого элемента управления.

http://bootply.com/99354

Спасибо


javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-carousel
person user667430    schedule 09.12.2013    source источник
comment
Решение Bootstrap 3 также работает для нескольких каруселей на одной странице: stackoverflow.com/questions/11441474/   -  person Karl Adler    schedule 13.03.2015

Ответы (4)


arrow_upward
10
arrow_downward

Ссылка для начальной загрузки

$('#myCarousel').on('slid', '', checkitem);  // on caroussel move
$('#myCarousel').on('slid.bs.carousel', '', checkitem); // on carousel move

$(document).ready(function(){               // on document ready
    checkitem();
});

function checkitem()                        // check function
{
    var $this = $('#myCarousel');
    if($('.carousel-inner .item:first').hasClass('active')) {
        $this.children('.left.carousel-control').hide();
        $this.children('.right.carousel-control').show();
    } else if($('.carousel-inner .item:last').hasClass('active')) {
        $this.children('.left.carousel-control').show();
        $this.children('.right.carousel-control').hide();
    } else {
        $this.children('.carousel-control').show();
    } 
}
person BENARD Patrick    schedule 09.12.2013
comment
Я пытаюсь использовать ваш код, но элемент управления if всегда обнаруживает, что активный класс находится в первом элементе. P.S.: для Bootstrap3 событие slid.bs.carousel - person Fred K; 05.06.2014
comment
@FredK Не могли бы вы предоставить скрипт со своим кодом, пожалуйста? Я посмотрю на это. - person BENARD Patrick; 05.06.2014
comment
Привет @TheLittlePig, спасибо, но я нашел решение. Проблема в том, что у меня более одной карусели на одной странице, а ваш код не предполагает использования индикаторов. Я добавлю здесь обновленный ответ здесь. На данный момент я разместил полное решение здесь: coderpills.wordpress.com/2014/06/05/ - person Fred K; 05.06.2014

arrow_upward
6
arrow_downward

Приведенный ниже код представляет собой обновленную версию кода TheLittlePig для Bootstrap 3, которая работает как для нескольких каруселей на одной странице, так и для индикатора. действия. Объясненный код: здесь

checkitem = function() {
  var $this;
  $this = $("#slideshow");
  if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
    $this.children(".right").show();
  } else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
    $this.children(".right").hide();
    $this.children(".left").show();
  } else {
    $this.children(".carousel-control").show();
  }
};

checkitem();

$("#slideshow").on("slid.bs.carousel", "", checkitem);
person Fred K    schedule 05.06.2014

arrow_upward
2
arrow_downward

Дополняя @TheLittlePig, он должен немного отличаться, если вы используете Bootstrap 3, потому что событие, к которому прикрепляется обратный вызов, отличается: slid.bs.carousel. Кроме того, если у вас есть несколько каруселей на одной странице, вам необходимо передать уникальный идентификатор css для карусели в обработчик событий. Вот модифицированная версия, которую я использую на своем сайте Rails:

<script>
//<![CDATA]
id = '#carousel-<%=id%>';
$(id).on('slid.bs.carousel', { id: id }, bs_carousel_slid);
$(document).ready(function(){ $(id).trigger('slid.bs.carousel'); });       
//]]>
</script>

Это повторяется для каждой карусели. <%=id%> — это рубиновое выражение, которое заменяется уникальным идентификатором данной карусели. Настройте этот бит для своих нужд в соответствии с языком по вашему выбору.

Разница в том, что идентификатор карусели передается в функцию обработчика событий как данные события, чтобы обработчик событий мог работать с правильной каруселью. Я также изменил событие ready, чтобы оно запускало событие slid.bs.carousel (вместо прямого вызова функции), чтобы оно передавало правильные данные события в обработчик событий для каждой карусели.

Обработчик событий — это функция с именем bs_carousel_slid, которую я определяю в другом месте (в Rails — в файле в app/assets/javascripts). Функция показана ниже:

function bs_carousel_slid(event)
{
  var id = event.data.id;
  var $this = $(id);
  if($(id + ' .carousel-inner .item:first').hasClass('active')) {
    $this.children('.left.carousel-control').hide();
  } else if($(id + ' .carousel-inner .item:last').hasClass('active')) {
    $this.children('.right.carousel-control').hide();
  } else {
    $this.children('.carousel-control').show();
  }
}
person starfry    schedule 08.05.2014
comment
вам не нужно передавать идентификатор таким образом, вы можете использовать данные события в bs.carousel. Взгляните на это решение: stackoverflow.com/questions/11441474/ - person Karl Adler; 13.03.2015

arrow_upward
1
arrow_downward

ЕСЛИ ВЫ ИСПОЛЬЗУЕТЕ BOOTSTRAP 3:

Событие "slid.bs.carousel", а не "slid"

$('.carousel').carousel({
    interval: false,
})

$(document).ready(function () {               // on document ready
    checkitem();
});

$('#myCarousel').on('slid.bs.carousel', checkitem);

function checkitem()                        // check function
{
    var $this = $('#myCarousel');
    if ($('.carousel-inner .item:first').hasClass('active')) {
        $this.children('.left.carousel-control').hide();
    } else if ($('.carousel-inner .item:last').hasClass('active')) {
        $this.children('.right.carousel-control').hide();
    } else {
        $this.children('.carousel-control').show();

    }
}
person Chris Halcrow    schedule 27.10.2015