Активизировать средний предмет в карусели материализации - PullRequest
Новая
       29

Активизировать средний предмет в карусели материализации

0 голосов
/ 10 февраля 2019

У меня есть карусель, построенная с использованием css.Я хочу начать карусель со средней позиции.Но начать карусель надо со второго пункта.ссылка на карусель: ссылка Что я могу сделать?Заранее спасибо!

1 Ответ

0 голосов
/ 16 февраля 2019

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

Кстати ... Вы можете использовать instance.set(x), чтобы переместить карусель на n-й слайд (как указано в документации здесь )

Вот пример (просто прокомментируйте оператор instance.set(middle_slide);, чтобы увидеть разницу): 

document.addEventListener('DOMContentLoaded', function() {
  //find wich slide is the middle one
  var carousel_items = document.querySelectorAll('.carousel-item').length;
  var middle_slide = Math.round(carousel_items / 2) 
  
  console.log('The slide in the middle is the ' + middle_slide + ' out of ' + carousel_items)
  
  //Carousel initialization
  var options = {};
  var elems = document.querySelectorAll('.carousel');
  var instances = M.Carousel.init(elems, options);
  
  //Set the carousel to show the middle slide first
  var elem = document.querySelector('.carousel');
  var instance = M.Carousel.getInstance(elem);
  instance.set(middle_slide);
})
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<div class="carousel">
  <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>

Вот кодовый блок, если вы предпочитаете: https://codepen.io/LukeSavefrogs/pen/WPYOGE?editors=1010

...