Flickity Carousel Slider 1
Responsive Big Grid with Flickity Carousel 1
<!-- Big grid slider 1 -->
<div class="row featured-1 mb-5">
<!--Start left cover-->
<div class="col-md-6 pb-05 pt-05 pe-md-05">
<div class="position-relative overflow-hidden">
<div class="nav-slider-hover nav-dots-top-right light-dots" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": true, "imagesLoaded": true }'>
<!--Item slider-->
<article class="col-12">
<div class="card card-full text-light overflow zoom">
<!--thumbnail-->
<div class="height-ratio image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img1.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Superstar calls for football clean up amid series of shocking allegations</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--Item slider-->
<article class="col-12">
<div class="card card-full text-light overflow zoom">
<!--thumbnail-->
<div class="height-ratio image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img2.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Walmart shares up 10% on online sales lift</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--Item slider-->
<article class="col-12">
<div class="card card-full text-light overflow zoom">
<!--thumbnail-->
<div class="height-ratio image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img3.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Bank chief warns on Brexit staff moves</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--Item slider-->
<article class="col-12">
<div class="card card-full text-light overflow zoom">
<!--thumbnail-->
<div class="height-ratio image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img4.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">The world's first floating farm making waves in Rotterdam</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--end item slider-->
</div>
</div>
</div>
<!--End left cover-->
<!--Start box news-->
<div class="col-md-6 pt-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Business</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Lifestyle</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Ditch receipts and four other tips to be a green shopper</h2>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid slider 1-->
Flickity Carousel Slider 2
Responsive Big Grid with Flickity Carousel 2
<!-- Big grid slider 2 -->
<div class="row">
<div class="col-12 pt-2 mb-5">
<div class="position-relative overflow-hidden">
<div class="nav-slider-hover nav-dots-top-right light-dots" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": true, "imagesLoaded": true }'>
<!--one slider content-->
<div class="item">
<div class="row featured-2 mb-5">
<!--Start big box news-->
<div class="col-md-6 pt-05 pb-05 pe-md-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img3.jpg" alt="Image description">
</a>
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Travel</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Devastating Amazon Rainforest Fires Threaten Climate Change Efforts</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-lg-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg card-title text-light my-1">Sealife encounters around the world: readers’ travel tips</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h3 class="h5 h3-sm h5-md card-title text-light my-1">Mercedes show their daring side to keep F1 thrill factor</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h3 class="h5 h3-sm h5-md card-title text-light my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
<!--two slider content-->
<div class="item">
<div class="row featured-2 mb-5">
<!--Start big box news-->
<div class="col-md-6 pt-05 pb-05 pe-md-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img4.jpg" alt="Image description">
</a>
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Travel</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Superstar calls for football clean up amid series of shocking allegations</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-lg-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg card-title text-light my-1">Sealife encounters around the world: readers’ travel tips</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h3 class="h5 h3-sm h5-md card-title text-light my-1">Mercedes show their daring side to keep F1 thrill factor</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h3 class="h5 h3-sm h5-md card-title text-light my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
<!-- end two slider content -->
</div>
</div>
</div>
</div>
<!--End Big grid slider 2-->
Flickity Carousel Slider 3
Responsive Big Grid with Flickity Carousel 3
<!-- Big grid slider 3 -->
<div class="row">
<div class="col-12 pt-2 mb-5">
<div class="position-relative overflow-hidden">
<div class="nav-slider-hover nav-dots-top-right light-dots" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": true, "imagesLoaded": true }'>
<!--one slider content-->
<div class="item">
<div class="row featured-8 mb-5">
<div class="col-12">
<div class="px-2 px-md-3">
<div class="row">
<!--one-->
<div class="col-12 col-lg-3">
<div class="row newsbox-start">
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h6 class="h5 h3-sm h5-md text-light my-1">Finding Empowerment in Two Wheels and a Helmet</h6>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card border-0 text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h5 class="h5 h3-sm h5-md text-light my-1">Why Sitting May Be Bad for Your Brain</h5>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<!--two-->
<div class="col-12 col-lg-6">
<div class="row newsbox-center">
<!--news box-->
<article class="col-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<a class="badge bg-primary text-white" href="#">Life style</a>
<a href="#">
<h4 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Devastating Amazon Rainforest Fires Threaten Climate Change Efforts</h4>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--three-->
<div class="col-12 col-lg-3">
<div class="row newsbox-end">
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h6 class="h5 h3-sm h5-md text-light my-1">Finding Empowerment in Two Wheels and a Helmet</h6>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h5 class="h5 h3-sm h5-md text-light my-1">Why Sitting May Be Bad for Your Brain</h5>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<!--end three-->
</div>
</div>
</div>
</div>
</div>
<!--two slider content-->
<div class="item">
<div class="row featured-8 mb-5">
<div class="col-12">
<div class="px-2 px-md-3">
<div class="row">
<!--one-->
<div class="col-12 col-lg-3">
<div class="row newsbox-start">
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h6 class="h5 h3-sm h5-md text-light my-1">Finding Empowerment in Two Wheels and a Helmet</h6>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card border-0 text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h5 class="h5 h3-sm h5-md text-light my-1">Why Sitting May Be Bad for Your Brain</h5>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<!--two-->
<div class="col-12 col-lg-6">
<div class="row newsbox-center">
<!--news box-->
<article class="col-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<a class="badge bg-primary text-white" href="#">Life style</a>
<a href="#">
<h4 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">If Only Her Voice Could Change the Way the Mets Play</h4>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--three-->
<div class="col-12 col-lg-3">
<div class="row newsbox-end">
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h6 class="h5 h3-sm h5-md text-light my-1">Finding Empowerment in Two Wheels and a Helmet</h6>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h5 class="h5 h3-sm h5-md text-light my-1">Why Sitting May Be Bad for Your Brain</h5>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<!--end three-->
</div>
</div>
</div>
</div>
</div>
<!-- end two slider content -->
</div>
</div>
</div>
</div>
<!--End Big grid slider 3-->
Flickity Carousel Slider 4
Responsive Big Grid with Flickity Carousel 4
<!-- Big grid slider 4 -->
<div class="row">
<div class="col-12 pt-2 mb-5">
<div class="position-relative overflow-hidden">
<div class="nav-slider-hover nav-dots-top-right light-dots" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": true, "imagesLoaded": true }'>
<!--one slider content-->
<div class="item">
<div class="row featured-1 mb-5">
<!--Start left cover-->
<div class="col-md-6 pb-05 pt-05 pe-md-05">
<div class="card card-full text-light overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img1.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Amazon Shoppers Are Ditching Designer Belts for This Best-Selling</h2>
</a>
<!-- author and date -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</div>
<!--End left cover-->
<!--Start box news-->
<div class="col-md-6 pt-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Business</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Lifestyle</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Ditch receipts and four other tips to be a green shopper</h2>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
<!--two slider content-->
<div class="item">
<div class="row featured-1 mb-5">
<!--Start left cover-->
<div class="col-md-6 pb-05 pt-05 pe-md-05">
<div class="card card-full text-light overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img3.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Superstar calls for football clean up amid series of shocking allegations</h2>
</a>
<!-- author and date -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</div>
<!--End left cover-->
<!--Start box news-->
<div class="col-md-6 pt-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Business</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Lifestyle</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Ditch receipts and four other tips to be a green shopper</h2>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
<!-- end two slider content -->
</div>
</div>
</div>
</div>
<!--End Big grid slider 4-->
Flickity Carousel Slider 5
Responsive Big Grid with Flickity Carousel 5
<!-- Big grid slider 5 -->
<div class="row">
<div class="col-12 pt-2 mb-5">
<div class="position-relative overflow-hidden">
<div class="nav-slider-hover nav-dots-top-right light-dots" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": true, "imagesLoaded": true }'>
<!--one slider content-->
<div class="item">
<div class="row featured-3 mb-5">
<!--Start big box news-->
<div class="col-lg-8 pt-05 pb-05 pe-lg-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/763x422/img1.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Automotive</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Active Participation in Group-Hunts Earns Wild Chimpanzees Meat Access</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-md-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-lg-4 pt-05 pb-05 ps-lg-05">
<div class="row newsbox">
<!--news box-->
<article class="col-sm-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/372x208/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Holiday</a>
<a href="#">
<h3 class="h5-sm h3-md h5-lg text-light my-1">Foraging of Mountain Gorillas for Sodium-Rich Foods</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-sm-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/372x208/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h5-sm h3-md h5-lg text-light my-1">Scientists Use Bear Saliva to Rapidly Test for Antibiotics</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
<!--two slider content-->
<div class="item">
<div class="row featured-3 mb-5">
<!--Start big box news-->
<div class="col-lg-8 pt-05 pb-05 pe-lg-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/763x422/img1.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Automotive</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Active Participation in Group-Hunts Earns Wild Chimpanzees Meat Access</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-md-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-lg-4 pt-05 pb-05 ps-lg-05">
<div class="row newsbox">
<!--news box-->
<article class="col-sm-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/372x208/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Holiday</a>
<a href="#">
<h3 class="h5-sm h3-md h5-lg text-light my-1">Foraging of Mountain Gorillas for Sodium-Rich Foods</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-sm-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/372x208/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h5-sm h3-md h5-lg text-light my-1">Scientists Use Bear Saliva to Rapidly Test for Antibiotics</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Big grid slider 5-->
Single Slider 6
Responsive Single slider
<!-- single slider -->
<div class="row featured-one mb-5">
<!--Start left cover-->
<div class="col-12">
<div class="position-relative overflow-hidden">
<div class="nav-slider-hover nav-dots-top-right light-dots" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": true, "imagesLoaded": true }'>
<!--Item slider-->
<article class="col-12">
<div class="card card-full text-light">
<!--thumbnail-->
<div class="height-ratio image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/1140x482/slide1.jpg" alt="Image description">
</a>
<div class="position-absolute text-center pb-5 p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Superstar calls for football clean up amid series of shocking allegations</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--Item slider-->
<article class="col-12">
<div class="card card-full text-light">
<!--thumbnail-->
<div class="height-ratio image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/1140x482/slide2.jpg" alt="Image description">
</a>
<div class="position-absolute text-center pb-5 p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Walmart shares up 10% on online sales lift</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!--End left cover-->
</div>
<!--End single slider-->
How to use ?
For best view, paste this big grid slider code under .container classes
Example
<div class="container">
<!-- Big grid slider 1 -->
<div class="row featured-1 mb-5">
<!--Start slider news-->
<div class="col-12 col-md-6 pb-05 pt-05 pe-md-05">
....
....
</div>
</div>
<!--End Big slider 1-->
</div>