Fullpage Slideshow (jQuery)

Halo teman-teman apa kabar 🙂
Nah tulisan kali ini kita akan mencoba, sebuah tutorial slideshow dengan menggunakan library jQuery dan sebuah Plugin jQuery tentunya. Plugin yang akan kita gunakan namanya NOSlideshow. Untuk tutorial kali ini lebih tepatnya kita akan membuat efek fullpage slideshow, jadi jika teman-teman ingin membuat sebuah slideshow, namun ukuran gambar full sesuai dengan ukuran layar, so teman-teman dapat menggunakan cara berikut.

Isi di tag body

<div class="wrapper">
  <div class="text-wrapper">
    <div class="cover-body">
      <div class="cover-body-inner">
        <div class="cover-title"> <a href="#" class="link-item title">NOSlideShow.js</a> </div>
        <div class="cover-description">
          <p>A Background Slideshow Plugin</p>
          <p class="cover-subtitle"></p>
        </div>
        <div class="cover-actions"> </div>
      </div>
    </div>
  </div>
  <div class="cover-img cover-img__b"></div>
  <div class="cover-img cover-img__a"></div>
</div>

Kemudian sisipkan embededd css sebagai berikut:

<style>
.wrapper {

width:150px;
height:300px;

}

.text-wrapper {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
}
</style>

jangan lupa untuk bagian tag headnya sisipkan beberapa file css berikut:

<link href="style/main.css" rel="stylesheet">
<link href="style/main.structure.css" rel="stylesheet">
<link href="style/provisional.css" rel="stylesheet">

source nanti bisa teman-teman unduh. Kemudian jangan lupa untuk menyisipkan file javascriptnya, sebagai berikut:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="js/NOSlideShow.js"></script> 
<script>

var mySlideShow = new SlideShow('projectSlides');
    mySlideShow.container.label = $(".cover-subtitle");
    mySlideShow.container.image = $(".cover-img.cover-img__a");
    mySlideShow.container.background = $(".cover-img.cover-img__b");

  // Set Slides.
  mySlideShow.setSlides([{name: 'First Slide', image: 'https://unsplash.it/1800/1600/?random'},
                         {name: 'Second Slide', image: 'https://unsplash.it/1800/1200/?random'},
                         {name: 'Third Slide', image: 'https://unsplash.it/1800/1500/?random'},
                         {name: 'Fouth Slide', image: 'https://unsplash.it/1800/1400/?random'}
                        ]);

  // Display first slide.
  mySlideShow.displaySlide();

  // Loop slides.
  var showInterval = setInterval("mySlideShow.advanceSlide()", 3000);



</script>

Untuk kodenya secara utuh sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery NOSlideShow Plugin Demo</title>
<link href="style/main.css" rel="stylesheet">
<link href="style/main.structure.css" rel="stylesheet">
<link href="style/provisional.css" rel="stylesheet">
</head>

<body>
<style>
.wrapper {

width:150px;
height:300px;

}

.text-wrapper {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
}
</style>
<div class="wrapper">
  <div class="text-wrapper">
    <div class="cover-body">
      <div class="cover-body-inner">
        <div class="cover-title"> <a href="#" class="link-item title">NOSlideShow.js</a> </div>
        <div class="cover-description">
          <p>A Background Slideshow Plugin</p>
          <p class="cover-subtitle"></p>
        </div>
        <div class="cover-actions"> </div>
      </div>
    </div>
  </div>
  <div class="cover-img cover-img__b"></div>
  <div class="cover-img cover-img__a"></div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="js/NOSlideShow.js"></script> 
<script>

var mySlideShow = new SlideShow('projectSlides');
    mySlideShow.container.label = $(".cover-subtitle");
    mySlideShow.container.image = $(".cover-img.cover-img__a");
    mySlideShow.container.background = $(".cover-img.cover-img__b");

  // Set Slides.
  mySlideShow.setSlides([{name: 'First Slide', image: 'https://unsplash.it/1800/1600/?random'},
                         {name: 'Second Slide', image: 'https://unsplash.it/1800/1200/?random'},
                         {name: 'Third Slide', image: 'https://unsplash.it/1800/1500/?random'},
                         {name: 'Fouth Slide', image: 'https://unsplash.it/1800/1400/?random'}
                        ]);

  // Display first slide.
  mySlideShow.displaySlide();

  // Loop slides.
  var showInterval = setInterval("mySlideShow.advanceSlide()", 3000);

/*
// Layout
function adjustCoverImage() {
  var width = $(".cover").width();
  var height = width * 0.50;
  $(".cover").height(height+'px');
}

$(window).resize(function() { 
  adjustCoverImage();
});

$(document).ready(function() { 
  adjustCoverImage();
});*/

</script>
</body>
</html>

Download berkasnya disini
https://drive.google.com/open?id=1eVGJNPsEYbzqOTtO-wbmx7pkLdsD7trA

Untuk hasilnya teman-teman dapat lihat live seperti berikut: