owl-carousel 相关问题

Owl Carousel是一款支持触控的jQuery插件，可让您创建漂亮的响应式旋转木马滑块。

猫头鹰旋转木马在下面的图像中放置下一个和上一个图像

我正在使用 Angular 17 和 ngx-owl-carousel-0 : 17.0.0 包。我的 customOptions 设置为：自定义选项：OwlOptions = { 循环：真，鼠标拖动：假，触摸拖动：假，拉拽：假，

angular owl-carousel

回答 1 投票 0

视频结束时自动播放猫头鹰旋转木马

我对猫头鹰旋转木马有疑问，我想创建一个由图像和视频组成的旋转木马。我的视频有问题，我希望滚动到下一个元素...

javascript owl-carousel

回答 1 投票 0

我的猫头鹰旋转木马只让我滑一次

在我的角度项目中，我尝试使用来显示我的产品卡。然而，当我检查它并查看手机和平板电脑时，我发现了一些问题。因为...

angular typescript owl-carousel

回答 1 投票 0

Angular Owl Carousel 不是水平方向而是垂直方向

在我的 Angular 项目中，我在我的 home-component.html 中使用了 Owl Carousel，如下所示：在我的 Angular 项目中，我在我的 home-component.html 中使用了 Owl Carousel，如下所示： <section> <div class="container"> <h1 class="products-title">New Arrivals</h1> <div class="slider"> <owl-carousel-o [options]="customOptions" class="owl-stage"> <ng-template carouselSlide *ngFor="let product of products"> <div class="card"> <div class="card-content" [ngStyle]="{'background-color': isDarkTheme ? '#5eda5e' : '#3b5b2d'}"> <img class="product-image" [src]="product.imgSrc" [alt]="product.name"> <h2 class="product-title">{{ product.name | translate}}</h2> <p class="product-description">{{ product.description | translate}}</p> <p class="product-price">{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p> </div> </div> </ng-template> </owl-carousel-o> </div> </div> </section> 但是，我的卡片不是水平显示的。但我希望它们是垂直的。即使 display: flex 也没有解决我的问题。另外，当我尝试通过浏览器检查时，<owl-carousel-o></owl-carousel-o\>实际上有猫头鹰阶段的类，我也添加了它，但即使给它一个显示：flex也不起作用。我尝试使包含产品详细信息和图像的卡片实际上是水平的。这是我的应用程序组件.ts import { Component, OnInit } from '@angular/core'; import { ProductService } from './product.service'; import { Product } from './product.model'; import { TranslateService } from '@ngx-translate/core'; import { Renderer2 } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'GreenGrocery'; products: Product[] = []; fruit: any; fruit_title: any; isDarkTheme: boolean = false; // Initialize dark_mode and light_mode with translation keys dark_mode: string = 'assets/img/crescent-moon.png'; light_mode: string = 'assets/img/sunny.png'; constructor(private productService: ProductService, public translate: TranslateService, private renderer: Renderer2) { // Set default language this.translate.setDefaultLang('en'); // Set initial language if needed this.translate.use('en'); translate.addLangs(['en', 'tr']); } ngOnInit(): void { this.products = this.productService.getProducts(); this.isDarkTheme = localStorage.getItem('theme') === "Dark"; this.translate.get('assets/img/crescent-moon.png').subscribe((res: string) => { this.dark_mode = res; }); this.translate.get('assets/img/sunny.png').subscribe((res: string) => { this.light_mode = res; }); this.setBodyBackground(); this.productText(); } switchLanguage(lang: string) { this.translate.use(lang); } ChangeLang(event: any) { const lang = event.target.value; this.switchLanguage(lang); localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light'); this.languageBackground(); } storeThemeSelection() { localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light'); this.setBodyBackground(); this.productText(); this.footerBackground(); this.cardBackground(); } private setBodyBackground() { const backgroundColor = this.isDarkTheme ? '#3b5b2d' : '#5eda5e'; this.renderer.setStyle(document.body, 'background-color', backgroundColor); } private productText() { const color = this.isDarkTheme ? '#ffffff' : '#000000'; this.renderer.setStyle(document.body, 'color', color); } private footerBackground() { const footerBackgroundColor = this.isDarkTheme ? '#4d4d4d' : '#ffffff'; this.renderer.setStyle(document.querySelector('.footer'), 'background-color', footerBackgroundColor); } private languageBackground() { const color = this.isDarkTheme ? '#ffffff' : '#000000'; this.renderer.setStyle(document.body, 'color', color); } private cardBackground() { const cardBackground = this.isDarkTheme ? '#5eda5e' : '#3b5b2d'; const cardContents = document.querySelectorAll('.card-content'); cardContents.forEach(cardContent => { this.renderer.setStyle(cardContent, 'background-color', cardBackground); }); } customOptions: OwlOptions = { loop: true, mouseDrag: false, touchDrag: false, pullDrag: false, dots: true, navSpeed: 700, navText: ['', ''], responsive: { 0: { items: 1 }, 400: { items: 2 }, 740: { items: 3 }, 940: { items: 4 } }, nav: true } } 通常情况下，你不能通过你的组件直接操作其他组件的样式。因此，你的方法应该是这样的：查看别人的组件是否有这样的配置？如果没有请继续关注第二项哈哈哈在这种情况下，我们应该利用我们的超能力，因为你知道超能力需要受到控制。它的名字是ng-deep。 ng-deep 帮助我们操纵任何组件的样式。但是，它可能会影响应用程序中的每个位置。你知道，我们通常不想要这些有风险的事情。一件很棒的事情是将 ng-deep 与 :host 一起使用。 :host 帮助我们将 ng-deep 封装在该组件中。因此，您只需操作该组件的样式以及该组件内部的样式。在你的home.component.css中，你基本上可以像这样更新你的风格： :host { ::ng-deep .owl-stage { display: flex; } .product-image { width: 30%; border-radius: 5px; } .card { width: calc(33.33% - 20px); margin: 10px; } .card-content { padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } }

angular typescript owl-carousel

回答 1 投票 0

如何在react-responsive-carousel中制作连续循环的幻灯片？

我在我的应用程序中使用react-responsive-carousel。当我滚动最后一张幻灯片中的下一张幻灯片时，它会移至第一张幻灯片。但它会转到第一张幻灯片，并穿过中间的所有幻灯片。如何预防这种情况

javascript reactjs carousel owl-carousel react-responsive-carousel

回答 1 投票 0

猫头鹰旋转木马点在 iPhone 上重复

正如您在所附照片中看到的那样，我的猫头鹰旋转木马点在 iPhone 上是重复的，并且也在彼此下方。在电脑和其他手机上，一切正常，只有 2-3 个点，一个...

html css owl-carousel

回答 1 投票 0

使用 jquery 动态附加数据时“owl carousel”不起作用

我将数据动态附加到“猫头鹰旋转木马”，最初数据显示正确，接下来（当我单击按钮时）我将擦除数据并将其重新分配给“猫头鹰

html jquery owl-carousel

回答 1 投票 0

从XML调用JS函数

我想从XML调用Odoo中的js函数我想从 XML 调用 Odoo 中的 js 函数 <template id="portal_my_attendances_inherit" name="My Attendances" inherit_id="hr_attendance_portal.portal_my_attendances"> <xpath expr="//t[@t-call='portal.portal_searchbar']" position="after"> <div class="mb4"> <t t-if="env.user.employee_id"> <a t-if="env.user.employee_id.attendance_state != 'checked_in'" href="#" class="btn btn-success checkInBtn">Check Inn <i class="fa fa-sign-in"/></a> <t t-else=""> <a href="#" class="btn btn-warning checkOutBtn">Check Out <i class="fa fa-sign-out"/></a> <strong> Hours today:</strong> <span t-field="env.user.employee_ids.hours_today" t-options="{'widget': 'float_time'}"/> <small>(refresh page to update)</small> </t> </t> </div> </xpath> </template> /** @odoo-module **/ import publicWidget from '@web/legacy/js/public/public_widget'; console.log('Start ...'); publicWidget.registry.portalAttendance = publicWidget.Widget.extend({ selector: '.checkInBtn, .checkOutBtn', events: { 'click .checkInBtn': '_onCheckInClicked', 'click .checkOutBtn': '_onCheckOutClicked', }, _onCheckInClicked: function (ev) { ev.preventDefault(); console.log('In Button clicked !!!'); }, _onCheckOutClicked: function (ev) { ev.preventDefault(); console.log('Out Button clicked !!!'); }, }); export default publicWidget.registry.portalAttendance; “开始...”打印在控制台中，但是当我单击签入按钮时，我没有得到 “点击按钮！！！”消息。任何人都可以帮助我吗？选择器需要是事件元素的父级，因此您应该更新它。包围事件元素的 <div class="mb4"> 现在添加了一个名为 wrap-div 的新类。 <template id="portal_my_attendances_inherit" name="My Attendances" inherit_id="hr_attendance_portal.portal_my_attendances"> <xpath expr="//t[@t-call='portal.portal_searchbar']" position="after"> <div class="mb4 wrap-div"> <t t-if="env.user.employee_id"> <a t-if="env.user.employee_id.attendance_state != 'checked_in'" href="#" class="btn btn-success checkInBtn">Check Inn <i class="fa fa-sign-in"/></a> <t t-else=""> <a href="#" class="btn btn-warning checkOutBtn">Check Out <i class="fa fa-sign-out"/></a> <strong> Hours today:</strong> <span t-field="env.user.employee_ids.hours_today" t-options="{'widget': 'float_time'}" /> <small>(refresh page to update)</small> </t> </t> </div> </xpath> </template> 那么， selector: '.wrap-div',

javascript odoo owl-carousel odoo-17

回答 1 投票 0

jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).owlCarousel 不是函数（React）

我正在制作一个网络应用程序，我需要在其中实现猫头鹰旋转木马。我的组件“TopEventSection.jsx”文件：从“react”导入React，{useEffect}；从&q导入img...

javascript jquery reactjs owl-carousel

回答 1 投票 0

使猫头鹰旋转木马中最后一个可见的项目变得模糊

我正在使用猫头鹰旋转木马，我想让最后一个可见的项目有点模糊。我用Photoshop做了一张照片，这就是我想要的。我正在使用猫头鹰旋转木马，我想让最后一个可见的项目有点模糊。我用 Photoshop 做了一张照片，这就是我想要的。 <div class="owl-carousel owl-theme owl_carousel_1"> <div class="item"> <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="main_hir_img_link" title="Utalással is fizethető az egészségügyi szolgáltatási járulék"> <img class="img-responsive main_news_thumb radius" src="/images/news/th-44555-71.jpg" alt="Utalással is fizethető az egészségügyi szolgáltatási járulék"> </a> <h3 class="event_title my-2"><a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" title="Utalással is fizethető az egészségügyi szolgáltatási járulék" class="event_title_link text-black">Utalással is fizethető az egészségügyi szolgáltatási járulék</a></h3> <p class="event_desc">2024-ben havi 11 300 forintot kell fizetniük azoknak, akik nem biztosítottak és más módon sem jogosultak az egészségügyi ellátásra.</p> <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="news_list_to_link d-block text-black" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> <div class="item"> <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="main_hir_img_link" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban"> <img class="img-responsive main_news_thumb radius" src="/images/news/th-44-283.jpg" alt="2024. évi nyitvatartási idő Pécel Város Óvodáiban"> </a> <h3 class="event_title my-2"><a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban" class="event_title_link text-black">2024. évi nyitvatartási idő Pécel Város Óvodáiban</a></h3> <p class="event_desc">Tájékoztatjuk a Tisztelt Szülőket, hogy a 2024. évben Pécel Város Óvodáiban (PVO) az 1. a heti nyitvatartási idő 60 óra, munkanapokon 6:00 óra és 18:00 óra között.</p> <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="news_list_to_link d-block text-black" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> <div class="item"> <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="main_hir_img_link" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása"> <img class="img-responsive main_news_thumb radius" src="/images/news/th-33-882.jpg" alt="Még egy hónapig kérhető az szja-bevallási tervezetek postázása"> </a> <h3 class="event_title my-2"><a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása" class="event_title_link text-black">Még egy hónapig kérhető az szja-bevallási tervezetek postázása</a></h3> <p class="event_desc">Március 15-étől mindenki megnézheti szja-bevallási tervezetét, legegyszerűbben a Nemzeti Adó- és Vámhivatal (NAV) Ügyfélportálján vagy eSZJA-oldalán.</p> <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="news_list_to_link d-block text-black" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> <div class="item"> <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="main_hir_img_link" title="Képviselő-testületi ülés - 2024. február 28."> <img class="img-responsive main_news_thumb radius" src="/images/news/th-22-532.jpg" alt="Képviselő-testületi ülés - 2024. február 28."> </a> <h3 class="event_title my-2"><a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" title="Képviselő-testületi ülés - 2024. február 28." class="event_title_link text-black">Képviselő-testületi ülés - 2024. február 28.</a></h3> <p class="event_desc">Pécel Város Önkormányzatának Képviselő-testülete 2024. február 28. napján (szerda) 8.00 órai kezdettel rendes képviselő-testületi ülést tart, melyre tisztelettel meghívom.</p> <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="news_list_to_link d-block text-black" title="Képviselő-testületi ülés - 2024. február 28.">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> </div> 我一直在寻找这个，但什么也没找到。如果您也向我们提供您的 css 代码，那就更好了。这是一个关于如何在最后一张图像上设置某种模糊的示例。您可以在图像上使用环绕 div 以及伪元素并添加插入框阴影。在这里，我使用 css last-child 选择了最后一个带有 .blurry 类的图像包装 div。 .owl-carousel{ display: flex; gap: 10px; flex-direction: row; } .blurry{ position: relative; height: fit-content; width: fit-content; } .item, .item a{ max-width: 200px; } .item:last-child .blurry::before{ content: ""; width:0px; height: 200px; position: absolute; top: 0; right: 0px; overflow: hidden; box-shadow: -0px 15px 15px 10px white; } <div class="owl-carousel owl-theme owl_carousel_1"> <div class="item"> <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="main_hir_img_link" title="Utalással is fizethető az egészségügyi szolgáltatási járulék"> <div class="blurry"> <img class="img-responsive main_news_thumb radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28."> </div> </a> <h3 class="event_title my-2"><a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" title="Utalással is fizethető az egészségügyi szolgáltatási járulék" class="event_title_link text-black">Utalással is fizethető az egészségügyi szolgáltatási járulék</a></h3> <p class="event_desc">2024-ben havi 11 300 forintot kell fizetniük azoknak, akik nem biztosítottak és más módon sem jogosultak az egészségügyi ellátásra.</p> <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="news_list_to_link d-block text-black" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> <div class="item"> <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="main_hir_img_link" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban"> <div class="blurry"> <img class="img-responsive main_news_thumb radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28."> </div> </a> <h3 class="event_title my-2"><a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban" class="event_title_link text-black">2024. évi nyitvatartási idő Pécel Város Óvodáiban</a></h3> <p class="event_desc">Tájékoztatjuk a Tisztelt Szülőket, hogy a 2024. évben Pécel Város Óvodáiban (PVO) az 1. a heti nyitvatartási idő 60 óra, munkanapokon 6:00 óra és 18:00 óra között.</p> <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="news_list_to_link d-block text-black" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> <div class="item"> <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="main_hir_img_link" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása"> <div class="blurry"> <img class="img-responsive main_news_thumb radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28."> </div> </a> <h3 class="event_title my-2"><a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása" class="event_title_link text-black">Még egy hónapig kérhető az szja-bevallási tervezetek postázása</a></h3> <p class="event_desc">Március 15-étől mindenki megnézheti szja-bevallási tervezetét, legegyszerűbben a Nemzeti Adó- és Vámhivatal (NAV) Ügyfélportálján vagy eSZJA-oldalán.</p> <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="news_list_to_link d-block text-black" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> <div class="item"> <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="main_hir_img_link" title="Képviselő-testületi ülés - 2024. február 28."> <div class="blurry"> <img class="img-responsive main_news_thumb radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28."> </div> </a> <h3 class="event_title my-2"><a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" title="Képviselő-testületi ülés - 2024. február 28." class="event_title_link text-black">Képviselő-testületi ülés - 2024. február 28.</a></h3> <p class="event_desc">Pécel Város Önkormányzatának Képviselő-testülete 2024. február 28. napján (szerda) 8.00 órai kezdettel rendes képviselő-testületi ülést tart, melyre tisztelettel meghívom.</p> <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="news_list_to_link d-block text-black" title="Képviselő-testületi ülés - 2024. február 28.">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a> </div> </div>

html css owl-carousel

回答 1 投票 0

使用owl-carousel时出现浏览器水平滚动条

在我的演示网站上，我使用猫头鹰旋转木马来滑动一些图库图像。我的问题是，浏览器的滚动条始终可见，因为我已将猫头鹰旋转木马添加到网站。我尝试过...

html css owl-carousel owl-carousel-2

回答 1 投票 0

我尝试使用bootstrap动态获取owl carousel的输出，但在codeigniter框架3.0.1版本中没有获得所需的输出

这就是我想在滑动时显示为滑块的内容，两行相应地向左或向右移动 ABC ABC <> 但我得到的在下面给出 ABC <> 当我...

php codeigniter dynamic-programming owl-carousel bootstrap-carousel

回答 1 投票 0

如何在没有节点模块的情况下使用外部javascript文件制作owl旋转木马

我已经从原始模板制作了猫头鹰旋转木马，没有node_module“react-owl-carousel”。但现在我有时会看到诸如加载页面时未添加 owl-item 类之类的错误。我导入了 javascript...