LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Lorem ipsum

dolor sit amet,

consectetuer

adipiscing elit

CSS
body, html{
  margin: 0px;
  background: #ccc;
}

.slideContainer{
  position: relative;
  left: 25px;
  top: 25px;
  width: 500px;
  height: 300px;
}

.slider {
  position: absolute;
  width: 400px;
  height: 200px;
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
  z-index: 0;
}

.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 200px;
}

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    background: white;
}

.slide:first-child {
    display: block;
}


.slide-buttons {
  text-align: center;
}

.slide-btn {
  position: relative;
  bottom: 190px;
  border: none;
  background: none;
  color: #ccc;
  font-size: 200%;
  line-height: 0.5em;
}

.slide-btn.active, .slide-btn:hover {
  color: #000;
  cursor: pointer;
}

h3{
  position: relative;
  text-align: center;
  font: bold 64px 'Dancing Script';
}

.bubble{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
  height: 200px;
  background: black;
  border-radius: 10px;
}

.bubble:before{
  content:"";
  position: relative;
  top: 274px;
  left: 200px;
  width: 0px; 
  height: 0px; 
  border-top: 75px solid black;
  border-left: 75px solid transparent;
}

.bubble:after{
  content:"";
  position: relative;
  z-index: 999 !important;
  top: 256px;
  left: 120px;
  width: 0px; 
  height: 0px; 
  border-top: 75px solid white;
  border-left: 75px solid transparent;
}
JS
$('.slider').each(function() {              // For every slider
  var $this   = $(this);                    // Current slider
  var $group  = $this.find('.slide-group'); // Get the slide-group (container)
  var $slides = $this.find('.slide');       // Create jQuery object to hold all slides
  var buttonArray  = [];                    // Create array to hold navigation buttons
  var currentIndex = 0;                     // Hold index number of the current slide
  var timeout;                              // Sets gap between auto-sliding

  function move(newIndex) {          // Creates the slide from old to new one
    var animateLeft, slideLeft;      // Declare variables

    advance();                       // When slide moves, call advance() again

    // If it is the current slide / animating do nothing
    if ($group.is(':animated') || currentIndex === newIndex) {  
      return;
    }

    buttonArray[currentIndex].removeClass('active'); // Remove class from item
    buttonArray[newIndex].addClass('active');        // Add class to new item

    if (newIndex > currentIndex) {   // If new item > current
      slideLeft = '100%';            // Sit the new slide to the right
      animateLeft = '-100%';         // Animate the current group to the left
    } else {                         // Otherwise
      slideLeft = '-100%';           // Sit the new slide to the left
      animateLeft = '100%';          // Animate the current group to the right
    }
    // Position new slide to left (if less) or right (if more) of current
    $slides.eq(newIndex).css( {left: slideLeft, display: 'block'} );

    $group.animate( {left: animateLeft}, function() {    // Animate slides and
      $slides.eq(currentIndex).css( {display: 'none'} ); // Hide previous slide      
      $slides.eq(newIndex).css( {left: 0} ); // Set position of the new item
      $group.css( {left: 0} );               // Set position of group of slides
      currentIndex = newIndex;               // Set currentIndex to the new image
    });
  }

  function advance() {                     // Used to set 
    clearTimeout(timeout);                 // Clear previous timeout
    timeout = setTimeout(function() {      // Set new timer
      if (currentIndex < ($slides.length - 1)) { // If slide < total slides
        move(currentIndex + 1);            // Move to next slide
      } else {                             // Otherwise
        move(0);                           // Move to the first slide
      }
    }, 4000);                              // Milliseconds timer will wait
  }

  $.each($slides, function(index) {
    // Create a button element for the button
    var $button = $('');
    if (index === currentIndex) {    // If index is the current item
      $button.addClass('active');    // Add the active class
    }
    $button.on('click', function() { // Create event handler for the button
      move(index);                   // It calls the move() function
    }).appendTo('.slide-buttons');   // Add to the buttons holder
    buttonArray.push($button);       // Add it to the button array
  });

  advance();                          // Script is set up, advance() to move it


});
Host Instantly Drag and Drop Website Builder

 

Description

Speech Bubble Slider for my website I am building.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID