LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
"Snowying" by fiddleoak.
"Starlight" by ChaoticMind75.
"Snowstorm" by Beaulawrence.
"Misty winter afternoon" by Bert Kaufmann.
"Good Morning!" by Frank Wuestefeld.
"Driving home for Christmas" by Bert Kaufmann.
« »

An example of a pretty basic diy slideshow. Also see the no-jQuery version here: https://codepen.io/leemark/pen/DLgbr

CSS
body {
  margin: 0; 
  padding: 0;
  background: #111;
  height: 100%;
}
.diy-slideshow{
  position: relative;
  display: block;
  overflow: hidden;
}
figure{
  position: absolute;
  opacity: 0;
  transition: 1s opacity;
}
figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
}
figcaption a{
  color: #fff;
}
figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
p{
  margin: 10px 20px;
  color: #fff;
}
a{color:#fff;}
JS
var counter = 0, // to keep track of current slide
    $items = $('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
    numItems = $items.length; // total number of slides

// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function(){
    var itemToShow = Math.abs(counter%numItems);// uses remainder (aka modulo) operator to get the actual index of the element to show  
   
  $items.removeClass('show'); // remove .show from whichever element currently has it
  $items.eq(itemToShow).addClass('show');    
};

// add click events to prev & next buttons 
$('.next').on('click', function(){
    counter++;
    showCurrent(); 
});
$('.prev').on('click', function(){
    counter--;
    showCurrent(); 
});

// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
if('ontouchstart' in window){
  $('.diy-slideshow').swipe({
    swipeLeft:function() {
      counter++;
      showCurrent(); 
    },
    swipeRight:function() {
      counter--;
      showCurrent(); 
    }
  });
}

Description

Also supports swiping on touch devices. A vanilla JS (no-jQuery) version can be found here: http://codepen.io/leemark/pen/DLgbr
Term
Mon, 11/27/2017 - 21:32

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv