Javascript Слайд-шоу сползает

Question

Сегодня я пытаюсь создать слайд-шоу изображений, в котором есть несколько эффектов интереса.

То, чего я пытаюсь достичь, можно найти по этой ссылке: http://themes.jozoor.com/invention/white/index.html. Обратите внимание, когда вы просматриваете слайд-шоу на домашней странице, изображение и другие элементы встают на место.

Answer 1

Они используют Flexslider и добавляют анимацию самостоятельно. Если просмотреть code вы найдете

e(".flexslider").flexslider({ 
    animation:   "fade", 
    animationLoop:  true, 
    slideshow:   true, 
    slideshowSpeed: 6e3, 
    animationSpeed: 800, 
    pauseOnHover:  true, 
    pauseOnAction:  true, 
    controlNav:  false, 
    directionNav:  true, 
    controlsContainer: ".flex-container", 
    start:    function(t) 
    { 
     var n = e(".slider-1 .flex-active-slide h2").data("toptitle"); 
     var r = e(".slider-1 .flex-active-slide .item").data("topimage"); 
     var i = e(".slider-1 .flex-active-slide p").data("bottomtext"); 
     var s = e(".slider-1 .flex-active-slide .links").data("bottomlinks"); 
     e(".slider-1 .flex-active-slide").find(".item").css({top: r}); 
     e(".slider-1 .flex-active-slide").find(".item").animate({right: "0", opacity: "1"}, 1e3); 
     e(".slider-1 .flex-active-slide").find("h2").animate({left: "0", top: n, opacity: "1"}, 1500); 
     e(".slider-1 .flex-active-slide").find("p").animate({left: "0", bottom: i, opacity: "1"}, 1500); 
     e(".slider-1 .flex-active-slide").find(".links").animate({left: "0", bottom: s, opacity: "1"}, 1800); 
     t.removeClass("loading") 
    }, 
    before:   function(t) 
    { 
     e(".slider-1 .flex-active-slide").find(".item").animate({ 
      right: "-100%", 
      opacity: "0" 
     }, 1e3); 
     e(".slider-1 .flex-active-slide").find("h2").animate({left: "0", top: "-100%", opacity: "0"}, 1500); 
     e(".slider-1 .flex-active-slide").find("p").animate({left: "0", bottom: "-50%", opacity: "0"}, 1500); 
     e(".slider-1 .flex-active-slide").find(".links").animate({ 
      left: "0", 
      bottom: "-100%", 
      opacity: "0" 
     }, 1800) 
    }, 
    after:    function(t) 
    { 
     var n = e(".slider-1 .flex-active-slide h2").data("toptitle"); 
     var r = e(".slider-1 .flex-active-slide .item").data("topimage"); 
     var i = e(".slider-1 .flex-active-slide p").data("bottomtext"); 
     var s = e(".slider-1 .flex-active-slide .links").data("bottomlinks"); 
     e(".slider-1 .flex-active-slide").find(".item").css({top: r}); 
     e(".slider-1 .flex-active-slide").find(".item").animate({right: "0", opacity: "1"}, 1e3); 
     e(".slider-1 .flex-active-slide").find("h2").animate({left: "0", top: n, opacity: "1"}, 1500); 
     e(".slider-1 .flex-active-slide").find("p").animate({left: "0", bottom: i, opacity: "1"}, 1500); 
     e(".slider-1 .flex-active-slide").find(".links").animate({left: "0", bottom: s, opacity: "1"}, 1800) 
    } 
}); 

Answer 2

Это подлокотник Layer. Если вы не захотите начать разработку плагина еще раз, просто купите слайдер слоя. Поиск google с помощью layerlider.

Слайдер, как это, нелегко разработать. Если вы уже начали, то покажите нам какой-то код, в противном случае купите существующий номер