Блог

Главная - Вопросы по программированию - Как добавить скользкую карусель в Nuxt

Как добавить скользкую карусель в Nuxt

#nuxt.js

Вопрос:

Я в основном пытаюсь добавить это на сайт

 https://codepen.io/pnmcosta/pen/GYpxgr

Поместите это на один из компонентов, и это приведет к следующей ошибке

 render function or template not defined in component: FirstPageSecondSection

В основном просто добавляю это в сценарий,стиль и шаблон

Вот один из примеров, когда я добавил скрипт

 <script>
export default {
    data:() =>({
        
    })
}
    $(function() {
  $('.slider-services').slick({
    dots: true,
    appendDots: '.slider-dots',
    arrows: true,
        infinite: false,
        slidesToScroll: 3,
        slidesToShow: 3,
        accessibility: true,
        variableWidth: false,
        focusOnSelect: false,
        centerMode: false,
        responsive: [
            {
                breakpoint: 992,
                settings: {
                    slidesToScroll: 2,
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToScroll: 1,
                    slidesToShow: 1
                }
            }
        ]
  });
});  
</script>

Я новичок в Nuxtjs и надеюсь на просвещение старших.

Комментарии:

1. Данный код неверен, потому что он нигде не вложен. Я зафиксировал это в своем ответе. Даже несмотря на это, я все равно не рекомендую использовать slick.

Ответ №1:

Этот использует скользкую карусель. Он основан на jQuery. Поскольку вы используете VueJS, я рекомендую использовать любую другую карусель, кроме попыток использовать какой-то императивный хакерский код.
VueJS является декларативным, поэтому не полагаться на jQuery (императив) может быть хорошей идеей. Кроме того, VueJS достаточно сам по себе, чтобы не добавлять весь jQuery поверх вашей кодовой базы (больше JS на самом деле ни за что).

Вот целый список каруселей, которые вы можете использовать: https://github.com/vuejs/awesome-vue#carousel

Я нашел и использовал vue-silentbox, не самый маленький, но хорошо справляюсь со своей работой.

Я использовал его на этом сайте, нажмите на изображение, и вы увидите карусель.
Пример кода можно найти здесь: https://github.com/kissu/pet-friends/blob/master/src/views/Home.vue#L26

Отформатированный и измененный код OP, этот сам по себе не работает, потому что нам тоже нужно определить jQuery (в противном $ случае он будет неопределенным). Тем не менее, это НЕ то решение, которое я рекомендую.

 <script>
export default {
  mounted() {
    $(function () {
      $('.slider-services').slick({
        dots: true,
        appendDots: '.slider-dots',
        arrows: true,
        infinite: false,
        slidesToScroll: 3,
        slidesToShow: 3,
        accessibility: true,
        variableWidth: false,
        focusOnSelect: false,
        centerMode: false,
        responsive: [
          {
            breakpoint: 992,
            settings: {
              slidesToScroll: 2,
              slidesToShow: 2,
            },
          },
          {
            breakpoint: 600,
            settings: {
              slidesToScroll: 1,
              slidesToShow: 1,
            },
          },
        ],
      })
    })
  },
}
</script>
Метки: