무언가 슬라이더 (몇 가지 문제)

Question

나는 이미 여러 시간을 보냈고 분명히 도움이 필요하다.

나는 콘텐츠 슬라이드 쇼 anythingslider를 사용합니다. 당신은 여기에서 찾을 수 있습니다 http://ontwikkelomgeving.wijzijnblits.nl/fobservices/slider

을 이제 문제 : 전환이있을 때

1. 는 깜빡 거림이있다. (가장 큰 문제)
2. 버튼이 활성화되어있을 때 (배경 그림을 위로 설정해야 함)
3. 버튼을 클릭하면 활성 상태가 표시되지만 표시가 사라지면 표시됩니다. . 또한, 다른 버튼을 클릭하고 첫 번째 커서를 놓지 않으면 2 개의 활성 상태가됩니다.

는

누군가는 이러한 문제 중 하나가 나를 도와 드릴까요? 미리 감사드립니다.

Answer 1

아마 하지 가장 좋은 대답.

하지만 어쩌면 내가 그것을 구현하는 사용하기 쉽고 빠른 기억으로, this slider을 시도 빨라집니다.

Answer 2

난 당신이 언급하는 플리커 문제가 표시되지 않지만, 활성 슬라이드 탐색 인 CSS에 문제가 있기 때문이다. 는 CSS에서

, 색상의 모든/배경 설정은 밖으로 분리 상단에 넣어, 그래서 CSS의 1 개 비트를 여러 번 정의 받고있다. 그래서 여기에 완전 업데이트 된 anythingslider.css 파일이 있습니다 :

/* 
    AnythingSlider v1.4.1+ Default (base) theme 

    By Chris Coyier: http://css-tricks.com 
    with major improvements by Doug Neiner: http://pixelgraphics.us/ 
    based on work by Remy Sharp: http://jqueryfordesigners.com/ 
*/ 

/******* SET DEFAULT DIMENSIONS HERE ********/ 
#sliderholder { 
    background-image: url(../images/bg-slider.jpg); 
    width: 533px; 
    height: 270px; 
    padding-left: 14px; 
    padding-top: 14px; 
} 
div.anythingSlider { 
    width: 519px; 
    height: 208px; 

} 

/****** SET COLORS HERE *******/ 
/* Default State */ 
div.anythingSlider .thumbNav a { 
    background: url(../images/thenav.png) center bottom; 
    color: #fff; 
} 

div.anythingSlider .start-stop { 
    background-color: #ff000; 
    color: #fff; 
} 
div.anythingSlider .start-stop.playing { 
    background-color: #800; 
} 
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { 
    color: #ddd; 
} 

/* Active State */ 
div.anythingSlider .start-stop { 
    background-color: #080; 
    color: #fff; 
} 
div.anythingSlider .start-stop.playing { 
    background-color: #d00; 
} 
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { 
    color: #fff; 
} 

/**** DO NOT CHANGE BELOW THIS LINE ****/ 
/* anythingSlider viewport window */ 
div.anythingSlider .anythingWindow { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 
/* wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */ 
div.anythingSlider { 
    position: relative; 
    padding-bottom: 35px; 
} 
/* anythingSlider base UL */ 
ul.anythingBase { 
    background: transparent; 
    list-style: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
} 
ul.anythingBase li.panel { 
    background: transparent; 
    display: block; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

/* Navigation Links */ 
div.anythingSlider .anythingControls { outline: 0; } 
div.anythingSlider .thumbNav { margin: 0; } 
div.anythingSlider .thumbNav li { display: inline; } 
div.anythingSlider .thumbNav a { 
    font-family: Verdana, Geneva, sans-serif; 
    font-size:13px; 
    display: inline-block; 
    text-decoration: none; 
    padding-top: 4px; 
    height: 21px; 
    width: 24px; 
    margin: 0 5px 0 0; 
    text-align: center; 
    margin-top: 8px; 
} 
div.anythingSlider .thumbNav a:hover, div.anythingSlider .thumbNav a.cur { 
    background-position: center top; 
} 
/* slider autoplay right-to-left, reverse order of nav links to look better */ 
div.anythingSlider.rtl .thumbNav a { float: left; } /* reverse order of nav links */ 
div.anythingSlider.rtl .thumbNav { float: left; } /* move nav link group to left */ 
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */ 

div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .thumbNav a, div.anythingSlider .arrow a, div.anythingSlider .start-stop { 
    transition-duration: 0; 
    -o-transition-duration: 0; 
    -moz-transition-duration: 0; 
    -webkit-transition-duration: 0; 
} 

.textSlide { margin: 15px; width:489px; height:178px; color:#fff; }