jquery slider

by melihcan1995 19/03/2013 | 9:37 3 Posted in JQuery Örnekleri

jquery slider

Jquery slider çok aranan ve kullanılan bir uygulamadır.

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 lı hayatlar 🙂

Jquery slider örneği için tıklayınız

Jquery slider indirmek için tıklayınız

<strong>Nasıl Kullanılır?</strong>

1	<strong>Nasıl Kullanılır?</strong>

-“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

(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

//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 –>

<!– Trigger –>
<script>
jssor_slider_starter(‘jssor_slider_container’);
</script>
</div>
<!– Jssor Slider End –>

Yazar: melihcan1995

melihcan yılmaz sitemizde 13 yazı eklemiş...

Post Views: 339

Tags:jquery slider yapımı

Bilişimcilerin Otağı

jquery slider

Yazar: melihcan1995

About Author

melihcan1995

Yazar: melihcan1995

Related Posts

About Author

melihcan1995