Search code examples
jssor

Jssor slider: how to remove highlighting animation from thumbnail navigator


When you click on thumbnail image on thumbnail navigator, there is animation which goes to an image highlighting each image until it reaches the clicked thumbnail. I would like to remove the highlighting effect of the other thumbnails. I tried changing different options on thumbnail navigator, but I couldn't remove this effect.


Solution

  • Thumbnail animations are specified by css3 transition. For example, you can see css in 'skin\thumbnail-08.source.html' as below,

                .jssort08 .o
                {
                    ...
    
                    border: 1px solid #000;
    
                    transition: border-color .6s;
                    -moz-transition: border-color .6s;
                    -webkit-transition: border-color .6s;
                    -o-transition: border-color .6s;
                }
    

    You can remove the following code to disable the animation,

                    transition: border-color .6s;
                    -moz-transition: border-color .6s;
                    -webkit-transition: border-color .6s;
                    -o-transition: border-color .6s;