Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

prevArrow and nextArrow options being ignored.

See original GitHub issue

I’m new to Vue, so please forgive me if this isn’t an issue with vue-agile and I’m just doing it wrong.

I have my markup setup like this:

<agile class="carousel" :prevArrow="leftArrow" :nextArrow="rightArrow" :dots="false" ref="carousel">
    <div class="carousel__slide">
        <img src="/assets/img/temp.png" alt=""/>
    </div>
    <div class="carousel__slide">
        <img src="/assets/img/temp.png" alt=""/>
    </div>
</agile>

And then my Javascript looks like this:

import VueAgile from 'vue-agile';

Vue.use(VueAgile);

new Vue({
    el: '#app',
    data() {
        return {
            menu: false,
            leftArrow: "<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><g fill='none' fill-rule='evenodd'><circle cx='25' cy='25' r='25' fill='#292929' opacity='.6' transform='rotate(-90 25 25)'/><path fill='#FFF' d='M14.2906595,25.7004411 L28.3077323,39.7102545 C28.6952783,40.0965818 29.3226866,40.0965818 29.7092414,39.7102545 C30.0967874,39.321946 30.0967874,38.6949071 29.7092414,38.3085798 L16.3929231,25.0000991 L29.7092414,11.6916183 C30.0967874,11.3043005 30.0967874,10.6782521 29.7092414,10.2899436 C29.3226866,9.90361629 28.6952783,9.90361629 28.3077323,10.2899436 L14.2906595,24.299757 C13.9031135,24.6870749 13.9031135,25.3131232 14.2906595,25.7004411'/></g></svg>",
            rightArrow: "<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><g fill='none' fill-rule='evenodd'><circle cx='25' cy='25' r='25' fill='#292929' opacity='.6' transform='rotate(-90 25 25)'/><path fill='#FFF' d='M14.2906595,25.7004411 L28.3077323,39.7102545 C28.6952783,40.0965818 29.3226866,40.0965818 29.7092414,39.7102545 C30.0967874,39.321946 30.0967874,38.6949071 29.7092414,38.3085798 L16.3929231,25.0000991 L29.7092414,11.6916183 C30.0967874,11.3043005 30.0967874,10.6782521 29.7092414,10.2899436 C29.3226866,9.90361629 28.6952783,9.90361629 28.3077323,10.2899436 L14.2906595,24.299757 C13.9031135,24.6870749 13.9031135,25.3131232 14.2906595,25.7004411'/></g></svg>",
        };
    },
    methods: {
        toggleMenu() {
            this.menu = !this.menu;
        },
    },
});

The leftArrow and rightArrow variables are being picked up from data() as when I view source on the rendered page they are there in the component declaration (see below), but they are being ignored and the two default arrows are what I can see on the page.

<div class="agile carousel" prevarrow="<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>...</svg>" nextarrow="<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>...</svg>">
   <div class="agile__list">
        <div class="agile__track" style="width: 3340px; transform: translate(-668px); transition: transform 0ms ease;">
...

I’m sure I’m just doing something wrong, so any guidance would really help, thanks.

Issue Analytics

State:
Created 6 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

steve-hollandcommented, Oct 31, 2017

Ok, so I’m moved all the settings to :options and that works fine 👍

Thanks again for your help.

0reactions

steve-hollandcommented, Oct 31, 2017

hmmm, ok no worries. I’ll have a go at using :options instead, and see if that makes a difference.

Thanks for you help so far.

Top Results From Across the Web

Custom arrows are not working (0.13.3) · Issue #458 - GitHub

3, custom arrows are not working anymore. The error: invariant.js:45 Uncaught Invariant Violation: Element type is invalid: expected a string ( ...

Disable Prev Control on first slide and disable Next control on ...

making the prevArrow not show on init: if (_.options.infinite !== true) { _.$prevArrow .addClass('slick-disabled') .attr('aria-disabled', ...

Prev/Next not showing [#2303257] | Drupal.org

But it doesn't sound it is the actual issue. There are also options for version 1.3.7 (not yet released): - Append arrows -...

react-slick-cong - npm

following my PR is ignored, because i started personaly maintenance. ... Use jsfiddle template to try react-slick with different settings.

CHANGELOG.txt - telo.at

Fixed for broken grid display CSS being overridden by Seven theme. ... 'respondTo' option from responsive since it is always ignored/ hard-coded by...