How can I make vuetify carousel arrows unique to my design?

Hey there, I'm currently working with this template in my application:

        <v-carousel cycle height="300" class="carousel" hide-delimiters>
          <template v-slot:prev="{ on, attrs }">
            <v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
              ><v-icon>mdi-arrow-left</v-icon></v-btn
            >
          </template>
          <template v-slot:next="{ on, attrs }">
            <v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
              ><v-icon>mdi-arrow-right</v-icon></v-btn
            >
          </template>
          <v-carousel-item
            v-for="i in 4"
            :key="i"
            :src="photo"
          ></v-carousel-item>
        </v-carousel>

I've been trying to customize the arrows that control the slide changes. Following the Vuetify documentation, I used the prev and next slots for this purpose. However, despite implementing the code, the appearance of these arrows remains unchanged. Additionally, no errors are being displayed in the console. Can anyone advise me on what might be going wrong or how to properly customize carousel arrows?

javascriptvue.jsvuetify.js

Answer №1

This is a demonstration that works well. Is there anything else required?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      colors: [
        'indigo',
        'warning',
        'pink darken-2',
        'red lighten-1',
        'deep-purple accent-4',
      ],
      slides: [
        'First',
        'Second',
        'Third',
        'Fourth',
        'Fifth',
      ],
    }
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4a4342586c180254">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a5c5f4f5e434c536a180452">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4a49597c0e1244">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26505343524f405f6614085e">[email protected]</a>/dist/vuetify.js"></script>
  

<div id="app">
  <v-app id="inspire">
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <template v-slot:prev="{ on, attrs }">
        <v-btn
          color="success"
          v-bind="attrs"
          v-on="on"
        >PREV @Bulchsu</v-btn>
      </template>
      <template v-slot:next="{ on, attrs }">
        <v-btn
          color="info"
          v-bind="attrs"
          v-on="on"
        >NEXT @Bulchsu</v-btn>
      </template>
      <v-carousel-item
        v-for="(slide, i) in slides"
        :key="i"
      >
        <v-sheet
          :color="colors[i]"
          height="100%"
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <div class="display-3">
              {{ slide }} Slide
            </div>
          </v-row>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>
  </v-app>
</div>

Answer №2

It appears that the initial solutions suggested in the document are not adequate, as they only involve changing the background icon image with additional challenges during active moments.

For a simpler and more effective approach, I recommend the following:

  1. Remove the delimiter icon from the carousel delimiter-icon=" "

  2. Apply a CSS class to your carousel 

    <v-carousel class="cssClass"...

  3. Within the designated class, incorporate the necessary CSS styles for customization

    .cssClass {
        .v-btn {
            color: transparent !important;
            border: 1px solid red !important;
            background-color: transparent !important;
        }

        .v-btn--active {
            color: red !important;
            border: 1px solid red !important;
            background-color: red !important;
        }
    }

This setup will result in a customized carousel display like this:

<v-carousel class="cssClass"  
                    v-model="model"
                    cycle
                    delimiter-icon=" ">
        ....
      </v-carousel>

Upon implementation, your carousel should resemble the following images:

https://i.sstatic.net/PhaI5.png

https://i.sstatic.net/Nj3gi.png

I trust that these suggestions will be beneficial. Best regards.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The MongoDB GridFS is refusing to accept the buffer being written

Hey everyone, I've been working on this issue for nearly a day now and can't seem to figure it out. I'm utilizing multer's inMemory flag to upload an image from my website. My approach involves writing the buffer received from multer to ...

javascriptnode.jsmongodbexpressgridfs

Implement a code to apply to an image that is loaded dynamically

I have a situation on a page where an image is loaded via ajax within a wrapping div. I need to execute some code as soon as that image is loaded. Unfortunately, I am unable to modify the ajax call, which means using on('success') directly on the ...

javascriptjqueryajax

Benefits of utilizing minified AngularJS versions (Exploring the advantages of angular.min.js over angular.js, along with the inclusion of angular.min.js.map)

After introducing angular.min.js into my project, I encountered a problem. http://localhost:8000/AngularProject/angular.min.js.map 404 (Not Found) angular.min.js.map:1 Upon further investigation, I discovered that including angular.min.js.map resolve ...

javascriptangularjsminifysource-maps

Sending Ajax GET request following the first Ajax POST request

Upon completing the initial ajax post, I am attempting to make a second ajax call. The initial call is a POST and the second call is a GET. Even though I am able to retrieve the values from the url file.php in the second call, I am facing difficulties in u ...

javascriptphpjqueryhtmlajax

Strategies for retaining additional fields added via JavaScript when the page is refreshed

var newField = document.createElement("lastExp"); newField.innerHTML = 'insert new form field HTML code here'; document.getElementById("lastExp").appendChild(newField); I have a button that adds an additional form field with a simple click. ...

javascript

Using Vue.js to pass an image URL as a prop for CSS animation by converting it to a CSS variable

Need help with a component that features a hover animation displaying 4 rotating images: animation: changeImg-1 2.5s linear infinite; @keyframes changeImg-1 { 0%, 100% { background-image: url('images/wel1.png'); } 25% { background-image: ur ...

cssvue.js

What is the best way to delete rows from an HTML table?

I am trying to update the table, but every time the setInterval function is triggered, the append method adds the same rows again. I want the old rows to be removed before inserting the new ones. $(document).ready(function() { function updateT ...

javascriptphpajaxjson

Vitest encountered an issue fetching a local file

I am currently working on testing the retrieval of a local file. Within my project, there exists a YAML configuration file. During production, the filename may be altered as it is received via a web socket. The code functions properly in production, but ...

javascripttypescriptfetch-apivitest

Is there a way to merge the .load function and the document.referrer function together?

Is there a way to load a specific div from the previous page that a user originated from using a form? $(document).ready(function() { $("#div_to_be_populated").load('url #div'); }); How can I utilize the document.referrer function in the ur ...

javascriptjquery

Looking for assistance in creating a unique jQuery validation function tailored to your

Looking at my form attribute, it appears as follows: onsubmit="return validateForm(this);" Additionally, I have a jQuery function set up like this: function validateForm(form) { $(form,"input").each(function() { if($(this).length < 1) { ...

javascriptjquery

Is it possible to identify a click that is being held without any movement?

Check out the code snippet below: doc.on('mousedown', '.qandacontent', function() { timeout_id = setTimeout(menu_toggle.bind(this), 1000); }).bind('mouseup mouseleave', function() { clearTimeout(timeout_id); }); If y ...

javascriptjquery

A quick guide on automatically checking checkboxes when the user's input in the "wall_amount" field goes over 3

I'm looking to have my program automatically check all checkboxes (specifically "Side 1, Side 2, Side 3 and Side 4") if the input for wall_amount is greater than 3. Is there a way to achieve this? I attempted lines 10-12 in JavaScript without success. ...

javascripthtmlforms

Is there a way to inform the List component when the height of its row items has been altered in order to trigger a rerender

In my project, I am using a react-virtualized List where each item in the rows has an expand button. When this button is clicked, the row's height changes to reveal more information. The problem I am facing is that after clicking the button, the inne ...

javascriptreactjsnext.jsreact-virtualized

datetimepicker in bootstrap 5 experiencing issues

Recently, I delved into the world of JS and attempted to implement a datetimepicker in my web-demo. Everything was running smoothly with bootstrap 3.3.7, but as soon as I upgraded to version 5, the calendar disappeared. Below is the minimal working html c ...

javascriptbootstrap-5bootstrap-datetimepicker

Ways to detect and respond to events in this particular scenario

I'm creating necessary components dynamically based on the provided CSS. This process involves iterating through a response array and generating HTML elements accordingly. for (var i = 0; i < responseinner.length; i++) { for (var k = 0; k < ...

javascriptjquery

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: ht ...

javascripthtmlangularjs

javascript how to retrieve the custom attribute value of an HTML style

I am dealing with an HTML element that has some inline styles as well as a custom CSS property. I am able to access every style attribute except for my custom style property. Here is the code I am working with: <img id="myimg" class="ImgClass" style=" ...

javascripthtmlcss

The button designed to execute JavaScript and modify CSS is malfunctioning

I am trying to use a button to expand my sidenav by toggling the class with JQuery. Although I am more familiar with JavaScript, I attempted to solve it with JS before moving to JQuery. function toggleMenu() { var sideEle = document.getElementByI ...

javascriptjqueryhtmlcss

The functionality of CSSTransition seems to be malfunctioning. Perhaps switching to V2 of react

Can anyone help me troubleshoot my code snippet where I'm attempting to incorporate an animation for Tooltip Nodes? Despite my efforts, the animation does not show up on the screen after mounting. Additionally, the console.log is not triggered on the ...

javascriptreactjsreactcsstransitiongroup

What is the best method for sending form data, specifically uploaded images, in Python Bottle with Ajax?

This form belongs to me <form method='post' enctype='multipart/form-data' id='uploadForm' name='formn'> <input type='file' value='' name='newfile'> <input type=&a ...

javascriptpythonajax