owl-carousel показать сразу конец списка

189
15 апреля 2019, 03:30

Есть плагин owl-carousel, с помощью него выводим слайды, и возможность листать влево / вправо.

Каким образом сделать чтобы по умолчанию, при загрузке страницы, был показан последний слайд, то есть чтобы было так, как будто бы пользователь долистал к конец списка.

Буду благодарен за информацию.

Answer 1

Пример

var lastItem = $('.item').length - 1; 
$('.owl-carousel').owlCarousel({ 
  loop: true, 
  margin: 10, 
  nav: true, 
  startPosition: lastItem, 
  responsive: { 
    0: { 
      items: 1 
    }, 
    600: { 
      items: 1 
    }, 
    1000: { 
      items: 1 
    } 
  } 
});
.item { 
  background: #ccc; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" /> 
 
<div class="owl-carousel owl-theme"> 
  <div class="item"> 
    <h4>1</h4> 
  </div> 
  <div class="item"> 
    <h4>2</h4> 
  </div> 
  <div class="item"> 
    <h4>3</h4> 
  </div> 
  <div class="item"> 
    <h4>4</h4> 
  </div> 
  <div class="item"> 
    <h4>5</h4> 
  </div> 
  <div class="item"> 
    <h4>6</h4> 
  </div> 
  <div class="item"> 
    <h4>7</h4> 
  </div> 
  <div class="item"> 
    <h4>8</h4> 
  </div> 
  <div class="item"> 
    <h4>9</h4> 
  </div> 
  <div class="item"> 
    <h4>10</h4> 
  </div> 
  <div class="item"> 
    <h4>11</h4> 
  </div> 
  <div class="item"> 
    <h4>12</h4> 
  </div> 
  <div class="item"> 
    <h4>13</h4> 
  </div> 
  <div class="item"> 
    <h4>14</h4> 
  </div> 
  <div class="item"> 
    <h4>15</h4> 
  </div> 
  <div class="item"> 
    <h4>16</h4> 
  </div> 
  <div class="item"> 
    <h4>17</h4> 
  </div> 
  <div class="item"> 
    <h4>18</h4> 
  </div> 
  <div class="item"> 
    <h4>19</h4> 
  </div> 
  <div class="item"> 
    <h4>20</h4> 
  </div> 
</div>

READ ALSO
Timer и захват AsyncLocals (ExecutionContext)

Timer и захват AsyncLocals (ExecutionContext)

На гитхабе в тикетах для corefx и aspnet много обсуждений на тему захвата AsyncLocal при создании таймера

177
Поиск пути к контроллеру ASP.NET Web Api на Apache

Поиск пути к контроллеру ASP.NET Web Api на Apache

Создал приложение ASPNET Web Api для парсинга входящих данных, их обработки, фильтрации, и отправки их на другой сервер

145
Отключение триггера при прыжке

Отключение триггера при прыжке

В общем, 4 удара работают последовательно по тригеру, но когда идет анимация прыжка и активируется триггер, при приземлении моментально воспроизводится...

131
Ошибка System.EntryPointNotFoundException: Mono_Posix_Stdlib_free C# Mono

Ошибка System.EntryPointNotFoundException: Mono_Posix_Stdlib_free C# Mono

Пытаюсь работать с шиной i2c на Raspberry PiНашел обертку для использования

124