Vue card carousel.

Vue card carousel Author:L1feF0rm. A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Author:Ada. See the Pen The simplest Vue carousel by Ada on CodePen. 17 September 2018. I have a container which has several divs stacked horizontally and I want to scroll through them using the buttons. Nov 15, 2024 · 实现card走马灯效果在Vue中可以通过以下几种方式：1、使用Vue Carousel插件，2、手动编写轮播逻辑，3、使用第三方UI框架。下面我们将详细讲解第一种方法：使用Vue Carousel插件。 一、使用VUE CAROUSEL插件 Vue Carousel是一个功能强大且易于使用的Vue. Upvote 28. When To Use. Fork. Set trigger to click, and the carousel switches only when an indicator is clicked. x组件 如需在 vue@2. How I can make a v-for loop that works fine and will render 3 bootstrap 5. Cards have fast become the design pattern Vue card carousel. If you want to see a real-world example, I used the logic of this approach (inspired by a Thin Tran's tutorial) in one of my recent projects: sprout. Timeline 时间线. 0. 一个简单、灵活的 Vue3 走马灯组件，非常轻量，只有 5kB。. GitHub Gist: instantly share code, notes, and snippets. A multi-item card carousel in Vue. Display content in a card with a header, body and footer. 1, last published: 14 days ago. Wash the car Nov 15, 2024 · 本文将详细介绍如何使用Vue. 5. 4 components Profile On. By default the carousel switches when mouse hovers over an indicator. Author: David Hutto (David_Hutt) Links: Source Code / Demo. Prev using the v-slot directive in the <Carousel v-slot="slotProps" /> component to extend the functionality. vue' import VueCardCarousel from "vue-card-carousel"; Vue. When there is insufficient content space, it can be used to save space in the form of a revolving door. # v-card-text Find Vue Card Carousel Examples and Templates Use this online vue-card-carousel playground to view and fork vue-card-carousel example apps and templates on CodeSandbox. x Why: I tried to use the gap property or a grid layout on the <CarouselContent /> but it required a lot of math and mental effort to get the spacing right. js Vue Carousel - A flexible, responsive, touch-friendly carousel for Vue. Install & Download: # Yarn $ yarn add vue3-carousel # NPM $ npm i vue3-carousel Description: A lightweight, modern, responsive carousel component for Vue. js. The container used for placing actions for a card, such as v-btn or v-menu. See full list on freecodecamp. Latest version: 0. Component view, window sizing tricks, and image transitions. co Mar 12, 2025 · # v-card-actions . Further References. On smaller screens the carousel A multi-item card carousel in Vue. x版本为vue@3. To Do List. It basically takes a window Carousel . js创建一个多卡片轮播图，包括动态切换、响应式设计和一些高级技巧。 1. Download. When there is a group of content on the same level. Vue Carousels; WebArtDevelopers July 15, 2020 July 15, 2020 0. On smaller screens the carousel Displays a carousel progress bar. Also accepts a DOM passed by slot#footer: string — body-style: CSS style of card body: object — header-class 2. js和Vue CLI。以下是一个基本的Vue项目创建步骤： vue create multi-card-carousel cd multi-card-carousel 2. This is a proof of concept for To pause the carousel from auto sliding, set the interval prop to 0. Use the autoplay prop as a boolean or an object to configure the Autoplay plugin. 02/23/2020. Prev, scrollNext. Tree 树形 Feb 12, 2024 · Vue 3 Carousel 820. Card 卡片 #. When To Use # When there is a group of content on the same level. Media. Apr 13, 2018 · A Flippable Card Carousel Build With vue and Tailwind CSS. Using Vue. Upgrade to Vuetify 3 or learn more about Vuetify 2 EOL . 需要将. Most basic usage would be adding the component and Aug 13, 2021 · About The Project. active添加到其中一个轮播元素上，否则轮播将不可见。另外一定要在. UI. 5. org Jun 8, 2017 · Carousel A multi-item card carousel in Vue. # v-card-subtitle . Table 表格. Tagged with vue, javascript, carousel. Author: David Hutto June 11, 2019 Made with: HTML / CSS / JS (Babel An enterprise-class UI components based on Ant Design and Vue. startIndex Number 0 false Index of the card you want to be Oct 19, 2021 · See the Pen Vue Carousel + Bootstrap Vue Cards by David Hutto (@David_Hutt) on CodePen. Jul 30, 2020 · import { VueCardCarousel } from "vue-card-carousel"; export default { components: { VueCardCarousel } } 用法 (Usage) Most basic usage would be adding the component An enterprise-class UI components based on Ant Design and Vue. A vue plugin for Carousel Card Slide. Progress 进度条. It definitely offers all the features you need for basic use cases and is being actively developed. 项目准备. Surely Form 私有化部署 Card 卡片; Carousel Vue Card Carousel Component From Scratch. 7k次，点赞4次，收藏7次。vue+element-ui carousel走马灯一次轮播(显示)5张图片_elementui走马灯显示多个 Nov 14, 2023 · 文章浏览阅读1. When the carousel is paused, the user can still switch slides via the controls (if enabled) or touch swipe (on touch enabled devices, if not disabled). Dec 6, 2019 · A multi-item card carousel in Vue. Or if there are any plugins available May 6, 2024 · Created by maddog986, this card carousel slider displays cards in a sliding motion, making it ideal for showcasing various content items. Card ; Carousel ; ChatMessage from ' vite ' import vue from ' @vitejs/plugin-vue ' import uiPro from May 6, 2024 · Created by maddog986, this card carousel slider displays cards in a sliding motion, making it ideal for showcasing various content items. A curated collection of front-end snippets to save you time. 8: custom class name of card footer: string — shadow: when to show card shadows Instead of going through a complex third-party library docs, I tried to figure out how to build a "multi-card" carousel from scratch. Commonly used for a group of pictures/cards. Sep 1, 2024 · vue el-carousel走马灯实现显示多张（5张）和（7张） 父组件不用修改，仅在子组件源码的基础上进行修改即可 直接上代码 Aug 2, 2022 · vue3 element-plus 使用 el-carousel 跑马灯默认第一页不显示，vue3 element plus el-carousel 走马灯组件首个图片不显示解决方法，vue3如何解决element跑马灯组件第一个不显示的问题，vue3如何解决element plus 走马灯组件v-for赋值数据不显示第一张的问题，vue3使用element plus 走马灯Carousel组件调用接口赋值数据后第一个 Apr 30, 2020 · Vue Carousel + Bootstrap Vue Cards. Contribute to navid074/vue-card-carousel development by creating an account on GitHub. Features: With CSS transition you will get nice and smooth slide transition in 3D effect; Slides use Vue’s built-in slot system, allowing you to display any type of content in slides (including other Vue components!) Displays a carousel progress bar. Js, Vue Carouse by ssense, and Bootstrap Vue. 9k次，点赞7次，收藏11次。Carousel（走马灯）是一种常见的前端组件，通常用于展示多个项目（通常是图片或内容块）的轮播效果。 Vue Carousel - A flexible, responsive, touch-friendly carousel for Vue. 9. js) # javascript carousels # swiper js Tarot Card (Inspired by Silent Hill 3) # javascript carousels Product Swiper Vue Carousel - A flexible, responsive, touch-friendly carousel for Vue. carousel上为控件元件设置一个唯一的id，特别是当你在一个页面上使用多个轮播的时候。控件和指示器元素必须具有与. 2 cards for each carousel item into the array that will be looped? Inline style to apply to the card head: object-bodyStyle: Inline style to apply to the card content: object-bordered: Toggles rendering of the border around the card: boolean: true: cover: Card cover: slot-defaultActiveTabKey: Initial active TabPane's key, if activeTabKey is not set. See the Pen card-carousel by Max Lykov on CodePen. Carousel uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. maxVisibleCards: Number: 10: Number of cards that will be visible at any one time. use(VueCardCarousel) new Vue({ el: '#app', render: h => h(App) }) items Array true List of items to used to generate the scrollable cards. 在开始之前，确保你已经安装了Node. 7 Vue3-Carousel. # Customized arrows. Tree 树形 A Bootstrap 5 carousel that advances one at a time. Requires the cycle prop and interval. Jan 24, 2024 · This Vue JS component implements a carousel with multiple items. Carousel Component "vue3-carousel is a modern, lightweight Vue 3 carousel component. Scales with its container. All credit to Tom Miller. It allows you to display a set of cards in a carousel layout and navigate through them using left and right navigation buttons. js This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px) Getting started . Semantic and clear HTML is vital, especially for large projects with a high level of complexity. Feb 28, 2019 · When we add the Indicators to Carousel. Any valid attribute is passed to the container element so if you require to use one of the landmark roles like region , you may use the role property. You can apply CSS to your Pen from any stylesheet on the web. Result 结果. UI Components Layout Material Design Tables Scroll Bootstrap Templates Frameworks Mobile. js 的前端框架，其中的 Carousel 组件就是用来实现走马灯效果的。 Carousel. Carousel Card Slide的Vue插件。 构建设置 (Build Setup)npm install vue-card-slide --save 用 (Use)// ES6 importimport cardSlide f_vue-carousel-card The QCarousel Vue component allows you to display a series of slides, useful for wizards or an image gallery. 8: custom class name of card header: string — body-class 2. It basically takes a window Vue Card Carousel. Jun 22, 2022 · I want to create a simple card carousel but at the moment I'm unable to use the right markup and I will see only one card in a crappy way, but on the dom the loop has rendered all the cards I want display. See the Pen 3D Carousel (v4 – panorama) by Tom Miller (@creativeocean) on CodePen. Contribute to Carrie999/vue-card-slide development by creating an account on GitHub. js that enables the user to switch between slides just like a stacked card. Vue card carousel. Ant Design Vue Card 卡片; Carousel Dec 18, 2024 · 走马灯是网页设计中常见的一种交互效果，它可以实现图片或内容的自动轮播。Element UI 是一个基于 Vue. 75: A number between 0 and 1 that determines how much a card scales as Vue Carousel - A flexible, responsive, touch-friendly carousel for Vue. Tree 树形 Card 卡片. The slides container has aria-live attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay. 2. Surely Form AI 助手内测开放申请 立即申请. x地址 yarn add vue-carousel-card@^1. Content of each slide is completely customizable, and you just need to place it inside el-carousel-item tag. Oct 4, 2018 · Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand Card 卡片. Skeleton 骨架屏. that would cover the upper part of a card. Examples Sep 10, 2020 · 文章浏览阅读7. Collapse 折叠面板. Empty 空状态. js Carousel & Slider components, plugins, and other related libraries for modern mobile & web applications. 6k次，点赞9次，收藏20次。1、前阶段有需求，要求走马灯card模式下item不重叠，去网上找了很多没有实现的，后来决定自己写一个方法实现，见效果：间距的话可以自己根据需求调整：2、实现思路：走马灯为我们提供了一个change方法，该方法当幻灯片切换时触发，回调参数是目前激活 A flexible, responsive, touch-friendly carousel for Vue. js A Bootstrap 5 carousel that advances one at a time. 5w次，点赞16次，收藏47次。本文记录了如何基于 Element-UI 的 Carousel 组件修改，使其能一次显示多张卡片。通过分析源码并调整样式，实现了 Card 类型的 Carousel 一次展示 6 张图片的功能。 Mar 12, 2025 · The carousel component is used to cycle through visual content such as images or slides of text. js插件，可以帮助我 footer of the card. Cards Carousel Chips Vue Resources. js框架提供了丰富的UI组件库，其中el-carousel 组件是Element UI库中的一个组件，它可以帮助开发者轻松实现炫酷的轮播效果。本文将详细介绍el-carousel 组件的使用方法，帮助您告别代码烦恼，快速实现美观且功能齐全的轮播图。 一、el-carousel组件简介 el-carousel Feb 28, 2019 · When we add the Indicators to Carousel. Tree 树形 v-carouselコンポーネントは、タイマーで入れ替わる数枚の大きなビジュアルコンテンツを表示するために使います。 # 使い方 v-carousel コンポーネントは、 v-window を拡張し、画像の表示を目的とした追加機能を提供します。 About External Resources. A flexible, responsive, touch-friendly carousel for Vue. 6. Combine el-carousel with el-carousel-item, and you'll get a carousel. 9k次，点赞7次，收藏11次。Carousel（走马灯）是一种常见的前端组件，通常用于展示多个项目（通常是图片或内容块）的轮播效果。 Width of card stack in pixels or as a percentage (responsive). There are App and child component FlippableCard. With responsiveness built in, it ensures smooth transitions on different screen sizes. Bootstrap Vue Carousel and Examples. It supports touch, keyboard and mousewheel inputs and offers configuration options for responsive breakpoints. It may be used with a succession of photos, text, or custom markup to create a visual presentation. bash npm install vue3-carousel # or use yarn yarn add vue3-carousel Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. Make coffee . Pet the cat . Start using vue3-carousel in your project by running `npm i vue3-carousel`. Responsive Multi item carousel built with the latest Bootstrap 5 and Vue 3. The JSCharting data visualization library includes 150+ advanced chart types that you can seamlessly use in your Vue apps Learn more Vue application monitoring by Sentry provides actionable insights to resolve performance bottlenecks and errors Learn more Placid is a creative automation API & toolkit #madewithvuejs that lets you generate custom visuals at scale Learn more Dec 12, 2019 · A multi-item card carousel in Vue. Aug 2, 2023 · Ant-Design-Vue 是一个功能强大、设计精良且易于使用的 Vue 组件库。通过遵循上述快速上手指南，你可以快速开始在项目中使用 Ant-Design-Vue，并构建出美观且功能强大的 Vue. How to use it: 1. . Basic A simple implementation of the carousel with default settings. The carousel should have arrows and Description. Also applies special margin to buttons so that they properly line up with other card content areas. Oct 19, 2023 · 文章浏览阅读2. I found pl-[VALUE] and -ml-[VALUE] utilities much easier to use. js框架提供了丰富的UI组件库，其中el-carousel 组件是Element UI库中的一个组件，它可以帮助开发者轻松实现炫酷的轮播效果。本文将详细介绍el-carousel 组件的使用方法，帮助您告别代码烦恼，快速实现美观且功能齐全的轮播图。 一、el-carousel组件简介 el-carousel Slides use Vue's built-in slot system, allowing you to display any type of content in slides (including other Vue components!) Responsive Breakpoints in Vue Carousel can be configured to have different slide counts depending on the device's display resolution. maddog986. Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options Jan 13, 2024 · Card Carousel in Vue: Multi-item Madness. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style which translates the images. Slot Props You can get the reactive slot props like carouselRef, canScrollNext. Rotate the card: Click or Tap(Mobile) the arrow icons Sep 17, 2018 · Vue card carousel. Share. A carousel component. Import the component & stylesheet into the project. vue it becomes clear why we created two wrappers for the Card. Full screen Preview. Sep 23, 2024 · 1、前阶段有需求，要求走马灯card模式下item不重叠，去网上找了很多没有实现的，后来决定自己写一个方法实现，见效果：间距的话可以自己根据需求调整： 2、实现思路：走马灯为我们提供了一个change方法，该方法当幻灯片切换时触发，回调参数是目前激活的幻灯片的索引，原幻灯片的索引，我们 Latest free Vue. Contribute to kagol/vue-carousel development by creating an account on GitHub. Carousel 走马灯. Chat Message. 设计轮播图布局 Prop Type Default Description; card: Card: Required: Object containing card details (src, title, category, content) index: number: Required: Index of the card in the carousel Sep 11, 2019 · Vue. 文章浏览阅读4. Mar 5, 2022 · Vue Carousel + Bootstrap Vue Cards Created with CSS 3D transforms, along with a little JavaScript, the carousel is a slideshow that allows users to cycle through a sequence of content. Carousel. scaleMultiplier: Number: 0. A sleek, Apple‑style card carousel with blur‑loading images, modal expansion, and smooth scrolling controls. Many practical examples like lightbox integration, Vertical, autoplay, and many more. 15. x 中使用，请使用 ，Github v1. jsの続きです。前回はVuetifyのヘッダー、フッターを配置してみました。今回はさらにいろんなパーツを配置してみます。パンくず（v-carousel）、スライダー（v-carousel）、タイル（v-card）、アコーディオン（v-expansion-panels）、カレンダー（v-calendar）を配置してみました。それではいきましょう！ Feb 28, 2018 · Building an image carousel with Vue. Cards Vue 3 card swiper proof of concept with Tailwind CSS. Chip. This example shows 3 cards on medium and moves one card at a time. Prop Type Default Description; card: Card: Required: Object containing card details (src, title, category, content) index: number: Required: Index of the card in the carousel Carousel Vue Bootstrap 5 Carousel component Responsive Vue carousel built with the latest Bootstrap 5. For detailed information about the Vue 3 Carousel component, its usage, options and events, please refer to the official Vue 3 Carousel documentation. 10: custom class name of card body: string — footer-class 2. Card. css again in your stylesheets, as the module already imports it. This collection of JavaScript carousel components features auto-play sliders, swipe support, pagination controls, and smooth transitions — ideal for product showcases, testimonials, and media galleries. import { defineComponent } from 'vue' import { CarouselCard A multi-item card carousel in Vue. It basically takes a window VUE CAROUSEL + BOOTSTRAP VUE CARDS. Tour 漫游式引导. This plugin is used to extend Embla Carousel with autoplay functionality. May 27, 2019 · How can I achieve the multi card inside carousel similar to this Demo in Vuetify <v-carousel> <v-carousel-item v-for="(item,i) in items" :key="i" :src="item. Dude’s got skills! vue轮播卡片组件（vue carousel card component）with vue@3. 2. Apr 13, 2020 · import { VueCardCarousel } from "vue-card-carousel"; export default { components: { VueCardCarousel } } Usage. 基础卡片容器，其中可包含文字，列表，图片，段落，用于概览展示时。 基本用法 # Combine el-carousel with el-carousel-item, and you'll get a carousel. Whether you work with HTML, CSS, Bootstrap, TailwindCSS, JavaScript, you'll find ready-to-use components and patterns to streamline your development. See the Embla Carousel docs for more information on using events. Simply write your custom styles in your CSS files. This page showcases examples of the carousel component with live demos. It basically takes a window vue轮播卡片组件（vue carousel card component），2. Font-size can be overwritten with typography classes. Flowbite Vue is an open-source UI component library built with Vue components, Tailwind CSS utility classes and based on the Flowbite design system and components. Dev Challenge: Card Selector You can hide the carousel navigation controls with :show-arrows="false". Click any example below to run it instantly or find templates that can be used as a pre-built solution! Jul 28, 2020 · 文章浏览阅读555次。vue carousel Vue卡滑 (vue-card-slide)A vue plugin for Carousel Card Slide. May 3, 2024 · A tiny and fast carousel slider that transitions between items with card-like animations. js 应用。记得查阅官方文档以获取更多详细信息和高级用法。 Remember, you don't need to import the carousel. Modern lightweight Vue 3 Responsive Image Carousel with Alpine. Explore different configurations from basic to advanced, and use the provided code samples as starting points for your own implementations. 4. js Carousel Components Performant Carousel Component – ssr-carousel You can control the Flippable Card Carousel in various way. First step is to install it using yarn or npm:. The first option is to set the img-blank attribute. Jan 14, 2025 · Vue. You can control the Flippable Card Carousel in various way. To restart a paused carousel, set the interval back to the desired number of ms. 13 August 2021. A slideshow component for cycling through elements—images or slides of text—like a carousel. It basically takes a window It's primarily designed for rendering "card" style slides (like for linking to articles or products) where the carousel-ness is conditionally applied based on the number of cards that are slotted in as well as the viewport width. There are 62 other projects in the npm registry using vue3-carousel. component Get daisyUI T-shirts, Hoodies, Mugs, Stickers, and more! A multi-item card carousel in Vue. 000 high-quality UI snippets for free. Infinite Scroll 无限滚动. Created on Card carousel using tailwind JIT mode and peer-* to control rotating images. js 3 powered apps. Pagination 分页. Or you can make them only appear on hover with show-arrows="hover". Support for Vue 3; vue3-carousel is a lightweight Vue 3 carousel component supporting touch & mouse dragging, autoplay, infinity scrolling, gallery views and more. sensitivity: Number: 0. Jul 7, 2018 · I'm looking to achieve horizontal scroll using buttons in VueJS. A simple carousel component for Vue 3. For Your Next Awesome Project. # progress-color Multi item carousel Vue Bootstrap 5 Multi item carousel plugin An advanced slideshow component for cycling through images with a selectable number of active items. Jul 19, 2021 · I cam to that conclusion because I just change your cards to a variable width and have exactly the same problem with the carousel I'm trying to code. Carousel A # Yarn $ yarn add vue-carousel-card # NPM $ npm install vue-carousel-card --save Description: A card carousel component for Vue. The simplest Vue carousel. About External Resources. src"> <card></card> // card will be here </v-carousel-item> </v-carousel> I would like to show 6 cards per slide, 3 columns and 2 rows. A wild carousel ride! Tom’s 3D Panorama Carousel. js npm install vue-carousel-3d Description: A Beautiful, flexible and touch-friendly 3D Carousel for Vue. Installation . fictolab. 25: Distance card must travel as percentage of cardWidth + paddingHorizontal. An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises Jan 16, 2021 · Since your carousel slide has no direct image (you put the image in the <b-card>), the slide will collapse unless you do something. Autoplay. It basically takes a window The Carousel component implements the official Embla Carousel plugins. Card 卡片. The component is open-source, currently only supporting Vue 3. Image 图片. Many examples and easy tutorials. Rotate the card: Click or Tap(Mobile) the arrow icons; Click or Tap(Mobile) the next or previous card face; Use key ArrowRgiht and ArrowLeft; Slide left or right on the carousel area (Mobile) Flip the card: Mouse over the center card; Use key ArrowUp and ArrowDown; Tap the center card Use responsive carousel component with helper examples for image carousel, carousel slider, autoplay, indicators & more. Carousel is a slideshow cycling through different elements such as photos, videos, or text. Vuetify 2 has reached EOL and is no longer actively maintained. View more: Best Vue. 3. Virtualized Table 虚拟化表格. string-extra: Content to render in the top-right corner of May 15, 2024 · 本文由体验技术团队Kagol同学创作~ 前端组件库作为 Web 应用开发重要的基石，发挥了用户体验统一和开发效率提升的双层价值，但业务场景变化和需求变化万千，没有任何组件库可以满足所有业务场景，但我们依然可以通过精心的 API 设计，让组件在易用性和灵活性这两个看似矛盾的能力中取得平衡 Apr 4, 2021 · I am trying to create a card slider using Vue JS, I looked at various npm packages Vue Carousel 3D, Vue Slick and never found a suitable slider for my example, my card slider looks like this As yo Tailwind Carousel examples: Carousel show images or content in a scrollable area. It was fun thinking about how this should be viewed from the perspective of a component. carousel元素之id符合的data-bs-target属性（或是连接的href）。 仅幻灯片 Carousels are a popular way to showcase content in a rotating, space-efficient layout. See the Pen Bootstrap Vue Carousel and Examples by L1feF0rm on CodePen. js Climbing Card Carousel (Swiper. Tag 标签. Also, I noticed when testing your code that as soon as you load the component the first card that you see in the carousel is the number "2" card not the number "1" is this correct ? Jan 5, 2021 · Scroll List Admin-template Table Layout Timeline Masonry Responsive Cards Bootstrap Grid Css Mobile Material-design Vue 3 Carousel. 通用卡片容器。 何时使用 #. Flexible, responsive, and highly customizable Vue carousel component to suit almost all your use cases import Vue from 'vue' import App from '. Examples The QCard Vue component is a great way to display important pieces of grouped content. Below is an 10. Interactive demo using a simple to-do list to showcase prop and slot usage. /App. Provides a default font-size and padding for card subtitles. js - rtmann/vue3-carousel Beautifully designed components built with Radix Vue and Tailwind CSS. Descriptions 描述列表. kozryv xfm ljuzci iwg cfprav adsp jhrl jgdsl ybzxk wwderefy