LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

AngularJS Slider

Slider's are amazing!

Given the proper time...

And good user controls!

CSS
html {
  background-image: url(https://subtlepatterns.com/patterns/tweed.png);
}

.slideshow {
  font-family: "Arial", sans-serif;
  text-align: center;
  position:relative;
  width:600px;
  overflow:hidden;
  background: #1a1a1a;
  margin: 0 auto;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: .3em;
  margin-top: 30px;
}

.slideshow .slider-content {
  position: absolute;
  background: rgba(255,0,0,.3);
  width:100%;
}

.slideshow p.cover {
  float:left;
  visibility:hidden;
  padding-bottom:4%;
}

.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}

.animate-enter {
left:100%;
}

.animate-leave.animate-leave-active {
left:-100%;
}

.animate-enter.animate-enter-active,.animate-leave {
left:0;
}
JS
function MainController($scope, $timeout) {
 var slidesInSlideshow = 3;
 var slidesTimeIntervalInMs = 3000; 
  
  $scope.slideshow = 1;
  var slideTimer =
    $timeout(function interval() {
      $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
      slideTimer = $timeout(interval, slidesTimeIntervalInMs);
    }, slidesTimeIntervalInMs);
}
Host Instantly Drag and Drop Website Builder

 

Description

A simple slider made with AngularJS (unstable-branch) and CSS3
Term
Mon, 11/27/2017 - 21:41

Related Codes

Pen ID
Pen ID
Pen ID