LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  • Swipegory

    Swipegory is a swipable content slider often used to swipe between categories in mobile apps.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

  • Lorem

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

  • Lorem

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

CSS
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  padding: 0;
  background: #eee;
  font: 16px/2em 'Montserrat', sans-serif;
}
img {
  max-width: 150px;
  heigth: auto;
  display: block;
  margin: 0 auto;
}
h1 {
  text-align: center;
  font-size: 26px;
  margin: 10px 0 20px 0;
}
p {
  margin: 0 0 20px 0;
}
p.footer {
  font-size: 12px;
  text-align: center;
}
.swipegory {
  position: relative;
  max-width: 320px;
  height: 480px;
  margin: 0 auto;
  background: #fff;
  padding-top: 70px;
  overflow: hidden;
  transition: 1s height;
  transform: translate3d(0, 0, 0);
  margin-bottom: 5px;
}
.swipegory nav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #333;
}
.swipegory nav li {
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  transition: 1s all;
  transform: translate3d(0, 0, 0);
  line-height: 70px;
  height: 70px;
  font-size: 12px;
  text-transform: uppercase;
}
.swipegory nav li.prev {
  left: 0;
}
.swipegory nav li.cur {
  left: 50%;
}
.swipegory nav li.cur a {
  color: #fff;
}
.swipegory nav li.cur a:after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.swipegory nav li.next {
  left: 100%;
}
.swipegory nav li.before {
  left: 0;
}
.swipegory nav li.after {
  left: 100%;
}
.swipegory nav li a {
  position: relative;
  color: #999;
  text-decoration: none;
  padding: 0 20px;
  height: 70px;
  line-height: 70px;
  display: block;
  overflow: hidden;
  transition: 1s color;
}
.swipegory nav li a:after {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  background: cyan;
  width: 100%;
  height: 3px;
  opacity: 0;
  transition: 1s all;
  transform: translate3d(0, 3px, 0);
}
.swipegory ul.panes {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: move;
}
.swipegory ul.panes li {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  padding: 20px 20px 0 20px;
  transition: 1s all;
  transform: translate3d(0, 0, 0);
}
.swipegory ul.panes li.prev {
  transform: translate3d(-200%, 0, 0);
}
.swipegory ul.panes li.cur {
  transform: translate3d(-100%, 0, 0);
}
.swipegory ul.panes li.next {
  transform: translate3d(0, 0, 0);
}
.swipegory ul.panes li.before {
  transform: translate3d(-200%, 0, 0);
}
.swipegory ul.panes li.after {
  transform: translate3d(0, 0, 0);
}
@media all and (min-width: 320px) {
  body {
    padding: 20px 0;
  }
}
JS
var autoAdjustHeight = true;

// update on click
$('nav a').on('mousedown', function(e){
  e.preventDefault();
  var goTo = $(this).parent().index();  
  swipegoryUpdate(goTo);
});

// update on touch
$("ul.panes").swipe({
  swipeStatus:function(event, phase, direction, distance, duration, fingerCount) {    
    var translateString = 'translate3d(0px, 0px, 0px)';
    var transitionDuration = $('nav li.cur').css('transitionDuration');
    var speed = transitionDuration;    
    
    if(phase == 'move') {
      speed = '0ms';      
      if(direction == 'left') {
        translateString = 'translate3d(-' + distance + 'px, 0px, 0px)';
        $('.panes li.cur').css('marginLeft', '-'+ distance +'px');
      }
      else if(direction == 'right') {
        translateString = 'translate3d(' + distance + 'px, 0px, 0px)';
        $('.panes li.cur').css('marginLeft', distance +'px');
      }
      $('nav li.cur').css({ 
        transitionDuration: speed,
        transform: translateString
      });
      
    }
    else if (phase == 'end') {
      // reset transform3D    
      var marginLeft = $('nav li.cur').css('marginLeft');
      $('nav li.cur').attr('style', '').css('marginLeft', marginLeft);
      $('.panes li.cur').attr('style', '');
    }
  },
  swipeLeft:function(event, direction, distance, duration, fingerCount) {
    //This only fires when the user swipes left
    var goTo = $('nav li.cur').index();
    goTo++;
    swipegoryUpdate(goTo); 
  },
  swipeRight:function(event, direction, distance, duration, fingerCount) {
    //This only fires when the user swipes left
    var goTo = $('nav li.cur').index();
    goTo--;
    swipegoryUpdate(goTo); 
  },
  threshold: 50,
  triggerOnTouchEnd: false,
  allowPageScroll: "vertical",
  excludedElements: "button, input, select, textarea, .noSwipe"
});

// update on load
$(window).load(function() {
  swipegoryUpdate(0);  
});

function swipegoryUpdate(goTo) {
  var listItems = $('nav li');
  var panes = $('.panes');
  var prev = goTo - 1;
  var next = goTo + 1;  
  if(goTo >= 0 && goTo < listItems.length) {   
    listItems.removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
    $('li', panes).removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');

    listItems.each(function(i) {
      var li = $(this);
      var pane = $('li:eq('+i+')', panes);
      
      li.attr('style', '');

      if(i == prev) {
        li.addClass('prev');
        li.css('margin-left', '0');      
        pane.addClass('prev');
      }
      else if(i == next) {
        li.addClass('next');
        li.css('margin-left', '-' + li.outerWidth() + 'px');
        pane.addClass('next');
      }
      else if(i < goTo) {
        li.addClass('before');
        li.css('margin-left', '-' + li.outerWidth() + 'px');
        pane.addClass('before');
      }
      else if(i == goTo) {
        li.addClass('cur');
        var marginLeft = li.outerWidth() / 2;
        
        li.css('margin-left', '-' + marginLeft + 'px');
        pane.addClass('cur');

        if(autoAdjustHeight == true) {
          $('.swipegory').css('height', pane.outerHeight() + li.outerHeight());
        }

      }
      else if(i > goTo) {
        li.addClass('after');
        li.css('margin-left', '0');
        pane.addClass('after');
      }
    });    
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

Swipegory is a swipable content slider often used to swipe between categories in mobile apps.
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID