何スライダー（いくつかの問題）

Question

私は、私はすでに上で時間を過ごし、明らかに私は本当に助けを必要とするいくつかの問題を得ました。

私はコンテンツのスライドショーのanythingsliderを使用しています。あなたはここでそれを見つけることができます：今http://ontwikkelomgeving.wijzijnblits.nl/fobservices/slider

を問題：

1. 遷移があった場合にちらつきがあります。 （最大の問題）
2. ボタンがアクティブな場合は表示されません（バックグラウンドimgを上に設定する必要があります）
3. ボタンをクリックするとアクティブな状態が表示されますが、いったん表示されると消えてしまいます。また、私は別のボタンをクリックし、私は最初のものをホバーしない場合、私は2つのアクティブな状態を取得します。

誰かがこれらの問題のいずれかで私を助けることができますか？ ありがとうございました！

Answer 1

おそらくない最良の答え。

しかし、多分私がそれを実装するために使用して簡単かつ迅速に覚えているとして、this sliderを試すために速くなります。

Answer 2

私はあなたが参照しているフリッカの問題が表示されませんが、アクティブなスライドナビゲーションはCSSで問題があるためです。

cssでは、色/背景の設定はすべて切り離され、一番上に置かれるため、この1ビットのCSSが複数回定義されていました。ですから、完全に更新された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; }