javascript - div显示中的猫头鹰轮播:没有不起作用
问题描述
我在 div 中有一个猫头鹰轮播,div 用 display:none 隐藏;我通过jquery切换它。
HTML/PHP 结构:
<em class="otherdemoicon"></em>
<div class="otherdemos">
<div class="container">
<div class="has-carousel" data-items="4" data-loop="true" data-dots="true" data-auto="false" data-navs="false">
<?php foreach ($list as $item) : $images = json_decode($item->images); ?>
<div class="item text-center">
<a href="<?php echo $item->link; ?>" itemprop="url">
<img src="<?php echo $images->image_intro ?>" alt="client" />
<?php echo $item->title; ?>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
CSS:
.otherdemos {
position: fixed;
width: 100%;
background: #111;
left: 0;
right: 0;
top: 50px;
border-top: 1px solid #222;
display: none;
padding: 15px 0;
}
触发 div 脚本:
(function ($) {
$(document).ready(function () {
$('.otherdemoicon').click(function () {
$('.otherdemos').toggle();
});
})(jQuery);
猫头鹰轮播的jQuery脚本:
(function ($) {
//Carousel
var $has_carousel = $('.has-carousel');
if ($has_carousel.length > 0) {
$has_carousel.each(function () {
var $self = $(this);
var c_item = ($self.data('items')) ? $self.data('items') : 4;
var c_item_t = (c_item >= 3) ? 3 : c_item;
var c_item_m = (c_item_t >= 2) ? 2 : c_item_t;
var c_delay = ($self.data('delay')) ? $self.data('delay') : 6000;
var c_auto = ($self.data('auto')) ? true : false;
var c_loop = ($self.data('loop')) ? true : false;
var c_dots = ($self.data('dots')) ? true : false;
var c_navs = ($self.data('navs')) ? true : false;
var c_ctr = ($self.data('center')) ? true : false;
var c_mgn = ($self.data('margin')) ? $self.data('margin') : 30;
var c_animateOut = ($self.data('animateOut')) ? $self.data('animateOut') : 'fadeOut';
$self.owlCarousel({
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
items: c_item, loop: c_loop, nav: c_navs, dots: c_dots, margin: c_mgn, center: c_ctr, animateOut: c_animateOut,
autoplay: c_auto, autoplayTimeout: c_delay, autoplaySpeed: 300,
responsive: {0: {items: 1}, 480: {items: c_item_m}, 768: {items: c_item_t}, 1170: {items: c_item}}
});
});
}
})(jQuery);
问题是 display:none 导致 owl 在触发时无法正确调整 div 内的项目大小。
由于某些原因,我不想使用 opacity: 0/1 和 height: 0/auto 所以我尝试在触发时刷新轮播但没办法:
$('.otherdemoicon').click(function () {
$('.otherdemos').toggle();
$(".has-carousel").trigger("refresh.owl.carousel");
});
有什么建议吗?
解决方案
推荐阅读
- android - How to pass argument to the button's onClick function?(Android)
- c# - SignalR only client calling is getting the update from server. MVC
- c# - How can return string from database using dapper
- c# - LINQ 使用连接器类将新项目(学生)添加到另一种类型(课程)的列表中
- angular - 有哪些方法可以为单个页面应用程序的每个拉取请求生成演示链接?
- uml - 在用例图中使用打印机作为参与者
- java - 在线程“main”java.lang.NullPointerException中获取错误异常
- nginx - 我可以使用我自己的 https://
指向我集群的入口子域? - c++ - 无法写入导入地址表
- c - Create, eliminate duplicate and sort int array C