JQuery Responsive Slider Yapımı Bootstrap 3 Uyumlu

JQuery Responsive Slider Yapımı Bootstrap 3 Uyumlu

JQuery Kullanmak bize bir çok kolaylık sağlamaktadır, az kodla çok iş yapmamıza yardımcı olduğu gibi internette bir çok ücretsiz dağıtılmış slider, galeri, tarih seçici, menü gibi bir çok eklentiyide istediğimiz gibi indirip kullanabiliyoruz. Şimdi bizde jQuery Responsive Slider Yapımı Bootstrap 3 Uyumlu konusuna değineceğiz.

Örnek olarak jQuery ve Bootstrap kullanarak responsive özelliğe sahip bir çalışma yaptım bunu açıklayacağım. Slider için yazdığım eklentinin içerisinde jQuery timer eklentisi kullandım. Şimdi bu plugin kodlarını yazalım ve inceleyelim. En sonda kodların çalışır halini indirilebilir olarak paylaşacağım isteyenlerin internet sitelerinde kullanabilmesi için.

Kullanmak için eklenmesi gereken jquery pluginler;

jquery.js
bootstrap.js
responsive-slider.js

jQuery hazır slider plugin kodlarımız aşağıdaki gibi. Kod aralarına açıklama satırları ile açıklamalar yazdım, bu açıklamaları okuyarak mantığı hakkında bilgi alabilirsiniz.

Demoyu Görmek için Tıklayın.

jQuery Bootstrap Uyumlu Responsive Slider Eklentisi Kodları

(function($) {
	"use strict";

	/* jQuery Timer Plugin Bu eklentii hazır olarak kullandım. */
	$.timer = function(func, time, autostart) {	
	 	this.set = function(func, time, autostart) {
	 		this.init = true;
	 	 	if(typeof func == 'object') {
		 	 	var paramList = ['autostart', 'time'];
	 	 	 	for(var arg in paramList) {if(func[paramList[arg]] != undefined) {eval(paramList[arg] + " = func[paramList[arg]]");}};
 	 			func = func.action;
	 	 	}
	 	 	if(typeof func == 'function') {this.action = func;}
		 	if(!isNaN(time)) {this.intervalTime = time;}
		 	if(autostart && !this.active) {
			 	this.active = true;
			 	this.setTimer();
		 	}
		 	return this;
	 	};
	 	this.once = function(time) {
			var timer = this;
	 	 	if(isNaN(time)) {time = 0;}
			window.setTimeout(function() {timer.action();}, time);
	 		return this;
	 	};
		this.play = function(reset) {
			if(!this.active) {
				if(reset) {this.setTimer();}
				else {this.setTimer(this.remaining);}
				this.active = true;
			}
			return this;
		};
		this.pause = function() {
			if(this.active) {
				this.active = false;
				this.remaining -= new Date() - this.last;
				this.clearTimer();
			}
			return this;
		};
		this.stop = function() {
			this.active = false;
			this.remaining = this.intervalTime;
			this.clearTimer();
			return this;
		};
		this.toggle = function(reset) {
			if(this.active) {this.pause();}
			else if(reset) {this.play(true);}
			else {this.play();}
			return this;
		};
		this.reset = function() {
			this.active = false;
			this.play(true);
			return this;
		};
		this.clearTimer = function() {
			window.clearTimeout(this.timeoutObject);
		};
	 	this.setTimer = function(time) {
			var timer = this;
	 	 	if(typeof this.action != 'function') {return;}
	 	 	if(isNaN(time)) {time = this.intervalTime;}
		 	this.remaining = time;
	 	 	this.last = new Date();
			this.clearTimer();
			this.timeoutObject = window.setTimeout(function() {timer.go();}, time);
		};
	 	this.go = function() {
	 		if(this.active) {
	 			this.action();
	 			this.setTimer();
	 		}
	 	};
	 	
	 	if(this.init) {
	 		return new $.timer(func, time, autostart);
	 	} else {
			this.set(func, time, autostart);
	 		return this;
	 	}
	};

	/* jQuery Responsive Slider Bootstrap 3 Uyumlu */

	$.fn.responsiveSlider = function(options){

		// Plugin için varsayılan ayarların tutulduğu objemiz.
		var defaults = {
		    sliderClass: ".responsive-slider", // Slider class adı.
		    prevControl: ".btnPrev", // Önceki Slider buton elemanı
		    nextControl: ".btnNext", // Sonraki Slider buton elemanı
		    paginationClass: ".page-controls", //
		    current: 0,
		    speed: 3000, // Slider Hızı
		    hoverPause: true, // Üzerine Gelince Dursun mu?
		    pagination: true, // Sayfalama Olsun mu?
		    effect: "easeOutSine", // Slider Geçiş Efekti
		    effectSpeed: 750, // Efekt Hızı
		    autoPlay: true, // Otomatik Başlatılsın mı?
		    background: "#fff" // Slider Arkaplan rengi
		};

		// Eğer eklenti kullanılırken ayarların üzerine yazılırsa yeni ayarlar kullanılacak aksi durumda varsayılan ayarlar geçerli olacak.
		var s = $.extend({}, defaults, options);

		// Başlangıçta ilk slide'ı gizliyoruz.
		$(s.sliderClass + " ul li").hide().eq(0).show();
		// Slide arka rengini belirliyoruz.
		$(s.sliderClass).css({backgroundColor: s.background});

		// Sonraki slide geçişini sağlayan function
		function nextSlider(){
			if (s.current < $(s.sliderClass + " ul li").length-1) {
				$(s.sliderClass + " ul li").eq(s.current).hide();
				s.current ++;
		        $(s.sliderClass + " ul li").eq(s.current).fadeIn(s.effectSpeed, s.effect);
	    	} else {
	    		$(s.sliderClass + " ul li").eq(s.current).hide();
				s.current = 0;
		        $(s.sliderClass + " ul li").eq(s.current).fadeIn(s.effectSpeed, s.effect);
	    	}
	    	$(s.paginationClass + " ol li").removeClass("active");
	    	$(s.paginationClass + " ol li").eq(s.current).addClass("active");
		}

		// Önceki slide geçişini sağlayan function
		function prevSlider(){
			if (s.current == 0) {
    			$(s.sliderClass + " ul li").eq(s.current).hide();
				s.current = $(s.sliderClass + " ul li").length-1;
		        $(s.sliderClass + " ul li").eq(s.current).fadeIn(s.effectSpeed, s.effect);
    		} else {
    			$(s.sliderClass + " ul li").eq(s.current).hide();
				s.current --;
		        $(s.sliderClass + " ul li").eq(s.current).fadeIn(s.effectSpeed, s.effect);
    		}
    		$(s.paginationClass + " ol li").removeClass("active");
	    	$(s.paginationClass + " ol li").eq(s.current).addClass("active");
		}

		// İstenilen slide a giden function
		function goSlider(number){
			$(s.sliderClass + " ul li").hide();
			s.current = number;
	        $(s.sliderClass + " ul li").eq(s.current).fadeIn(s.effectSpeed, s.effect);
	        $(s.paginationClass + " ol li").removeClass("active");
	    	$(s.paginationClass + " ol li").eq(number).addClass("active");
		}

		// Zamanlayıcı tanımlıyoruz.
		var timer = $.timer(function(){
			nextSlider();
		}, s.speed, false);

		// Slide oynatma, durdurma, gibi fonksiyonlar.
		var play = function() {
			timer.play();
	    }, pause = function(){
	    	timer.pause();
	    }, go = function(slideIndex){
	    	goSlider(slideIndex);
	    	timer.reset();
	    }, next = function(){
	    	timer.once();
	    	timer.reset();
	    }, prev = function(){
	    	prevSlider();
	    	timer.reset();
	    }

	    // Eğer ayarlarda otomatik oynatma aktifse sayfa yüklendiğinde slide başlatılıyor.
	    if (s.autoPlay) {
		    play();
		}

		//Sayfalama özelliği ayarlardan pasif edilmişse sayfalamayı gizliyoruz.
		if (!s.pagination) {
			$(s.paginationClass).hide();
		}
		// Sonraki slide olayı.
	    $(s.nextControl).on("click",function(e){
	    	next();
	    });
	    // Öceki slide olayı.
	    $(s.prevControl).on("click",function(e){
	    	prev();
	    });
	    // Mobil cihazlar için sola kaydırma yapıldığında sonraki slide gidiyor.
	    $(s.sliderClass).on("swipeleft", function(){
	    	next();
	    });
	    // Mobil cihazlar için sağa kaydırma yapıldığında önceki slide gidiyor.
	    $(s.sliderClass).on("swiperight", function(){
	    	prev();
	    });
	    // Eğer ayarlarımızda slide üzerine mouse geldiğinde durdurulması etkinse slide durduruyor.
	    $(s.sliderClass).on("mouseover",function(e){
	    	if (s.hoverPause) {
	    		timer.pause();
	    	}
	    });
	    // Mouse slide üzerinden çekildiğinde oynatmaya devam ettiriliyor.
	    $(s.sliderClass).on("mouseover",function(e){
    		timer.play();
	    });
	    // Sayfalamada sayfa numarasına tıklandığında o slide a gidiyor.
	    $(s.paginationClass + " ol li").on("click", function(){
	    	go($(this).index());
	    });
	    
	}

})(jQuery);

jQuery Pluginimiz hazır şimdi html sayfamız içerisinde nasıl kullanırız onu inceleyelim.

HTML (Hyper Text Markup Language)

<!DOCTYPE html>
<html lang="tr">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 3 Responsive Slider</title>

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="assets/responsive-slider/css/style.css">

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1 class="text-center">Bootstrap 3 Responsive Slider</h1>

		<div class="responsive-slider">	
			<div class="headcolor"></div>
			<ul>
				<li>
					<img class="img-responsive" src="assets/responsive-slider/images/slider-2.jpg" />
					<div class="rs-caption">
						<h1>Dokunarak Slide'lar Arasında Geçiş</h1>
						<p class="hidden-xs">
							Cep telefonları için dokunarak geçiş özelliği ile kolaylık.
							<a class="btn pull-right" href="#">Detay &raquo;</a>
						</p>
					</div>
				</li>
				<li>
					<img class="img-responsive" src="assets/responsive-slider/images/slider-3.jpg" />
					<div class="rs-caption">
						<h1>Çeşitli Efektler</h1>
						<p class="hidden-xs">Bol miktarda efekt seçeneği, jquery easing efektlerinin tamamını destekler.</p>
					</div>
				</li>
				<li>
					<img class="img-responsive" src="assets/responsive-slider/images/slider-4.jpg" />
					<div class="rs-caption">
						<h1>Slide Geçiş Kontrolleri ve Sayfalama</h1>
						<p class="hidden-xs">Önceki ve sonraki slide için geçiş butonları ve sayfalama özelliği.</p>
					</div>
				</li>
				<li>
					<img class="img-responsive" src="assets/responsive-slider/images/slider-5.jpg" />
					<div class="rs-caption">
						<h1>Özelleştirilebilir Yapı</h1>
						<p class="hidden-xs">Eklentiyi istediğiniz gibi özelleştirerek web sitenizde kullanabilirsiniz.</p>
					</div>
				</li>
			</ul>

			<div class="controls hidden-xs">
				<span class="btnPrev"></span>
				<span class="btnNext"></span>
			</div>

			<div class="page-controls">
				<ol>
					<li class="img-circle active">1</li>
					<li class="img-circle">2</li>
					<li class="img-circle">3</li>
					<li class="img-circle">4</li>
				</ol>
			</div>

		</div>


		<!-- jQuery -->
		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- jQuery Easing -->
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

		<script type="text/javascript" src="assets/responsive-slider/js/jquery-touch.min.js"></script>
		<script type="text/javascript" src="assets/responsive-slider/js/responsive-slider.js"></script>

		<script type="text/javascript">
			$(function(){
				$().responsiveSlider({
				    sliderClass: ".responsive-slider", // Slider class adı.
				    speed: 3000, // Slider Hızı
				    hoverPause: true, // Üzerine Gelince Dursun mu?
				    pagination: true, // Sayfalama Olsun mu?
				    effect: "easeOutSine", // Slider Geçiş Efekti.
				    effectSpeed: 750, // Efekt Hızı.
				    autoPlay: true, // Otomatik Başlatılsın mı?
				    prevControl: ".btnPrev", // Önceki Slider buton elemanı.
				    nextControl: ".btnNext", // Sonraki Slider buton elemanı.
				    paginationClass: ".page-controls", // Sayfalama class adı.
				    background: "#fff" // Slider Arkaplan rengi.
				});
			});
		</script>

		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	</body>
</html>

Yukarıda responsive slider ile ayarlar için açıklamalar yaptım. Burada effect kısmına jQuery easing eklentisinde bulunan farklı efektleri kullanabilirsiniz. Alttaki efektleri deneyerek hoşunuza gideni kullanabilirsiniz.

Easing Effect Listesi

• linear
• swing
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInSine
• easeOutSine
• easeInOutSine
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Sliderımızı şekillendirmek için CSS kodlarımızıda eklediğimiz zaman bu iş tamamdır.

CSS (Cascadin Style Sheets) Kodları

.responsive-slider {
	background:url(../images/shadow.png) bottom center no-repeat; background-size:100% 30px; padding-bottom:20px;
}
.responsive-slider ul {
	padding:0;
}
.responsive-slider .headcolor {
	width:100%; height:20px; position:absolute; background:#ddd;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
.responsive-slider ul li {
	list-style:none; display:none;
}
.responsive-slider ul li .rs-caption {
	position:absolute; margin-top:-20%; background:rgba(0,0,0, .6); padding:10px 20px; right:0;
}
.responsive-slider ul li .rs-caption h1 {
	color:#fff; font-family:Roboto; font-size:36px; font-weight:400; text-shadow:0 1px 2px rgba(0,0,0,1);
}
.responsive-slider ul li .rs-caption p {
	color:#fff; font-size:14px; font-family:Roboto; font-weight:300; text-shadow:0 1px 2px rgba(0,0,0,1);
}
.responsive-slider ul li .rs-caption .btn {
	color:#fff; font-family:Roboto; font-weight:300; font-style:italic;
}
.controls {
	margin:-70px 0 0 20px; z-index:999999; position:absolute;
}
.btnPrev, .btnNext {
	font-size:80%; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.9); width:5%; height:10%; cursor:pointer;
}
.btnPrev {
	background:url(../images/controls.png) center no-repeat; background-position:0 0; width:45px; height:45px; display:inline-block;
}
.btnNext {
	background:url(../images/controls.png) center no-repeat; background-position:-45px 0; width:45px; height:45px; display:inline-block;
}
.page-controls {
	position:absolute; right:20px;
}
.page-controls ol li {
	display:inline-block; background-color:#333; color:#fff; width:20px; height:20px; text-align:center; cursor:pointer; font-family:Roboto; font-weight:100;
}
.page-controls ol li.active {
	background-color:#ccc; color:#333; font-weight:bold;
}

@media screen and (max-width: 800px) {
    .responsive-slider ul li .rs-caption h1 {
		font-size:16px; font-weight:300;
	}
}

Yapacaklarımız bunlardan ibaretti artık responsive sliderımız tamamdır.

Kodları buradan indirebilirsiniz. Responsive Slider Bootstrap 3