Tiggles ツ
4/25/2019 - 6:13 PM
Recent Blog Posts Slider Preview
Using a Recent Blog Posts page part, this will grab your items/entries and turn them into a carousel using Tiny Slider[1]. On click, a preview will show on the left of the carousel. Background will update to the post's image.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.8/tiny-slider.css">
</head>
<div class="section-hero">
<div id="blog-slider">
<div class="left-side">
<div id="blog-page-info"></div>
</div>
<div class="right-side">
<asp:ContentPlaceHolder ID="blogSlider" runat="server" visible="true"></asp:ContentPlaceHolder>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.8/min/tiny-slider.js"></script> if ($("body.blog-page form:not([action*='&beslug='])").length) {
var vidslider = tns({
container: '.recent-blog-posts-wrapper > ul',
items: 3,
slideBy: 'page',
nav: 'true',
gutter: 0,
mouseDrag: true,
controlsText: ['', ''],
controlsPosition: 'bottom',
nav: false,
loop: false,
});
$("form:not([action*='&beslug=']) .recent-blog-posts-wrapper ul li").each(function() {
$(this).wrapInner("<div class='flex-this' />")
})
var listedItem = $("form:not([action*='&beslug=']) .recent-blog-posts-wrapper ul li");
for (var i = 0, l = listedItem.length; i < l; i++) {
var blogEntryItem = $(listedItem[i]);
//define items to copy
var theTitle = blogEntryItem.find(".recent-blog-posts-title").text(),
theSnippet = blogEntryItem.find(".recent-blog-posts-body"),
theLink = blogEntryItem.find(".recent-blog-posts-title").attr("href"),
theIMGsrc = blogEntryItem.find("img").attr("src");
// creating elements
var blogTitle = document.createElement("h2"),
blogSnippet = document.createElement("div"),
blogLink = document.createElement("a"),
blogIMGdiv = document.createElement("div");
singleBlog = document.createElement("div");
// define the created elements
blogTitle.textContent = theTitle;
blogSnippet.append(theSnippet.text());
blogLink.setAttribute("href", theLink);
singleBlog.setAttribute("style", "background-image: url(" + theIMGsrc + ");");
// place things in their spots
singleBlog.appendChild(blogTitle);
singleBlog.appendChild(blogSnippet);
singleBlog.appendChild(blogLink);
// now place all that on the shelf
$("#blog-page-info").append(singleBlog);
$(singleBlog).wrapInner('<div class="post-info" />');
//class names
blogLink.className = "blog-entry-link btn hollow white";
singleBlog.className = "single-post tns1-item" + i;
// link language
$(".blog-entry-link").text("Read More")
}
//make the first one active
$("#blog-page-info .tns1-item0").addClass("active");
// clicking on the images will change the preview
$(".recent-blog-posts-wrapper ul li").each(function() {
var theSlideNumber = $(this).attr("id"),
matchContainer = $("#blog-page-info");
$(this).click(function() {
$(".single-post").removeClass("active");
matchContainer.find("."+theSlideNumber).addClass("active");
return false;
});
}).section-hero {
@media (min-width: 768px) {
.hero-title {
display: none;
}
&:after {
display: none;
}
height: calc(95vh - 110px);
position: relative;
.slider {
display: none;
}
#blog-slider {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
>div {
flex-basis: 50%;
width: 50%;
}
.left-side {
z-index: 0;
#blog-page-info {
position: relative;
height: 100%;
.single-post {
transition: all 0.33s ease;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 200%;
height: 100%;
opacity: 0;
visibility: hidden;
z-index: -1;
.post-info {
position: absolute;
width: 40%;
top: 50%;
transform: translateY(-50%);
color: white;
padding: 10px 20px 10px 50px;
text-align: left;
h2 {
color: white;
line-height: 1.4;
}
div {
line-height: 1.5;
}
.blog-entry-link {
margin-top: 50px;
}
}
&.active {
opacity: 1;
visibility: visible;
z-index: 1;
}
&:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, .5);
left: 0;
top: 0;
}
}
}
}
.right-side {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
>div {
height: 45vh;
.recent-blog-posts-wrapper {
// .tns-ovh { overflow-y: visible;}
ul {
padding-left: 0;
margin-bottom: 0;
li {
cursor: pointer;
.flex-this {
position: relative;
padding: 0 20px 0 0;
height: 50vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
.recent-blog-posts-body {
display: none;
}
.recent-blog-posts-title {
order: 1;
text-align: left;
color: white;
font-weight: bold;
flex-basis: 10%;
font-size: 16px;
letter-spacing: .2px;
text-transform: uppercase;
font-family: "brandon-grotesque", sans-serif;
}
.recent-blog-posts-date-wrapper {
order: 2;
text-align: left;
color: white;
margin: 5px 0;
}
>a:not(.recent-blog-posts-title) {
order: 3;
display: block;
flex-basis: 82%;
width: 100%;
overflow: hidden;
position: relative;
bottom: 0;
img {
position: absolute;
height: 100%;
left: 50%;
transform: translateX(-50%);
max-width: none;
}
}
}
}
}
.tns-controls {
text-align: left;
border: none;
button {
font-family: fontawesome;
border: 0;
-webkit-appearance: none;
background: none;
margin: 50px 60px 0 0;
outline: none;
font-size: 30px;
color: white;
&[disabled] {
color: rgba(white, .2);
}
}
}
}
}
}
}
}
}