Создайте красивую, отзывчивую карусель с Owl Carousel

Примечание. В это руководство не добавлены Turbolinks. Дайте мне знать, если вам нужна обновленная версия!

Иногда простые проблемы требуют простых решений.

Я искал способ добавить карусельную навигацию в свой Rails 6 без неуклюжего JavaScript или драгоценного камня, который перестал получать обновления примерно в 2013 году. Карусель Bootstrap была потенциальным решением, но не изящным, когда вы хотите добавить несколько каруселей карточек на страницу.

OwlCarousel спешит на помощь! Это пакет npm, который легко интегрируется в ваше приложение Rails 6 (хотя он также будет работать с Rails 5) для создания работающей карусели менее чем за 5 минут.

Давайте начнем!

Шаг 1. Настройте пакет npm

Первым делом необходимо установить пакет NPM. Существует также гем сова-карусель, но он несовместим с Rails 6. Rails 6 обрабатывает JavaScript через папку app / javascript, в то время как гем должен быть добавлен через старый конвейер JavaScript.

Сначала установите пакет через yarn или npm. Вам также потребуется установить jquery в системе в качестве зависимости. Если в вашем приложении настроен Bootstrap 4, это уже должно быть сделано.

yarn add owl.carousel jquery
npm install --save owl.carousel

Если вы еще этого не сделали, добавьте настройку jQuery в файл конфигурации веб-пакета:

#config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
 })
)

Наконец, импортируйте пакет JS и CSS в пакет JavaScript:

#app/javascript/packs/application.js

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
#you may also need to add these two lines above the owl carousel code if you get the 'error $ is not a function' error in the console
import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;

Шаг 2. Добавьте карусель с совами к вашему обзору

Настройка внешнего интерфейса карусели очень проста - добавьте класс div owl-carousel вокруг списка объектов, которые вы хотите превратить в карусель, затем добавьте сниппет JavaScript под ним, и все готово!

Если вы просматриваете массив с помощью цикла each, он может выглядеть примерно так:

<div class="owl-carousel">
  <% @things.each do |thing| %>
    <div> 
      <%= thing.name %>
      <%= thing.description %>
    </div>
  <% end %>
</div>

Добавьте код для инициализации карусели на той же странице с помощью тега <script>:

<script>
$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});
</script>

Шаг 3. Активируйте JavaScript на странице

При добавлении этого кода есть небольшая оговорка. Поскольку jQuery теперь загружается с помощью Webpack, вам необходимо убедиться, что код <script> выполняется только после загрузки пакета.

Обычно в приложении Rails тег пакета JS загружается под <%= yield %> в макете приложения. Чтобы убедиться, что фрагмент может использовать jQuery, его необходимо включить в отдельный yield прямо под JavaScript.

На макете приложения добавьте доходность с ключом :after_js

<body>
  <%= yield %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= yield :after_js %>
</body>

Затем на странице с каруселью оберните тег <script> внутри цикла content_for:

<%= content_for(:after_js) do %>
  <script>
  $(document).ready(function(){
    $('.owl-carousel').owlCarousel();
  });
  </script>
<% end %>

Шаг 4. Настройте карусель с совами

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

$(document).ready(function(){
$('.owl-carousel').owlCarousel({
  stagePadding: 50,
  loop: true,
  margin:10,
  responsive:{
    0:{
      items:1
     },
    600:{
     items:3
     }
   }
 })
});
  • stage padding добавляет левый и правый отступ к оболочке.
  • параметр цикл позволяет непрерывное слайд-шоу
  • поле показывает следующий и предыдущий слайды поочередно
  • параметр адаптивный предоставляет точки останова в пикселях и количество отображаемых элементов.

Полный список вариантов можно найти здесь: https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html