我想实现owl carousel，但是
我不熟悉这个名词，您可以给我更多信息吗？
owl carousel是一个基于jQuery的响应式轮播插件，用于在网页中展示图片和内容。它提供了许多功能和选项，使用户可以自定义轮播效果和交互。
优势：
- 响应式设计：owl carousel可以自动适应不同设备和屏幕大小，确保在各种平台上都能正常显示。
- 定制化选项：插件提供了丰富的选项，允许用户调整轮播速度、动画效果、导航样式等，以满足个性化的需求。
- 多种布局：支持水平和垂直布局，用户可以根据需要选择合适的布局方式。
- 兼容性：owl carousel兼容主流浏览器，包括Chrome、Firefox、Safari和IE等。
应用场景：
- 轮播广告：owl carousel可以用于网站首页或产品页面中的广告位，展示公司宣传、产品特点等内容。
- 图片展示：适用于摄影网站、艺术品展示等需要展示图片作品的场景。
- 新闻滚动：可以在新闻页面或博客中使用，将最新内容以滚动方式展示给用户。
腾讯云相关产品： 腾讯云提供了对象存储 COS（Cloud Object Storage）服务，可以用于存储和管理轮播插件所需的图片、样式和脚本文件。您可以通过以下链接了解更多信息： https://cloud.tencent.com/product/cos
另外，腾讯云还提供了云服务器（CVM）、容器服务、数据库等一系列云计算产品，供您构建和部署网站应用所需的基础设施。
相关·内容
3回答
我想使用event.item.count在owl.trigger中的值(‘to.owl.carousel’，索引)
在加载时，我希望旋转木马滚动到最后一个可用项，如果您有一定数量的项目，这是很好的，但是我的项目列表(即将到来的事件)是动态的，并且总是被添加到其中。我看到，您可以在回调事件fn owl.on('initialize.owl.carousel',function(){})中看到总项，但是如何在owl.trigger('to.owl.carousel', items)中使用该值？
var owl =$(‘.’)
// on initialise...
浏览 0提问于2019-08-16得票数 0
回答已采纳
我使用owl carousel - jquery。当图像改变时，我想实现滑动文本的效果，某种运动或效果，比如改变不透明度。我如何使用owl carousel来做这件事？我想使用事件。每次幻灯片都会改变事件触发器，但是我如何抓取当前在视图中的确切元素，并仅更改该元素的样式，并从其他元素中删除样式？谢谢
constructor(){
this.owl = $('.owl-carousel');
this.owlTxt = $('.container__slider-txt');
this.events();
}
events(){
浏览 30提问于2019-10-22得票数 0
我想安装react owl-carousel-rtl，我遵循了的说明。
但是，由于方向: rtl，它对我不起作用。
这是我写的代码-
import OwlCarousel from "react-owl-carousel";
import "owl.carousel / dist / assets / owl.carousel.css";
import "owl.carousel / dist / assets / owl.theme.default.css";
<OwlCarousel loop={false} rtlClass=
浏览 3提问于2021-06-17得票数 1
1回答
我创建了两个并排的owl carousel滚动元素。模式： ? 我想实现的是，价格项目的描述有点超过owl转盘项目的边界。模式： ? 有没有人可以使用css或jquery来帮助解决这种情况。 编辑:我创建了复制品。有两个owl元素。我想要价格:在元素出现之前： $("#banner_section_right .slider").owlCarousel({});
$("#banner_section_left .slider").owlCarousel({}); #container {
width: 100%;
height: 200px;
浏览 7提问于2021-01-12得票数 0
我对owl carousel的动态变化有一些问题，比如幻灯片的数量等--换句话说，在一些变化之后，carousel很容易中断。 我的方法是重新加载/刷新旋转木马--但是如何呢？ 我在网上发现，你必须按类刷新它： $owl.trigger('refresh.owl.carousel'); 但是如何将其转换为Angular/Typescipt呢？
浏览 20提问于2019-09-22得票数 2
我正在使用Angular 2，我想让它成为响应式转盘。
<owl-carousel [options]="{nav : true, slideBy : 2 ,margin :14 }"
</owl-carousel>
这在没有响应的情况下工作正常。
但是当我想在它的show me error中添加响应选项时
但是当我在options中添加Responsive代码时是show error
但是在运行项目浏览器时显示以下错误，任何人可以帮助我创建响应式ng2-owl-carousel
浏览 0提问于2017-03-24得票数 3
1回答
我有两个owl旋转木马嵌套
这是html结构。
<li class="product">
<ul class="product-image-slider owl-carousel">
<li>image 1</li>
<li>image 1</li>
</ul>
content here..
</li>
<li class="produ
浏览 1提问于2018-08-14得票数 0
回答已采纳
3回答
您好，我正在试验owl carousel中的自动播放功能，但是每当我在chrome中切换到另一个web标签并返回到我的网页时，它停止工作，除非我在图像上给它一个拖拽。下面是我的html和jquery代码：
<!DOCTYPE html>
<html>
<head lang="en">
<title>MySite</title>
<meta charset="utf-8">
<meta name="viewport"
浏览 3提问于2017-01-22得票数 1
1回答
我在代码中添加了猫头鹰-旋转木马，我为一个横幅类型的旋转木马编写了代码，但是图像显示的是另一个下面的一个。
这是我的HTML代码：
<!--Owl Carousel-->
<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.theme.css">
<
浏览 0提问于2020-12-15得票数 0
我刚接触Angular2，正在尝试将Angularjs中的owl-carousel转换为Angular2。
下面是owl-carousel实现的index.html文件：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="
浏览 0提问于2016-04-14得票数 3
回答已采纳
我从网站上拖出了owl carousel的代码，其中包括css和Js，但在每个-webkit、-mos、-ms上都有错误。我看得更远，但他们要求添加JS： $(document).ready(function(){
$(".owl-carousel").owlCarousel({
navigation : false,
rtl:true,
slideSpeed : 300,
paginationSpeed : 400,
autoplay:true,
singleItem:
浏览 8提问于2020-09-28得票数 2
3回答
我有一个使用VueJS的项目。我有个问题。我想使用owl.carousel。我通过以下命令安装了它
npm install --save owl.carousel
我把它进口如下：
<script>
import jQuery from 'jquery'
let $ = jQuery
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
export default {
name: "SlideShow"
}
&l
浏览 1提问于2018-09-28得票数 2
8回答
我知道在第一个版本的owl carousel中我们是这样做的：
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.reinit({touchDrag: false, mouseDrag: false;});
好的，但是我们在第二个版本中是怎么做的，我不知道他们怎么重命名的。
浏览 1提问于2014-08-16得票数 15
我对要求有一些问题。
require.config({
paths: {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min"
},
waitSeconds: 40
});
requirejs(['jquery', '//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js'], function(jQuery){
浏览 0提问于2014-04-25得票数 2
回答已采纳
我又问了一个很有趣的问题。比方说，我有以下几点：
<div decorator="carousel">
{{ # filteredUsers }} // computed value from users array and a filter input
<div class="item">{{ name }}</div>
{{ / }}
</div>
使用作为装饰器，如下所示：
decorators: {
carousel: function( node )
{
浏览 3提问于2016-01-25得票数 0
回答已采纳
我有一个Rails应用程序，如果我返回到应该呈现它们的页面，它会重复包。例如，我的包含两个图像的OwlCarousel将相乘，并将旋转木马导航叠加在前一个图像之上。 Brief GIF to explain #app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>CRISPR Citrus</title>
<meta name="viewport" content="width=dev
浏览 20提问于2021-04-04得票数 1
在流星文档之后，我使用以下命令安装了：
meteor npm install --save owl.carousel
现在我把它放在node_modules/owl.carousel里了
我正试着像这里所说的那样Import它- ：
import owl.Carousel from 'owl.carousel';
但是在构建时，我得到了这个错误：
While building for web.browser: imports/startup/client/index.js:5:10: Unexpected token (5:10).
5:10是导入语句中的要点：import o
浏览 6提问于2016-05-27得票数 3
回答已采纳
1回答
我的应用程序需要有两个页面，一个登录页面和一个管理页面。这两个页面使用不同的主题。我无法将这两个页面的css和js文件集成到一个页面应用程序中。
const jquery = require('mdbootstrap/js/jquery-1.11.3.min.js');
window.jQuery = jquery;
window.$ = jquery;
require('mdbootstrap/css/bootstrap.min.css');
require('template/homePage/js/plugins/owl-carousel/owl
浏览 2提问于2019-10-21得票数 0
3回答
我想使用jQuery猫头鹰旋转木马与我的下一个js反应应用。我不想使用npm软件包react-owl-carousel，只有owl-carousel和jquery插件。
我在next.js dynamic中使用延迟加载，并将以下代码放在Webpack配置中：
import dynamic from 'next/dynamic';
const Slider = dynamic(() => import('...'), {
ssr: false,
});
Webpack配置：
config.plugins.push(new webpack.ProvideP
浏览 0提问于2019-06-18得票数 3
回答已采纳
1回答
我使用owl旋转木马2.0作为全屏滑块。这里的例子：
除了一个细节之外，它运行得很好:如果用户调整屏幕大小使屏幕变大，那么下一张幻灯片/图像的一部分就会显示几秒钟：
有什么办法能修好它吗？例如，这个滑块：不会出现这个问题，但是在这种情况下，我需要使用owl旋转木马。
这是我的标记：
<div class="owl-carousel-container">
<div class="owl-carousel">
<div>
<div class="img-container&
浏览 2提问于2015-10-16得票数 4
回答已采纳
1回答
您好，我创建了一个vue cli 3项目，我正在尝试导入owl carousel 2，但失败了。
这是我的main.js：
global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel";
import "bootstrap/dist/css/bootstrap.css";
import "bo
浏览 4提问于2019-02-08得票数 1
owlCarousel的默认行为运行良好，单击右侧的下一张幻灯片，然后单击上一张幻灯片将幻灯片滑动到左侧。
但是在使用动画之后，两者总是朝着相同的方向。
这里有一个快速的jsfiddle来显示这个问题：
所以在小提琴中，滑块应该在下一步和下一步在Prev上上升，但它总是在上升。我尝试了Animate.css的所有动画选项。
我也尝试过使用JQuery和owl carousel触发器在单击next或prev时覆盖动画，但效果不佳。
$(".news-slider .owl-nav .owl-next").click(function(e){
var carousel
浏览 6提问于2019-09-03得票数 1
3回答
css: owl.carousel.min.css
.owl-carousel,
.owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative
}
.owl-carousel {
display: none;
width: 100%;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
-moz-ba
浏览 2提问于2019-10-03得票数 0
我想在laravel上加一个旋转木马插件。
因此，我运行npm安装-保存owl.carouse，并将以下代码添加到中
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
owl.carousel.js在我的项目中，但是当我运行npm并查看浏览器时，控制台中显示了一个错误：
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
为什么会这样呢
浏览 0提问于2018-07-24得票数 1
当我点击这个图像的时候，我想移动一个图像在中心。下面是我尝试过的代码，它工作得很完美，但是根据要求，当我点击那个image.Can时，我必须移动中心的图像。
使用owl旋转木马版本2.1.1和CSS3 Flexbox，只需添加以下样式：
.owl-carousel .owl-stage {
display: flex;
align-items: center;
}
$( document ).ready( function() {
$( '.owl-carousel' ).owlCarousel({
autoplay: true,
marg
浏览 1提问于2020-04-20得票数 1
回答已采纳
2回答
我有以下html：
<div class="experience-items">
<div class="experience-item">Lorem</div>
<div class="experience-item">Lorem</div>
<div class="experience-item">Lorem</div>
</div>
我想让猫头鹰只在手机上工作。我试过了，但没用：
var checkWidth =
浏览 6提问于2017-02-06得票数 1
2回答
我有一个图像，它覆盖了桌面上的整个屏幕使用猫头鹰旋转木马。 当我在手机设备上观看同样的图片时，它只占屏幕尺寸的三分之一。 我如何调整它的高度，使其比目前手机上的高度更高？ 我读过一些帖子，但我是猫头鹰轮播的新手，我不确定我是否做错了什么。我找不到这个类https://css-tricks.com/forums/topic/owl-slider-100-height/，所以不确定 我对猫头鹰轮播的配置是 items: 1,
smartSpeed: 1000,
autoplay: true,
auto
浏览 33提问于2019-02-08得票数 3
回答已采纳
我在我的react应用中使用owl-react-carousel。owl carousel在组件渲染后注入一些div。我想使用react-dom创建一个div，然后包装owl carousel注入的div。试着说得更清楚
class Items extends Component {
render() {
return (
<div className="item"></div>
)
}
}
在呈现这个组件之后，owl carouse会在item类中注入一些节点。就像贝洛
<div classNam
浏览 1提问于2019-08-02得票数 1
1回答
我在我的html网站上放了一个owl carousal，当我加载html页面时，owl carousal不会自动移动。猫头鹰嘉年华，如下所示： if ($().owlCarousel) {
$('.owl-carousel').each(function() {
var $carousel = $(this);
$carousel.find('> *').each(function (i) {
$(this).attr('data-index', i);
});
var data = $carous
浏览 32提问于2020-01-17得票数 0
回答已采纳
我正在为一个学校项目建立一个网站，但是我的猫头鹰旋转木马滑块不工作。谁能帮帮我，因为我不明白为什么它不能工作。我试过阅读文档，但它对我没有帮助。
我想创建一个Owl Carousel的实例，但是尽管我遵循了说明，不同的div只是放在彼此的下面。我知道这可能有点含糊，但我不确定该怎么说。
谢谢!
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="styleshee
浏览 1提问于2014-11-21得票数 0
4回答
我正在尝试添加一个照片转盘到我的项目中，但是Owl carousel不会显示我的图像(src绝对正确)，它显示了整个容器的底部和前一个/下一个按钮的导航点，但没有我的图像。
将非常感谢您的帮助！
html：
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="plugins/owl-carousel/assets/owl.ca
浏览 2提问于2018-05-08得票数 0
1回答
Owl旋转木马2动态内容JSON
、、、、
我在使用Owl旋转木马2使用JSON/AJAX显示动态内容时遇到了问题。我在控制台中没有收到错误消息，但无法让旋转木马工作。我只看到一页空白。我可以用jquery.append追加从JSON文件中获取的图像url，但是不会以这种方式在旋转木马中显示它们。显示设置为“块”。有什么建议吗?我遗漏了什么？
index.html -
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-widt
浏览 3提问于2016-03-07得票数 1
回答已采纳
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Owl Carousel 2 Navigation on Sides - Left and Right</title>
<style>
.main-content {
position: relative;
}
.main-content .owl-theme .custom-nav {
posi
浏览 1提问于2021-01-05得票数 0
回答已采纳
3回答
Owl轮播无延迟自动播放
、、、
$(document).ready(function (){
$('.owl-carousel').owlCarousel({
items:5,
center:true,
autoplay:true,
autoPlayTimeout:1000,
autoplaySpeed:3000,
autoHeight:true,
autoplayHoverPause:false,
浏览 54提问于2021-01-04得票数 2
回答已采纳
1回答
我似乎不能让owl carousel在Drupal7中工作，我认为这可能会与Chaos工具发生冲突，但现在我不确定。我认为它在Drupal8中的运行没有任何问题，但我的客户在Drupal7中需要它。
我试过将它作为一个块和一个页面。目前，它垂直堆叠内容，而不是我希望的3行内联。
下面是显示我想要实现的功能的工作Drupal8链接：
下面是Drupal7不能工作的版本：
我怎样才能把这些内联起来呢？
忘了提一下，在父div中，它在开发工具中附加了一个页面“owl- carousel -class=_12”。如果我删除了-page_12，轮播将以内联方式呈现。
我似乎找不到如何防止这个类被添加。我
浏览 0提问于2019-08-08得票数 0
1回答
顺便说一句，这段代码也可以工作，但还有一件事我想提醒()，或者在用户单击拖动旋转木马时调用函数。我已经将文档读入使用过的Carousel事件，但仍然找不到结果，我将使用这个drag.owl.carousel dragged.owl.carousel选项来警告或调用函数，但它不能对我起作用。
$.ajax({
type: "GET",
url: "<?php echo base_url('main/data/12'); ?>",
dataType: "json",
cache: false,
浏览 0提问于2016-03-03得票数 1
回答已采纳
我更新了vite的dev环境。除了一个旧的jQuery插件，owl.slider，一切都很好。我明白这个错误：
owl.carousel.js:1718 Uncaught :无法读取未定义的属性(读取'fn')
在owl.carousel.js:1718
在node_modules/owl.carousel/dist/owl.carousel.js (owl.carousel.js:1753)
at __require2 (语块-IYHMIRNV.js?v=bf03b4af:5)
在dep:owl_carousel:1
当我使用webpack的时候，我有同样的想法，但是我用
浏览 4提问于2021-09-21得票数 2
我希望我的owl carousel使用更新的响应选项进行刷新。在jquery中，这可以通过使用：$owl.trigger('refresh.owl.carousel');来完成，正如这里提到的：Refresh owl-carousel in Angular (但是对于另一个使用jquery作为依赖项的插件)。 在api中，提到了refreshClass，但没有提到触发实例https://www.npmjs.com/package/ngx-owl-carousel-o的刷新 这个是可能的吗？
浏览 41提问于2020-04-14得票数 0
我正在尝试同时使用和Bootstrap来创建选项卡，这些选项卡具有用于选项卡导航的连续轮播。我还希望这些选项卡自动循环。
下面是一个可视的参考：
这里有一个小把戏：
我使用的主要JS (我已经注释掉了我被卡住的地方)：
var owlTab = $(".tab-carousel.owl-carousel");
owlTab.owlCarousel({
navigation: false,
dots:true,
navigationText: [
"<i class
浏览 1提问于2016-04-23得票数 9
3回答
我想添加猫头鹰旋转木马到我的网页，但它不加载，也没有错误信息在浏览器控制台中。为什么旋转木马不能加载？？
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" type="text/css" href="CSS_Header.css"/>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="assets/owl.carous
浏览 1提问于2014-09-11得票数 1
3回答
我的问题是如何在加载了元素或页面上的元素之后触发或调用函数，而不希望等待整个页面加载。
示例Fiddle：
问题填充：
调用JS:
document.getElementsByClassName("owlCarousel").onLoad = function(){
// do stuff
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
};
HTML:
<span class='slide'>
<div
浏览 2提问于2015-05-02得票数 1
html看起来是这样的。
<div id="carousel4up">
<div class="owl-carousel" data-composer='carousel4up' data-config='{
"height" : 350, "other": false }'
...
</div>
</div>
这个高度是从一个数据配置文件中设置的，它可能会改变。我想根据id="c
浏览 6提问于2015-05-07得票数 2
回答已采纳
在缩略图部分使用滑块后，我尝试触发单击事件，我已经找到了单击、下一步和返回的方式，但是当我根据“拖动”或“下/回”事件进行更改时，我需要触发“单击”事件。
我的代码：
$.view_travel_sight = {
owl: null,
owl_next: function() {
$.view_travel_sight.owl.trigger('next.owl.carousel');
},
owl_back: function() {
$.view_travel_sight.owl.trigger('prev.owl.carous
浏览 1提问于2018-09-15得票数 0
回答已采纳
正如我的问题所说，Owl Carousel没有显示在我的Rails应用程序中。图像只是在视图中堆叠显示，没有任何滑动按钮或旋转木马。为什么？
show.html.erb
<div class="columns">
<div id="owl-example" class="owl-carousel owl-theme">
<% @product.pictures.each do |pic| %>
<div><%= image_tag pic.image.url(:larg
浏览 2提问于2015-09-21得票数 0
我正在尝试用一个简单的实现来测试owl-carousel。
我已经添加到我的webpack.dev配置中
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
和我的HelloWorld.vue结合了这个测试
<template>
<div class="hello">
浏览 0提问于2018-01-13得票数 0
我在尝试执行猫头鹰旋转木马。所有的文件都正常工作，但是它的行为有一些极端的错误。
如下所示：
每个图像都有它自己的div，但猫头鹰旋转木马显示它就好像它只是一个图像。
这是它的代码：
.post_image_description
.owl-carousel#owl-example
- @post_attachments.each do |p|
= image_tag p.image_url
我的posts.js.coffee：
$ ->
$("#owl-e
浏览 6提问于2015-08-26得票数 1
回答已采纳
这里有两个带有自定义导航的猫头鹰旋转木马，只在一个旋转木马上工作，但当我添加多个旋转木马时，所有旋转木马的功能都是相同的，而不是固定的。
这是我的
这是我的JS代码
jQuery(function(){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
autoplay: 2000,
items:1,
nav:false,
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:true,
loop: true
浏览 0提问于2019-04-02得票数 0
回答已采纳
1回答
Owl旋转木马转换文本设置
、、、、
因此，我在朋友的网站上有一个猫头鹰旋转木马，它的设置打开，可以放大中心以前的客户名称，因为他们在旋转木马上滚动过用户。我试图关闭这个定制，因为原来的开发人员已经很糟糕地实现了它。
这是猫头鹰主题.owl的代码
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
.owl-theme .owl-dots,
.owl-theme .owl-nav {
text-align: center;
浏览 11提问于2022-03-23得票数 0
3回答
我目前正在开发中使用Owl Carousel 2.0.0-beta.2.4来保持旋转木马的中心，并循环项目，这很好用。
由于某些原因，Owl在设置loop: true时生成的克隆项似乎不会在单击时触发。您将在下面的示例中看到，当触发时，每个其他项都会向单击发出警报，但如果该项已被克隆，则似乎不会注册单击事件。
HTML：
<div id="multiple-carousel" class="carousel-style owl-carousel">
<div class="item">
<i
浏览 0提问于2015-07-31得票数 2
回答已采纳
1回答
当我使用owl carousel jquery库作为滑块时，我从我的模板中获得了以下代码片段。 $('.owl-carousel').owlCarousel({
items: 1,
lazyLoad: false,
loop: true
}); .owl-carousel .owl-lazy {
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
} <link href="https://cdnjs.clo
浏览 13提问于2019-09-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
