Javascript 带三张同步幻灯片的猫头鹰转盘
我正在寻找一个解决方案,以同步猫头鹰转盘幻灯片 我已经制作了一张只有两张幻灯片的同步幻灯片 我真正需要的是一张幻灯片,这是一个类别,下面是第二张幻灯片,其中包含的内容数量可变,属于不同的类别 我的解决方案是,复制/粘贴前两张幻灯片的代码,并更改所有类和所有内容。但它混淆了不同幻灯片上的所有类 这个想法还有别的解决办法吗 JavascriptJavascript 带三张同步幻灯片的猫头鹰转盘,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在寻找一个解决方案,以同步猫头鹰转盘幻灯片 我已经制作了一张只有两张幻灯片的同步幻灯片 我真正需要的是一张幻灯片,这是一个类别,下面是第二张幻灯片,其中包含的内容数量可变,属于不同的类别 我的解决方案是,复制/粘贴前两张幻灯片的代码,并更改所有类和所有内容。但它混淆了不同幻灯片上的所有类 这个想法还有别的解决办法吗 Javascript var sync1 = $(".service-line"); var sync2 =$(".servicetext"); $(".service-lin
var sync1 = $(".service-line");
var sync2 =$(".servicetext");
$(".service-line").owlCarousel({
navigation: false,
pagination: true,
slideSpeed: 1000,
paginationSpeed: 500,
paginationNumbers: true,
singleItem: true,
autoPlay: false,
autoHeight:false,
animateIn: 'slideIn',
animateOut: 'slideOut',
afterAction : syncPosition,
responsiveRefreshRate : 200,
afterMove: afterAction
});
function afterAction(){
$( ".owl-item.active" ).find( "animation-cap" ).addClass( "animated", "bounce" );
}
$(".servicetext").owlCarousel({
items: 1,
pagination: false,
slideSpeed: 800,
paginationSpeed: 700,
animateIn: 'slideIn',
animateOut: 'slideOut',
autoHeight: true,
responsiveRefreshRate : 100,
mouseDrag: false,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
$(".servicetext")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced");
if($(".servicetext").data("owlCarousel") !== undefined){
center(current);
}
}
$(".servicetext").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+1);
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1]);
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="konfig-slide-top"> <!--TOP Slider #1 -->
<!--TOP SLIDER slide1-->
<div class="slider-wrap">
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-xs-12 animation-cap">
<h2>Category 1</h2>
</div>
</div>
</div>
<!--<img src="img/service/01.png" alt="01">-->
</div>
</div><!--slide1 ends-->
<!--TOP SLIDER slide2-->
<div class="slider-wrap">
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-xs-12 animation-cap">
<h2>Category 1</h2>
</div>
</div>
</div>
<!--<img src="img/service/01.png" alt="01">-->
</div>
</div><!--slide2 ends-->
</div>
<!-- Top Slider ends -->
<!-- Bottom Slider Starts -->
<div class="konfig-slide-bottom">
<!-- ====== BOTTOM SLIDER Slide 1 ====== -->
<div class="row">
<div class="row lower-input-main">
<!-- ====== INNER SLIDER Slide starts ====== -->
<div class="konfig-slide-bottom-inner">
<div class="row">
<!--inner slider slide 1 -->
<div class="col-md-12">
<h1 style="color:white;">Slide 1 inner slide</h1>
</div>
</div>
<div class="row">
<!--slide 2 inner slide -->
<div class="col-md-12">
<h1 style="color:white;">Slide 2 inner slide</h1>
</div>
</div>
</div>
</div>
</div>
</div>
var sync1=$(“.service line”);
var sync2=$(“.servicetext”);
$(“.service line”).owlCarousel({
导航:错误,
分页:正确,
幻灯片速度:1000,
分页速度:500,
页码:true,
单项:对,
自动播放:错误,
自动高度:false,
animateIn:“slideIn”,
动画输出:“滑动输出”,
后遗症:同步定位,
响应速度:200,
后动:后动
});
函数后遗症(){
$(“.owl item.active”).find(“animation cap”).addClass(“animated”、“bounce”);
}
$(“.servicetext”).owlCarousel({
项目:1,
分页:false,
幻灯片速度:800,
分页速度:700,
animateIn:“slideIn”,
动画输出:“滑动输出”,
自动高度:正确,
响应速度:100,
mouseDrag:错,
afterInit:函数(el){
el.find(“.owl项”).eq(0).addClass(“已同步”);
}
});
功能同步位置(el){
var current=此.currentItem;
$(“.servicetext”)
.find(“.owl项”)
.removeClass(“已同步”)
.eq(电流)
.addClass(“同步”);
if($(“.servicetext”).data(“owlCarousel”)!==未定义){
中心(当前);
}
}
$(.servicetext”)。在函数(e)上单击“.owl项”{
e、 预防默认值();
变量编号=$(此).data(“owleItem”);
同步1.触发器(“owl.goTo”,编号);
});
功能中心(编号){
var sync2visible=sync2.data(“owlCarousel”).owl.visibleItems;
var num=数字;
var=false;
用于(sync2visible中的var i){
如果(num==sync2visible[i]){
var发现=真;
}
}
如果(找到===false){
如果(num>sync2visible[sync2visible.length-1]){
sync2.trigger(“owl.goTo”,num-sync2visible.length+1);
}否则{
如果(num-1==-1){
num=0;
}
sync2.trigger(“owl.goTo”,num);
}
}else if(num==sync2visible[sync2visible.length-1]){
sync2.trigger(“owl.goTo”,sync2visible[1]);
}else if(num==sync2visible[0]){
同步2.触发器(“owl.goTo”,num-1);
}
}
第一类
第一类
幻灯片1内幻灯片
幻灯片2内幻灯片
对不起,我贴错了东西。
至少,今天早上我又试了一次,完成了我的任务。我只想粘贴我的代码,所以这个问题得到了回答
我的jquery代码:
var synctop = $(".konfig-slide-top");
var syncbottom =$(".konfig-slide-bottom");
$(".konfig-slide-top").owlCarousel({
navigation: true,
pagination: false,
slideSpeed: 1000,
paginationSpeed: 500,
paginationNumbers: false,
singleItem: true,
autoPlay: false,
autoHeight:false,
animateIn: 'slideIn',
animateOut: 'slideOut',
afterAction : syncPositionnew,
responsiveRefreshRate : 200,
afterMove: afterActionnew
});
$(".konfig-slide-bottom").owlCarousel({
items: 1,
pagination: false,
navigation: false,
slideSpeed: 800,
paginationSpeed: 700,
animateIn: 'slideIn',
animateOut: 'slideOut',
autoHeight: true,
responsiveRefreshRate : 100,
mouseDrag: false,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("syncednew");
}
});
var owl = $(".konfig-slide-inner");
owl.owlCarousel({
items: 1,
pagination: false,
navigation: false,
slideSpeed: 800,
paginationSpeed: 700,
animateIn: 'slideIn',
animateOut: 'slideOut',
autoHeight: true,
responsiveRefreshRate : 100,
mouseDrag: false,
loop: false,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("syncednew2");
}
});
//slide inner slider
$('.next-inner').click(function() {
owl.trigger('owl.next');
});
var top = $(".konfig-slide-top");
// slide parent slider
$('.next-top').click(function() {
top.trigger('owl.next');
});
function afterActionnew(){
$( ".owl-item.active" ).find( "animation-cap" ).addClass( "animated", "bounce" );
}
function syncPositionnew(el){
var current = this.currentItem;
$(".konfig-slide-bottom")
.find(".owl-item")
.removeClass("syncednew")
.eq(current)
.addClass("syncednew");
if($(".konfig-slide-bottom").data("owlCarousel") !== undefined){
centernew(current);
}
}
$(".konfig-slide-bottom").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
synctop.trigger("owl.goTo",number);
});
function centernew(number){
var syncbottomvisible = syncbottom.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in syncbottomvisible){
if(num === syncbottomvisible[i]){
var found = true;
}
}
if(found===false){
if(num>syncbottomvisible[syncbottomvisible.length-1]){
syncbottom.trigger("owl.goTo", num - syncbottomvisible.length+1);
}else{
if(num - 1 === -1){
num = 0;
}
syncbottom.trigger("owl.goTo", num);
}
} else if(num === syncbottomvisible[syncbottomvisible.length-1]){
syncbottom.trigger("owl.goTo", syncbottomvisible[1]);
} else if(num === syncbottomvisible[0]){
syncbottom.trigger("owl.goTo", num-1);
}
}
在HTML中,konfig幻灯片内部嵌套在konfig幻灯片底部:
<div class="konfig-slide-top">
-slide 1
-slide 2
- etc.
</div>
<div class="konfig-slide-bottom">
<div class="konfig-slide-inner">
-slide 1
-text 1
-text 2
-text 3
-slide 2
-text 1
-text 2
-text 3
- etc.
</div>
</div>
-幻灯片1
-幻灯片2
-等等。
-幻灯片1
-文本1
-文本2
-文本3
-幻灯片2
-文本1
-文本2
-文本3
-等等。
现在我有了一个包含多个幻灯片的滑块,它与顶部滑块同步。
唯一的问题是,当konfig slide Internal从slide1更改为slide2时,slide2中的文本1不会显示,它会直接跳到文本2。这是总结,所以如果我有一张幻灯片3,现在没有显示两张文本幻灯片,依此类推。
我找不到它的线索。
请问,有人能帮我吗