<section class="discus-parallax bg-white">
@{
int card3Col = 8;
int card3TotalRow = 1;
int card3CategoryOrderNumber = 2;
if (Partial.isCategoryOrderNumber(card3CategoryOrderNumber))
{
IEnumerable<Post>
card3PostsID = Partial.PostsID(card3CategoryOrderNumber, 0, card3Col * card3TotalRow, Partial.Order.OrderBy, true);
Category categorytitle = Partial.Category(card3CategoryOrderNumber);
int card3CountID = Convert.ToInt32(Math.Ceiling(card3PostsID.Count() / Convert.ToDouble(card3Col)));
<div class="discus-owl-brand m-0 p-0">
<div class="container">
<h2>@categorytitle.CategoryTitle.HtmlEncode()</h2>
@for (int componen = 0; componen < card3CountID; componen++)
{
<div class="owl-carousel-video owl-carousel-fix">
@foreach (Post comPost in card3PostsID.Skip(componen * card3Col).Take(card3Col))
{
<div class="box20 blue rounded ">
<img src="@comPost.PostThumbnail" alt="" class="kanvas">
<div class="box-content">
<h3 class="title"><a href="@Partial.PostLink(comPost.PostID)">@comPost.PostTitle.HtmlEncode()</a></h3>
</div>
</div>
}
</div>
}
</div>
</div>
}
}
</section>
<section class="discus-parallax bg-white">
@{
int card4CategoryOrderNumber = 3;
if (Partial.isCategoryOrderNumber(card4CategoryOrderNumber))
{
IEnumerable<Category> card5Category = Partial.CategorySubID(card4CategoryOrderNumber);
Category card44Category = Partial.Category(card4CategoryOrderNumber);
<div class="discus-owl-brand m-0 p-0">
<div class="container">
<h2>@card44Category.CategoryTitle</h2>
<div class="owl-carousel-video owl-carousel-fix">
@foreach (Category comCategory in card5Category)
{
<div class="box20 blue rounded">
<img src="@comCategory.CategoryThumbnail" alt="">
<div class="box-content">
<h3 class="title"><a href="@Partial.CategoryLink(comCategory.CategoryID)">@comCategory.CategoryTitle.HtmlEncode()</a></h3>
</div>
</div>
}
</div>
</div>
</div>
}
}
</section>
$('.owl-carousel-video').owlCarousel({
margin: 10,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true,
navText: [
'<i class="fas fa-chevron-left"></i>',
'<i class="fas fa-chevron-right"></i>'
],
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 4
}
}
});
STANDART JAVASCRİPT ( Aşağıdaki kod ekli ise tekrar eklemeye gerek yok)
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
$(document).ready(function () {
$('.counter').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
// Carouselin JAVASCRİPTi BURAYA EKLENECEK
});
</script>
CSS
<style>/*********************** Style *******************/
.kanvas {
width: 100%;
min-height: 180px;
max-height: 180px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rounded {
border-radius: .25rem !important;
}
.box20, .box20 .icon li a {
overflow: hidden;
}
.box20 {
box-shadow: 0 0 5px #a3a3a3;
}
.box20 .post, .box20 .title {
text-transform: capitalize;
width: 60%;
}
.box20 {
position: relative;
}
.box20:after, .box20:before {
position: absolute;
content: "";
}
.box20:before {
width: 80%;
height: 220%;
background: #0d428f;
top: -40%;
left: 10%;
z-index: 1;
transform: rotate(25deg);
transform-origin: center top 0;
transition: all .5s ease 0s;
}
/*
.box20:after {
width: 55%;
height: 175%;
bottom: -70%;
left: 53%;
transform: rotate(-33deg);
transform-origin: center bottom 0;
transition: all .8s ease 0s;
}*/
.box20 .box-content, .box20 .icon {
width: 100%;
padding: 0 8px;
position: absolute;
left: 0;
z-index: 2;
transition: all 1.1s ease 0s;
}
.box20 img {
width: 100%;
height: auto;
}
.box20 .box-content {
top: 7%;
color: #fff;
}
.box20 .title {
font-size: 24px;
margin: 0;
font-weight: 300;
}
.box20 .icon li a, .box20 .post {
display: inline-block;
font-size: 14px;
}
.box20 .post {
margin-top: 5px;
}
.box20 .icon {
list-style: none;
margin: 0;
bottom: 25px;
}
.box20 .icon li {
display: inline-block;
}
.box20 .icon li a {
width: 35px;
height: 35px;
line-height: 35px;
background: #fff;
border-radius: 50%;
margin: 0 3px;
color: #fff;
text-align: center;
transition: all .5s ease 0s;
}
.box20 .button {
background-color: #000000;
border-radius: 3px;
display: inline-block;
padding: 6px 12px;
margin-top: 10px;
}
.box20 a, box20 a:link, box20 a:visited, box20 a:hover, box20 a:active {
color: #ffffff !important;
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
min-height: 300px;
}
.discus-bg-full {
padding-bottom: 40px !important;
}
h2 a {
color: white;
font-weight: 300px;
font-size: 26px;
text-transform: uppercase;
}
.discus-bg-full .disucs-imageframe img {
height: 250px;
}
.video {
height: 0;
position: relative;
padding-bottom: 56.25%;
}
.video iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.discus-bg-full-video .disucs-imageframe img {
height: 400px;
}
.apps-bnr-caption {
position: absolute;
bottom: 30%;
right: 31.5%;
text-align: center;
}
.apps-bnr-text1 {
font-size: 30px;
line-height: 1.05em;
text-transform: uppercase;
}
</style>
Aşağıdaki linkleri Layout da head etiketleri arasına yapıştırın.
<link rel="stylesheet" href="https://www.karayeltasarim.com/discus/js/owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://www.karayeltasarim.com/discus/js/owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="https://www.karayeltasarim.com/discus/js/owlcarousel/dist/owl.carousel.min.js"></script>
https://ugurhaliyikama.com.tr
Sosyal Ağ