Widget:JJBENews

JJBE News widget. .swiper { width: auto; max-width: 600px; }

.swiper-slide img { height: 100%; width: 100%; object-fit: cover; }

.sliderBox { position: relative; height: 337px; }

.postTitle { font-weight: bold; font-size: large; padding-top: 10px; text-transform: uppercase; }

.postExcerpt { font-size: small; margin-top: -1%; margin-bottom: 3%; }

.sliderCaption { position: absolute; bottom: 2%; background-color: rgba(0, 0, 0, 0.8); color: white; text-shadow: 1px 1px 1px #333333; right: 0; padding: 5px; line-height: 1.5; }

.sliderCaption a { color: white; text-transform: uppercase; }

.sliderBox a { color: white !important; font-weight: bolder; letter-spacing: -1px; }

.swiper-slide { text-align: center; font-size: 18px; }

.swiper-button-next, .swiper-button-prev { top: 40%; }

.swiper-button-prev, .swiper-button-next { background-color: #455389; padding: 5px; border-radius: 10px; }   // DEFER LOADING SCRIPT UNTIL JQUERY IS READY. WAIT 40MS BETWEEN ATTEMPTS. function defer(method) { if (window.jQuery) { method; } else { setTimeout(function { defer(method) }, 40); }   }

// INITIALISATION defer(function {      $.getJSON("https://news.jojowiki.com/wp-json/wp/v2/posts?per_page=20", function (data) { initialize(data); })       .fail(function  { console.log("Error! Could not load the JSON file."); });

var postData;

function initialize(data) { postData = data;

$.each(postData, function (key, value) {           var link = value.link;            $(".post" + key + "Link").attr('href', link);

var image = $('#post' + key + 'Image'); var dataSrc = value.uagb_featured_image_src.large[0]; $(image).attr('data-src', dataSrc);

var title = value.title.rendered; var excerpt = value.excerpt.rendered;

$("#post" + key + "Title").html(title); $("#post" + key + "Excerpt").html(excerpt); });

createSlider;

}

function createSlider { var swiper = new Swiper(".mySwiper", {         centeredSlides: true,          observer: true,          observeParents: true,          slidesPerView: 1,          lazy: true,          loop: true,          autoplay: {            delay: 5500,            disableOnInteraction: false,          },          pagination: {            el: ".swiper-pagination",            clickable: true,          },          navigation: {            nextEl: ".swiper-button-next",            prevEl: ".swiper-button-prev",          },        }); }   });