jquery slider yapımı
jquery slider yapımı
Bu yazımızda göstereceğimiz jqery slider uygulaması ile 1-2-3-4-5 gibi sayılar ile linklenmiş olan resimler arasında gezinebilir siniz…
Bu slider örneğimizde resimler zamanlayıcı sayesinde otomatik olarak değişmektedir.
Hepinize bol Jquery slider yapımları
-”js”, “img”, “skin03″ klasörülerini sitenizin kök klasörüne kopyalayın ardından slider’ı eklemek istediğiniz dosyaya aşağıdaki adımları izleyerek sliderın kurulumunu tamamlayın…
<head></head> etiketleri arasına
<script>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-27609226-1’]);
_gaq.push([‘_setDomainName’, ‘jssor.com’]);
_gaq.push([‘_trackPageview’]);
(function () {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
bu kodu ardından <body> </body> etiketleri arasına
<script type=”text/javascript” src=”js/Jssor.Core.js”></script>
<script type=”text/javascript” src=”js/Jssor.Debug.js”></script>
<script type=”text/javascript” src=”js/Jssor.EventManager.js”></script>
<script type=”text/javascript” src=”js/Jssor.Point.js”></script>
<script type=”text/javascript” src=”js/Jssor.Utils.js”></script>
<script type=”text/javascript” src=”js/Jssor.Easing.js”></script>
<script type=”text/javascript” src=”js/Jssor.Navigator.js”></script>
<script type=”text/javascript” src=”js/Jssor.CaptionSlider.js”></script>
<script type=”text/javascript” src=”js/Jssor.Slider.js”></script>
<script type=”text/javascript” src=”js/Jssor.ThumbnailNavigator.js”></script>
<script>
var _SlideshowTransitions = [];
//Collapse Transitions
{
//Collapse Stairs
_SlideshowTransitions.push({ $Duration: 1200, $Delay: 30, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $SlideOut: true, $Assembly: 2049, $Easing: $JssorEasing$.$EaseOutQuad, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs });
//Collapse Swirl
_SlideshowTransitions.push({ $Duration: 500, $Delay: 50, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
//Collapse Square
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 600, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad, $Formation: $JssorSlideshowFormations$.$FormationSquare });
//Collapse RectangleCross
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 600, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad, $Formation: $JssorSlideshowFormations$.$FormationRectangleCross });
//Collapse Rectangle
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 800, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad, $Formation: $JssorSlideshowFormations$.$FormationRectangle });
//Collapse Cross
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 600, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad, $Formation: $JssorSlideshowFormations$.$FormationCross });
//Collapse Circle
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 800, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Zoom: true, $SlideOut: true, $Assembly: 2049, $Formation: $JssorSlideshowFormations$.$FormationCircle });
//Collapse ZigZag
_SlideshowTransitions.push({ $Duration: 300, $Delay: 60, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad, $Formation: $JssorSlideshowFormations$.$FormationZigZag });
//Collapse Random
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Zoom: true, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad });
}
//Float Transitions
{
//Float right Random
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 2, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInQuart, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseInCubic} });
//Float up Random
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 4, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInQuart, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseInQuad} });
//Float up Random with Chess
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Assembly: 260, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInQuart, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseInCubic} });
//Float right ZigZag
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 2, $Assembly: 513, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationZigZag });
//Float up ZigZag
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 4, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationZigZag });
//Float up ZigZag with Chess
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Assembly: 1028, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $ChessMode: { $Column: 12, $Row: 3} });
//Float right Swirl
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 2, $Reverse: true, $Assembly: 513, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
//Float up Swirl
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 4, $Reverse: true, $Assembly: 513, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
//Float up Swirl with Chess
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Reverse: true, $Assembly: 513, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationSwirl, $ChessMode: { $Column: 12, $Row: 3} });
}
//Fly Transitions
{
//Fly Right Random
_SlideshowTransitions.push({ $Duration: 2000, $Delay: 30, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 1, $Easing: $JssorEasing$.$EaseInBounce });
//Fly up Random
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 8, $Easing: $JssorEasing$.$EaseInBounce });
//Fly up Random with Chess
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 60, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 6, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: $JssorEasing$.$EaseInBounce });
//Fly Right ZigZag
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 1, $Assembly: 513, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationZigZag });
//Fly up ZigZag
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 8, $Assembly: 264, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationZigZag });
//Fly up ZigZag with Chess
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 5, $Assembly: 1028, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $ChessMode: { $Column: 3, $Row: 12} });
//Fly Right Swirl
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 1, $Reverse: true, $Assembly: 513, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
//Fly up Swirl
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 8, $Reverse: true, $Assembly: 2049, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
//Fly up Swirl with Chess
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 8, $Reverse: true, $Assembly: 513, $Easing: $JssorEasing$.$EaseInCubic, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
}
//Expand Transitions
{
//Expand Stairs
_SlideshowTransitions.push({ $Duration: 1200, $Delay: 30, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Assembly: 2049, $Easing: $JssorEasing$.$EaseInQuad, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs });
//Expand Straight
_SlideshowTransitions.push({ $Duration: 1000, $Cols: 3, $Rows: 2, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Easing: $JssorEasing$.$EaseInBounce });
//Expand Swirl
_SlideshowTransitions.push({ $Duration: 300, $Delay: 30, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Easing: $JssorEasing$.$EaseInQuad, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
//Expand Square
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 200, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Easing: $JssorEasing$.$EaseInQuad, $Formation: $JssorSlideshowFormations$.$FormationSquare });
//Expand RectangleCross
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 200, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Easing: $JssorEasing$.$EaseInQuad, $Formation: $JssorSlideshowFormations$.$FormationRectangleCross });
//Expand Rectangle
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 600, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Easing: $JssorEasing$.$EaseInQuad, $Formation: $JssorSlideshowFormations$.$FormationRectangle });
//Expand Cross
_SlideshowTransitions.push({ $Duration: 2500, $Delay: 500, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Easing: $JssorEasing$.$EaseInQuad, $Formation: $JssorSlideshowFormations$.$FormationCross });
//Expand ZigZag
_SlideshowTransitions.push({ $Duration: 300, $Delay: 60, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Easing: $JssorEasing$.$EaseInQuad, $Formation: $JssorSlideshowFormations$.$FormationZigZag });
//Expand Random
_SlideshowTransitions.push({ $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Top: true, $Right: true, $Bottom: true, $Left: true, $Fade: true, $Easing: $JssorEasing$.$EaseInQuad });
}
//Fading Transitions
{
//Fading Stairs
_SlideshowTransitions.push({ $Cols: 8, $Rows: 4, $Delay: 40, $Duration: 800, $Fade: true, $Assembly: 513, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs });
//Fading Cross
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 400, $Cols: 8, $Rows: 4, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationCross });
//Fading Rectangle
_SlideshowTransitions.push({ $Duration: 1800, $Delay: 400, $Cols: 8, $Rows: 4, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationRectangle });
//Fading Random
_SlideshowTransitions.push({ $Interval: 40, $Duration: 1000, $Delay: 60, $Cols: 8, $Rows: 4, $Fade: true, $Assembly: 1032, $Easing: $JssorEasing$.$EaseSwing, $Formation: $JssorSlideshowFormations$.$FormationRandom });
//Fading Circle
_SlideshowTransitions.push({ $Duration: 3000, $Delay: 500, $Cols: 8, $Rows: 4, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationCircle });
//Fading Swirl
_SlideshowTransitions.push({ $Duration: 1500, $Delay: 80, $Cols: 8, $Rows: 4, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationSwirl });
//Fading ZigZag
_SlideshowTransitions.push({ $Duration: 800, $Delay: 120, $Cols: 8, $Rows: 4, $Fade: true, $Assembly: 264, $Formation: $JssorSlideshowFormations$.$FormationZigZag });
}
//Wave out Transitions
{
//Wave out Straight
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave out Swirl
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSwirl, $Assembly: 260, $Easing: { $Top: $JssorEasing$.$EaseFlattenWave, $Left: $JssorEasing$.$EaseLinear, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave out ZigZag
_SlideshowTransitions.push({ $Duration: 3000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 260, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave out Square
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave out Rectangle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 160, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationRectangle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave out Circle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCircle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave out Cross
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 80, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave out Rectangle Cross
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 80, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationRectangleCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
}
//Wave in Transitions
{
//Wave in Straight
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave in Swirl
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSwirl, $Assembly: 260, $Easing: { $Top: $JssorEasing$.$EaseFlattenWave, $Left: $JssorEasing$.$EaseLinear, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave in ZigZag
_SlideshowTransitions.push({ $Duration: 3000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 260, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave in Square
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave in Rectangle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 160, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationRectangle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave in Circle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCircle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave in Cross
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 80, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
//Wave in Rectangle Cross
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 80, $Cols: 8, $Rows: 4, $Fade: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationRectangleCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenWave, $Opacity: $JssorEasing$.$EaseLinear} });
}
//Jump out Transitions
{
//Jump out Straight
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump out Swirl
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSwirl, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump out ZigZag
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 260, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump out Square
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump out Square with Chess
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Assembly: 260, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump out Rectangle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 800, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Reverse: true, $Formation: $JssorSlideshowFormations$.$FormationRectangle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump out Circle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCircle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
////Jump out Cross
//_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump out Rectangle Cross
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationRectangleCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
}
//Jump in Transitions
{
//Jump in Straight
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump in Swirl
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationSwirl, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump in ZigZag
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 260, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump in Square
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump in Square with Chess
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Assembly: 260, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump in Rectangle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 800, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Reverse: true, $Formation: $JssorSlideshowFormations$.$FormationRectangle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump in Circle
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationCircle, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
////Jump in Cross
//_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
//Jump in Rectangle Cross
_SlideshowTransitions.push({ $Duration: 5000, $Delay: 100, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationRectangleCross, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseFlattenJump, $Opacity: $JssorEasing$.$EaseLinear} });
}
//Parabola Transitions
{
////Parabola Straight
//_SlideshowTransitions.push({ $Duration: 600, $Delay: 60, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
////Parabola Straight Stairs
//_SlideshowTransitions.push({ $Duration: 600, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
//Parabola Swirl
_SlideshowTransitions.push({ $Duration: 600, $Delay: 100, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSwirl, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
//Parabola ZigZag
_SlideshowTransitions.push({ $Duration: 600, $Delay: 60, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 264, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
//Parabola Square
_SlideshowTransitions.push({ $Duration: 1200, $Delay: 200, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
////Parabola Rectangle
//_SlideshowTransitions.push({ $Duration: 1200, $Delay: 200, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationRectangle, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
////Parabola Circle
//_SlideshowTransitions.push({ $Duration: 1200, $Delay: 200, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCircle, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
////Parabola Cross
//_SlideshowTransitions.push({ $Duration: 1200, $Delay: 200, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationCross, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
////Parabola Rectangle Cross
//_SlideshowTransitions.push({ $Duration: 1200, $Delay: 200, $Cols: 8, $Rows: 4, $Fade: true, $SlideOut: true, $FlyDirection: 6, $Formation: $JssorSlideshowFormations$.$FormationRectangleCross, $Assembly: 264, $Easing: { $Left: $JssorEasing$.$EaseFlattenLinear, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear} });
}
//Stripe Transitions
{
//Horizontal Blind Stripe
_SlideshowTransitions.push({ $Duration: 400, $Delay: 100, $Rows: 7, $Top: true, $Fade: true, $Zoom: true, $Formation: $JssorSlideshowFormations$.$FormationStraight });
//Vertical Blind Stripe
_SlideshowTransitions.push({ $Duration: 400, $Delay: 100, $Cols: 10, $Right: true, $Fade: true, $Zoom: true, $Formation: $JssorSlideshowFormations$.$FormationStraight });
//Horizontal Stripe
_SlideshowTransitions.push({ $Duration: 1500, $Rows: 6, $Top: true, $Fade: true });
//Vertical Stripe
_SlideshowTransitions.push({ $Duration: 1500, $Cols: 8, $Left: true, $Fade: true });
//Horizontal Moving Stripe
_SlideshowTransitions.push({ $Duration: 1500, $Rows: 6, $Top: true, $Fade: true, $Move: true });
//Vertical Moving Stripe
_SlideshowTransitions.push({ $Duration: 1500, $Cols: 8, $Left: true, $Fade: true, $Move: true });
//Horizontal Fading Stripe
_SlideshowTransitions.push({ $Duration: 600, $Delay: 200, $Rows: 7, $Fade: true, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraight });
//Vertical Fading Stripe
_SlideshowTransitions.push({ $Duration: 600, $Delay: 200, $Cols: 14, $Fade: true, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraight });
//Horizontal Fly Stripe
_SlideshowTransitions.push({ $Duration: 1200, $Delay: 120, $FlyDirection: 2, $Rows: 6, $Left: true, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationStraight });
//Vertical Fly Stripe
_SlideshowTransitions.push({ $Duration: 1200, $Delay: 120, $FlyDirection: 4, $Cols: 12, $Bottom: true, $Fade: true, $Assembly: 514, $Formation: $JssorSlideshowFormations$.$FormationStraight });
//Horizontal Chess Stripe
_SlideshowTransitions.push({ $Duration: 2000, $Delay: 0, $Rows: 6, $Left: true, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $ChessMode: { $Row: 3} });
//Vertical Chess Stripe
_SlideshowTransitions.push({ $Duration: 2000, $Delay: 0, $Cols: 12, $Top: true, $Fade: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $ChessMode: { $Column: 12} });
//Horizontal Random Fading Stripe
_SlideshowTransitions.push({ $Duration: 600, $Delay: 80, $Rows: 6, $Fade: true, $SlideOut: true });
//Vertical Random Fading Stripe
_SlideshowTransitions.push({ $Duration: 600, $Delay: 80, $Cols: 12, $Fade: true, $SlideOut: true });
//Horizontal Bounce Stripe
_SlideshowTransitions.push({ $Duration: 800, $Delay: 150, $Rows: 5, $Bottom: true, $Move: true, $Assembly: 264, $Easing: $JssorEasing$.$EaseInBounce, $Formation: $JssorSlideshowFormations$.$FormationCircle });
//Vertical Bounce Stripe
_SlideshowTransitions.push({ $Duration: 800, $Delay: 150, $Cols: 10, $Left: true, $Move: true, $Assembly: 264, $Easing: $JssorEasing$.$EaseInBounce, $Formation: $JssorSlideshowFormations$.$FormationCircle });
}
//Stone Transitions
{
//Fading
_SlideshowTransitions.push({ $Duration: 1000, $Fade: true });
//Slide Down
_SlideshowTransitions.push({ $Duration: 500, $Top: true, $Fade: true, $Move: true, $Easing: $JssorEasing$.$EaseInQuad });
//Slide Right
_SlideshowTransitions.push({ $Duration: 400, $Left: true, $Fade: true, $Move: true, $Easing: $JssorEasing$.$EaseInQuad });
//Bounce Down
_SlideshowTransitions.push({ $Duration: 1000, $Top: true, $Move: true, $Easing: $JssorEasing$.$EaseInBounce });
//Bounce Right
_SlideshowTransitions.push({ $Duration: 1000, $Left: true, $Move: true, $Easing: $JssorEasing$.$EaseInBounce });
}
</script>
<script>
jssor_slider_starter = function (container) {
var slider = new $JssorSlider$(container, {
$ShowLoading: true, //Show loading screen or not
$AutoPlay: true, //Whether to auto play
$AutoPlaySteps: 1, //Steps to go of every play (this options applys only when slideshow disabled), the default value is 1
$AutoPlayInterval: 3000, //Interval to play next slide since the previous stopped if a slideshow is auto playing
$HoverToPause: false, //Whether to pause when mouse over if a slideshow is auto playing
$ArrowKeyNavigation: true, //Allows arrow key to navigate or not
$SlideDuration: 400, //Specifies default duration (swipe) for slide in milliseconds
$MinDragOffsetToSlide: 20, //Minimum drag offset that trigger slide
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, the default is width of ‘slides’ container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, the default is width of ‘slides’ container
$SlideSpacing: 0, //Space between each slide in pixels
$DisplayPieces: 1, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$ParkingPosition: 0, //The offset position to park slide (this options applys only when slideshow disabled).
$UISearchMode: 1, //The way (0 parellel, 1 recursive, default value is recursive) to search UI components (slides container, loading screen, navigator container, direction navigator container, thumbnail navigator container etc.
$SlideshowOptions: { //Options which specifies enable slideshow or not
$Class: $JssorSlideshowRunner$, //Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //Transitions to play slide, see jssor slideshow transition builder
$TransitionsOrder: 1, //The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: 2, //0 After Slideshow, 2 Always
$ContentMode: false //Whether to trait content as slide, otherwise trait an image as slide
},
$NavigatorOptions: {
$Class: $JssorNavigator$, //Class to create navigator instance
$ChanceToShow: 2, //0 Never, 1 Mouse Over, 2 Always
$Steps: 1, //Steps to go for each navigation request
$Lanes: 1, //Specify lanes to arrange items, default value is 1
$SpacingX: 0, //Horizontal space between each item in pixel
$SpacingY: 0, //Vertical space between each item in pixel
$Orientation: 0 //The orientation of the navigator, 0 horizontal, 1 vertical
}
});
}
</script>
bu kodları yerleştirin son olarak sliderı eklemek istediğiniz yere bu kodları ekleyin;
<!– Jssor Slider Begin –>
<div id=”jssor_slider_container” class=”slider1″ style=”position: relative; width: 600px;
height: 300px;”>
<!– Loading Screen –>
<div u=”loading” style=”position: absolute; top: 0px; left: 0px;”>
<div style=”filter: alpha(opacity=70); opacity=0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;”>
</div>
<div style=”position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;”>
</div>
</div>
<!– Slides Container –>
<div u=”slides” style=”position: relative; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;”>
<div>
<img u=”image” src=”img/motor/001.jpg” width=”600″ height=”300″ />
</div>
<div>
<img u=”image” src=”img/motor/002.jpg” width=”600″ height=”300″ />
</div>
<div>
<img u=”image” src=”img/motor/003.jpg” width=”600″ height=”300″ />
</div>
<div>
<img u=”image” src=”img/motor/004.jpg” width=”600″ height=”300″ />
</div>
<div>
<img u=”image” src=”img/motor/005.jpg” />
</div>
<div>
<img u=”image” src=”img/motor/006.jpg” />
</div>
<div>
<img u=”image” src=”../img/motor/007.jpg” />
</div>
<div>
<img u=”image” src=”../img/motor/008.jpg” />
</div>
</div>
<!– Navigator Skin Begin –>
<style>
.slider1-N div, .slider1-N div:hover, .slider1-N div.av
{
background: url(skin03/sprite-03.png) no-repeat;
overflow:hidden;
cursor: pointer;
}
.slider1-N div { background-position: 0px -240px; }
.slider1-N div:hover, .slider1-N div.av:hover, .slider1-N div.hv { background-position: -30px -240px; }
.slider1-N div.av { background-position: -60px -240px; }
.slider1-N div.dn { background-position: -90px -240px; }
</style>
<div u=”navigator” class=”slider1-N” style=”position: absolute; bottom: 6px; right: 6px;”>
<div u=”prototype” style=”POSITION: absolute; WIDTH: 22px; HEIGHT: 22px; text-align:center; line-height:22px; color:White; font-size:14px;”><NumberTemplate></NumberTemplate></div>
</div>
<!– Navigator Skin End –>
<a style=”display:none” href=”” rel=”nofollow”></a>
<!– Trigger –>
<script>
jssor_slider_starter(‘jssor_slider_container’);
</script>
</div>
<!– Jssor Slider End –>