LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.panew {
  width: 230px;
  height: 145px;
  padding: 10px;
  background: #dedede;
  float: right;
}

.slideshow img {
  width: 230px;
  height: 145px;
}

.slideshow > * {
  position: absolute;
  display: none;
}

#list_section {
  text-align: center;
}

h1 {
  color: white;
  margin: 0px auto;
  padding: 20px;
}

ul {
  padding: 0;
}

li {
  background-color: #fff;
  color: #000;
  font-size: 20px;
  list-style-type: none;
  width: 20%;
  margin: 0px auto;
  border-radius: 3px;
  border: 1px solid #000;
  padding: 10px;
  margin-bottom: 10px;
}

p {
  background-color: #fff;
  color: #666;
  padding: 10px;
  display: inline-block;
  margin: 20px auto 20px auto;
  width: 80%;
  border-radius: 5px;
  text-align: center;
}

.item {
  background-color: #fff;
  color: #000;
}

input[type='text'] {
  font-size: 12px;
  padding: 6px;
  border: 1px solid #000;
  border-radius: 3px;
}

input[type='submit'] {
  background-color: #fff;
  color: #000;
  border-radius: 8px;
  border: none;
  padding: 5px;
}

#newItemButton {
  display: none;
}

#itemField {
  margin-top: 60px;
  width: 10%;
}
JS
jQuery(function ($) {
    var SLIDE_INTERVAL = 4000;
    var SLIDE_REACTIVATE_AFTER = 2000;
    var FADE_DURATION = 1000;

    var $slideshow = $('.slideshow');
    var $slides = $slideshow.children();

    var currentSlideIndex = 0;
    /*$slides.eg(1).hide(1, function () {
        $(this).appendTo($slideshow);
    });
    $slides.eq(2).hide(1, function () {
        $(this).appendTo($slideshow);
    });*/

    function getNextIndex() {
        currentSlideIndex = currentSlideIndex +1 >= $slides.length ?0 : currentSlideIndex +1;
        console.log("NEXT", currentSlideIndex);
        return currentSlideIndex;
    }

    function slideRight() {
        $slides.eq(currentSlideIndex).hide(200, function () {
            $(this).appendTo($slideshow);
        });
        $slides.eq(getNextIndex()).show("slide", { direction: "right" }, FADE_DURATION);
    }

    function slideAt(index) {
        $slides.eq(currentSlideIndex).hide(200, function () {
            $(this).appendTo($slideshow);
        });
        $slides.eq(index).show("slide", { direction: "right" }, FADE_DURATION);
        currentSlideIndex = index;
    }

    function setIntervalFactory () {
        return setInterval(function () {
            console.log("INTERVAL");
            slideRight();
        }, SLIDE_INTERVAL);
    }

    var id = setIntervalFactory();

    $('#btn_one').click(function() {
        slideAt(0);
    });
    $('#btn_two').click(function() {
        slideAt(1);
    });
    $('#btn_tree').click(function() {
        slideAt(2);
    });
});
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv