问题描述
我在使用 owl carousel 时遇到问题,直到现在我不知道如何解决它。 因此,在图像 1 上,您可以看到滑块的正常行为。在第二个上,您将看到它的扩展功能。这个想法很简单,当用户点击元素时,他应该展开它,但是当元素展开时,所有其他元素都变成了 2 行,我不想发生。
<div class="element Box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs,sales sheets,proposals,scenario illustrations,brochures,posters,custom displays for Trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$(".owl-carousel").owlCarousel({
margin:10,loop: true,autoWidth: true,items:3,rewind: true,autoplay: true,responsiveClass:true,});
$('.work').each(function(i,el) {
$parent = $(el);
$('.element',$parent).each(function(i,item) {
$element = $(item)
$element.on('click',function(e) {
$current = $(this)
console.log($current)
if ($('.parent',$current).hasClass('hidden')) {
$('.parent',$current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius',10)
$('.child',$current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent',$current).removeClass('visible').addClass('hidden');
$current.css('border-radius',20)
$('.child',$current).removeClass('hidden');
}
})
})
})
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)