Создайте красивую, отзывчивую карусель с 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