테스트 사이트 - 개발 중인 베타 버전입니다

슬라이드 무한 반복이요~ 채택완료

홀로그램웹 3년 전 조회 3,213

슬라이드가 계속 반복되게 할려면 무얼 추가해야하나요??

이 사이트에 계속 머물러 있으면 움직이고 머무르지 않으면 (듀얼이에요) 멈춰버려요~

 

 

</p>

<p>/* 

 * custom js Document

*/ </p>

<p>$(window).load(function(){

    

});</p>

<p>$(document).ready(function() {

    responsive();    

    visualAni();

    subCheck();    

    smoothScroll();

    //scrollHeader();

    lnbScroll();

    btnSelect();

    basicSel();

    swiper();

    defaultJs();

});</p>

<p>

//browser check

$(function(){

    //ie check

    var agent = navigator.userAgent.toLowerCase();

    if (agent.indexOf("msie") > -1 || agent.indexOf("trident") > -1) {

          $('body').addClass('ie');

    } else if ( agent.search( "edge/" ) > -1 ){

        $('body').addClass('ie_edge');

    } else {

        //나머지브라우저 컨트롤

    }

});</p>

<p>

//responsive style

function responsive(){

    

}</p>

<p>

function visualTxt(){

    //visual ani

    var gloStrong = $(".animation-time-text.on");

    var test = gloStrong.text();</p>

<p>    test = test.split("");

    gloStrong.empty();        </p>

<p>    for(i = 0; i < test.length; i++) {

        gloStrong.append("<i class='split" + i + "'>" + test[i] + "</i>");        

        gloStrong.children("i").eq(i).css('animation-delay', i + '00ms');

    }    

}</p>

<p>//visual slider animation

function visualAni(){

    $('.area_visual .list li').eq(0).addClass("active-slide").find("strong").addClass("on");

    visualTxt();</p>

<p>    $('.area_visual .list').bxSlider({

        mode:'fade',

        fade: true,

        auto:true,

        pager:true,

        controls:false,

        pause:3000,

        speed:1000,

        onSlideBefore:function(currentIndex){

            $('.area_visual .list li').children().eq(currentIndex).addClass('active-slide');

            $('.area_visual .list li strong').addClass("on");    

        },

        onSlideBefore: function($slideElement, oldIndex, newIndex){

            $('.area_visual .list li').removeClass('active-slide');

            $('.area_visual .list li strong').removeClass("on");

            $slideElement.find("strong").addClass("on");

            $slideElement.addClass('active-slide');

            visualTxt();

        }

    });    </p>

<p>    

    $(".scroll_down").click(function(event){            

        event.preventDefault();

        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 700);

    });

}</p>

<p>//sub style

function subCheck(){

    if ($("#wrap").children().is(".area_visual") || $("#wrap").children().is(".intro")) {

      $('body').addClass('main');

    }

    else{

         $('body').addClass('sub');

    }

}</p>

<p>//scroll custom

$(window).scroll( function(){

    $('.ani, .slideRight, .slideUp, .slidedown, .slideLeft').each( function(i){

        

        var bottom_of_object = $(this).offset().top + $(this).outerHeight()/3;

        var bottom_of_window = $(window).scrollTop() + $(window).height();

        

        if( bottom_of_window > bottom_of_object ){                

            $(this).addClass("is-animate");                        

        }

        else{

            //$(this).removeClass('is-animate');

        }        

    });     

});    </p>

<p>//scroll down

$(function() {

    $('.scrolldown').click (function() {

          $('html, body').animate({scrollTop: $('#content').offset().top }, 'slow');

          return false;

    });

});</p>

<p>//scroll top bottom

$(window).on('scroll', function() {

    

    if ($(window).scrollTop() < $(document).height() - $(window).height() - $('#footer').outerHeight() + 110) {

    $('.btn_top').addClass('active');

    } else {

        $('.btn_top').removeClass('active');

    }

    

    if ($(window).scrollTop() >= 500) {

        $('.btn_top').addClass('fiexd');

    }

    else {

        $('.btn_top').removeClass('fiexd');

    }</p>

<p>    var poTop = $("#footer").outerHeight();    </p>

<p>    if ($(window).scrollTop() < $(document).height() - $(window).height() - $('#footer').outerHeight()) {

        $('#footer, .fix_check').removeClass('stop');        

        //$('.fix_check').css({"bottom":"auto"});</p>

<p>    } else {

        $('#footer, .fix_check').addClass('stop');

        //$('.fix_check').css({"bottom":poTop});

        //alert(poTop);

    }</p>

<p>});</p>

<p>//smooth scroll

function is_mob(){

    return (/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera);

}</p>

<p>function is_mac(){

    return navigator.platform.indexOf('Mac') > -1;

}</p>

<p>function is_chrome(){

    return /Chrome/.test(navigator.userAgent);

}</p>

<p>function is_firefox(){

    return /Firefox/.test(navigator.userAgent);

}</p>

<p>function smoothScroll(){

    if(is_mob() || is_mac() || is_firefox()) return;

    var $window = $(window);

    if(smoothScroll_passive()){

        window.addEventListener("wheel",smoothScroll_scrolling,{passive: false});

    }else{

        $window.on("mousewheel DOMMouseScroll", smoothScroll_scrolling);

    }                

}</p>

<p>function smoothScroll_passive(){

    var supportsPassive = false;

    try {document.addEventListener("test", null, { get passive() { supportsPassive = true }});

    } catch(e) {}

    return supportsPassive;

}</p>

<p>function smoothScroll_scrolling(event){

    if(!event.path){

        event.path = new Array();

        function callParentNode(child){

            if(child.parentNode){

                event.path.push(child.parentNode);

                callParentNode(child.parentNode);

            }

            return;

        }

        event.path.push(event.target);

        callParentNode(event.target);

    }

    //스크롤이 일어나면 안되는 위치태그의 id를 넣어주세요

    var impossibility = new Array("non_scroll", "fix_ch");

    for(var i=0; event.path.length > i; i++){

        for(var j=0; impossibility.length > j; j++){

            if(event.path[i].getAttribute && event.path[i].getAttribute("id") ==impossibility[j])return;

        }

    }</p>

<p>    event.preventDefault();

    var $window = $(window);

    var scrollTime = 1;

    var distance_offset = 2.5;

    var scrollDistance = $window.height() / distance_offset;

    var delta = 0;

    if(smoothScroll_passive()){

        delta = event.wheelDelta/120 || -event.originalEvent.detail/3;

    }else{

        if(typeof event.originalEvent.deltaY != "undefined"){

            delta = -event.originalEvent.deltaY/120;

        }else{

            delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;

        }

    }</p>

<p>    var scrollTop = $window.scrollTop();

    var finalScroll = scrollTop - parseInt(delta*scrollDistance);

    TweenMax.to($window, scrollTime, {

        scrollTo : { y: finalScroll, autoKill:true },

        ease: Power3.easeOut,

        overwrite: 5

    });        

    

}</p>

<p> 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
3년 전

이것을 적용하고, 분석해서 수정까지 하기에는 너무 힘든것 같습니다.

 

코드가 한눈에 딱 들어와서 알려 주었으면 좋았을 텐데..

 

하지만 검색을 해보니 https://blogpack.tistory.com/1120  이런 것이 있으니,  참조하세요.

 

그리고 swiper.js 에 옵션도 있읍니다. https://solbel.tistory.com/187

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인