asiaH1/modules/ad_banner/_ad_banner_widget7.html.erb

80 lines
1.5 KiB
Plaintext

<div class="w-ba-banner ba-banner-widget-7">
<div class="owl-carousel"
data-list="images"
data-level="0"
>
<div class="img-item {{class}}">
<img src="{{image_link}}" alt="{{alt_title}}">
<div class="item-scope">
<span class="scope"></span>
<!-- <div class="scope-text">
<h2>{{title}}</h2>
<p>{{context}}</p>
</div> -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.owl-nav').click(function(){
event.preventDefault;
})
$('.owl-carousel').owlCarousel({
center: true,
dots:true,
items:2,
loop:true,
margin:10,
responsive:{
600:{
items:2
}
}
});
$('.owl-carousel').find('.owl-nav').removeClass('disabled');
$('.owl-carousel').on('changed.owl.carousel', function(event) {
$(this).find('.owl-nav').removeClass('disabled');
});
</script>
<style>
.ba-banner-widget-7{
.owl-carousel .owl-nav.disabled{
display:block;
}
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
font-size: 7vw !important;
color: #ddd;
background-color: #000000a6;
height: 100%;
padding: 10px;
}
.owl-carousel .owl-nav button.owl-next{
right:0;
position:absolute;
}
.owl-carousel .owl-nav button.owl-prev{
left:0;
position:absolute;
}
.owl-nav {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>