Fullpage Slideshow

Fullpage Slideshow with jQuery

by Miftah Faroq

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Background-Slideshow-Plugin-For-jQuery-NOSlideShow/css/main.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Background-Slideshow-Plugin-For-jQuery-NOSlideShow/css/main.structure.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Background-Slideshow-Plugin-For-jQuery-NOSlideShow/css/provisional.css">
<script src="https://www.jqueryscript.net/demo/Responsive-Background-Slideshow-Plugin-For-jQuery-NOSlideShow/js/NOSlideShow.js"></script>
<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>

CSS

.wrapper {

width:150px;
height:300px;

}

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

JavaScript

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);