orbit_bootstrap2.1/modules/announcement/_annc_widget15.html.erb

63 lines
2.6 KiB
Plaintext

<div class="w-annc widget-announcement-15" style="position:relative;">
<div class="w-annc__more-wrap clearfix">
<h2 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h2>
</div>
<div style="position: absolute;top: 9em;width:100%; z-index:99;">
<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/left-01.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: 0;"></button>
<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/right-01.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0;"></button>
</div>
<ul class="w-annc__list row owl-carousel {{subpart-id}}" data-level="0" data-list="announcements" style="width: 95%; margin: 0 auto;">
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</div>
<div class="w-annc__content-wrap">
<div class="w-annc__meta">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
<span class="w-annc__status label {{status-class}}">{{status}}</span>
</span>
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
<span class="w-annc__postdate">{{postdate}}</span>
</span>
<span class="w-annc__category-wrap">
<span class="w-annc__category">{{category}}</span>
</span>
</div>
<h4 class="w-annc__entry-title">
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
</li>
</ul>
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i><%= (I18n.locale.to_s =="zh_tw") ? "Read More" : "More NEWS" %></a>
</div>
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
items:3,
responsive:{
0:{
items:1,
nav:true
},
580:{
items:3,
nav:false
},
}
})
$('.btn-right').click(function() {
$(this).parent().siblings('.owl-carousel').trigger('next.owl.carousel', [300]);
})
$('.btn-left').click(function() {
$(this).parent().siblings('.owl-carousel').trigger('prev.owl.carousel', [300]);
})
</script>