<style>
.text-img-custom-mode .t-slds__caption {
margin-top: 0 !important;
top: 120px;
}
.text-img-custom-mode .tn-atom__slds-img {
background-size: 100px auto !important;
background-position: 50% 0 !important;
}
.text-img-custom-mode .t-slds__caption_wrapper {padding: 0}
.text-img-custom-mode .t-slds__title {font-style: italic}
.text-img-custom-mode .text-slider-title {
font-size: 20px;
font-weight: 600;
}
.text-img-custom-mode .text-slider-description {opacity: 0.6}
.text-slider-icon div {
width: 40px;
height: 40px;
background-size: 75%;
background-position: center;
background-repeat: no-repeat;
}
.text-slider-icon {
display: flex;
justify-content: center;
margin-top: 12px;
}
.text-img-custom-mode .t-slds__caption-active {z-index: 99}
.icon-fbook { background-image: url(https://static.tildacdn.com/tild3636-6337-4332-b434-646330616666/49354_2.svg)}
.icon-inst { background-image: url(https://static.tildacdn.com/tild3532-3338-4432-b764-613136623238/1384015_1.svg)}
.icon-twitter { background-image: url(https://static.tildacdn.com/tild3833-6138-4366-a230-396363306532/1384017_1.svg)}
</style>
<div class="text-slider-wrap">
<div class="text-slider-title">Title One</div>
<div class="text-slider-description">“Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.”</div>
<div class="text-slider-icon">
<a href="https://www.facebook.com/"><div class="icon-fbook"></div> </a>
<a href="https://www.instagram.com/"><div class="icon-inst"></div></a>
<a href="https://twitter.com/"><div class="icon-twitter"></div></a>
</div>
</div>
<div class="text-slider-wrap">
<div class="text-slider-title">Title Two</div>
<div class="text-slider-description">“At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit.”</div>
<div class="text-slider-icon">
<a href="https://www.facebook.com/"><div class="icon-fbook"></div> </a>
<a href="https://www.instagram.com/"><div class="icon-inst"></div></a>
<a href="https://twitter.com/"><div class="icon-twitter"></div></a>
</div>
</div>
<div class="text-slider-wrap">
<div class="text-slider-title">Title Three</div>
<div class="text-slider-description">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”</div>
<div class="text-slider-icon">
<a href="https://www.facebook.com/"><div class="icon-fbook"></div> </a>
<a href="https://www.instagram.com/"><div class="icon-inst"></div></a>
<a href="https://twitter.com/"><div class="icon-twitter"></div></a>
</div>
</div>
<script>
$( document ).ready(function() {
let sldNum;
let galleryLoad = setInterval(function() {
if (document.querySelector('.tn-atom__slds-img')){
clearInterval(galleryLoad);
sldNum = $('.text-img-custom-mode .t-slds__caption').length;
for (let i=1; i<=sldNum; i++){
$('.text-img-custom-mode .t-slds__caption[data-slide-caption="'+i+'"] .t-slds__title').html($('.text-slider-wrap:eq('+(i-1)+')'));
};
};
}, 100);
});
</script>