Javascript Slider

Tarhi : 05-10-2019 12:33:19 | Yazar : ÇAĞLAR BOSTANCI

Merhaba, javascripte yeni başlayanlar için örnek bir slider. Bu javascript slider mobile versiyon için güncellenerek kullanılabilir. Javascript slider bu haliyle sadece masa üstü bilgisayarlarda görüntülenebilir. Css ve javascripte yapılan bir güncelleme ile mobilde dekullanılabilir. İsterseniz mobil versiyonunuda yazabilirim. Talebler doğrultusunda. Burada amaç slider yapımı çeşitliliğini artırmak ve daha farklı düşünme yöntemi, algoritmalar geliştirmek. Daha iyi javascirpt slider her zaman yapılacaktır. Sliderların dahi ücretli olarak satıldığı bir zamanda bu gibi ufaktefek şeyler insanı ekmasraflardan kurtarıyor. Aynı zamanda almış olduğunuz javascript sliderlar sayfa yüklenirken aşırı scirpt yüklemesi yapıyor. Dediğim gibi slider mobil versiyona uyumlu değil ama sizler bu kodları çözdüğünüzde eminim mobil versiyona çevirebileceksiniz Zaten divlerin genişliğini ekran genişliği kadar vermenizde yeterli olacaktır. Kusura bakmayın seo için biraz lafı uzattım sizde bunun farkındasınız ne yapayım google bunlara dikkat ediyor. Özellikle javascript, slider javascript, javascirpt slider, sözcülerini daha çok içerikte verirsek daha çok dikkat ediyor. En güzel javascript sliderlar sizlerin olsun bir sonraki yazıda görüşmek üzere javascript slider ile kalın 😀 Başarılar.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<style>
	/**
	Sliderda kayma efektini vermek için iki tane animasyon oluşuturuyoruz.
	Aynı zamanda açıklamalarında efektli gelmesi için animasyon oluşturuyoruz.
	*/
@keyframes sagdanOrtaya{
	from{
		right:-640px;
		}to{
			right:0px;
			}
	
	}
@keyframes ortadanSola{
	from{
		right:0;
		}to{
		right:640px;
		}
	}
@keyframes aciklama{
	from{
		left:100%;
		}to{
			left:1em;
			}
	}
@keyframes aciklamaGit{
	from{
		left:1em;
		}to{
			left:-10em;
			}
	}

/**
anadiv içerisindeki resimlerin üst üste gelmesi ve taşmasını engellemek için
sliderin ana görünümünü sağlıyoruz.
**/
.anaDiv{
	width:640px;
	height:427px;
	border:1px solid green;
	position:relative;
	margin:0 auto;
	overflow:hidden;
	}
.slide{
	width:640px;
	height:427px;
	position:absolute;
	top:0;
	right:-640px;
	}
.slide img{
	width:100%;
	height:100%;
	}
.btnSag,.btnSol{
	padding:0.25em 0.5em;
	background-color:#90C;
	color:white;
	text-align:center;
	border:1px solid white;
	position:absolute;
	top:45%;
	opacity:0.5;
	cursor:pointer;
	font-weight:bold;
	transition:all 0.5s ease;
	}
.btnSag:hover,.btnSol:hover{
	opacity:1;
	transform:rotate(360deg);
	border-radius:50%;
	}
.btnSag{ right:1em;}
.btnSol{left:1em}
.aciklama{
	width: auto;
	height:auto;
	padding:0.5em;
	background-color:rgba(153,102,255,0.6);
	color:white;
	position:absolute;
	bottom:1em;
	left:100%;
	}
.anaDiv ul{
	list-style:none;
	margin:0;
	padding:0;
	text-align:center;
	width:100%;
	height:auto;
	position:absolute;
	top:-10em;
	z-index:1;
	padding:1em;
	background-color:rgba(153,102,255,0.3);
	transition:all 0.5s ease; 
	box-shadow:0px 5px 5px #333;
	}
.anaDiv ul li{
	width:10%;
	height:7vh;
	overflow:hidden;
	display:inline-block;
	border:2px solid transparent;
	transition:all 0.5s ease;
	
	}
.anaDiv ul li img{
	width:100%;
	height:100%;
	}
.anaDiv ul li:hover{
	border-color:white;
	
	}
.anaDiv:hover ul{
	top:0em;
	}

</style>
</head>
<body>

<div class="anaDiv">
	<ul>
    	<li onClick="imgGetir(0)"><img src="img/resim-1.jpg" /></li>
    	<li onClick="imgGetir(1)"><img src="img/resim-2.jpg" /></li>
        <li onClick="imgGetir(2)"><img src="img/resim-3.jpg" /></li>
        <li onClick="imgGetir(3)"><img src="img/resim-4.jpg" /></li>
        <li onClick="imgGetir(4)"><img src="img/resim-5.jpg" /></li>
        <li onClick="imgGetir(5)"><img src="img/resim-6.jpg" /></li>
    </ul>
	<div class="slide">
    	<img src="img/resim-1.jpg" />
        <div class="aciklama">Açıklama 1</div>
    </div>
    <div class="slide">
    	<img src="img/resim-2.jpg" />
        <div class="aciklama">Açıklama 2</div>
    </div>
    <div class="slide">
    	<img src="img/resim-3.jpg" />
        <div class="aciklama">Açıklama 3</div>
    </div>
    <div class="slide">
    	<img src="img/resim-4.jpg" />
        <div class="aciklama">Açıklama 4</div>
    </div>
    <div class="slide">
    	<img src="img/resim-5.jpg" />
        <div class="aciklama">Açıklama 5</div>
    </div>
    <div class="slide">
    	<img src="img/resim-6.jpg" />
        <div class="aciklama">Açıklama 6</div>
    </div>

</div>




<script type="text/javascript">
//bütün resim bulan slide klaslarını aldık dizi olarak.
var slide=document.getElementsByClassName("slide");
//Yine sayfadaki bütün açılamarı dizi olarak aldık.
var aciklama=document.getElementsByClassName("aciklama");
//slider başlangıcı için bir sayaç oluşturduk ve sıfır değerini atadık.
var slideSira=0;
//Sliderin oluşturan anaDivi bir değişkenin içine atadık
var anaDiv=document.getElementsByClassName("anaDiv")[0];

/*zaman start*/
/* iki saniyede bir sliderStart fonksiyonunu çalıştırdık.*/
var zaman=setInterval(slideStart,2000);
//Mouse anadivin üzerine gelince zamansal akışı durdurduk.
anaDiv.onmouseover=function(){
	clearInterval(zaman);
	}
//Mouse üzerinden ayrılınca zaman akışını tekrardan başlattık.
anaDiv.onmouseout=function(){
	zaman=setInterval(slideStart,2000);
	}
/*zaman end*/
/*sag start*/
//Sağ butonu fantazi olsundiye dinamik olarak oluşturduk.
//Amacım bütün sliderı html yazamdanda dinamik olarak javascriptle oluşturacağımızı
//anlatabilmekti.
var sagButton=document.createElement("span");
sagButton.appendChild(document.createTextNode(">"));
sagButton.setAttribute("class","btnSag");
anaDiv.appendChild(sagButton);
sagButton.onclick=function(){slideStart();};

/*sag end*/
/*sol start*/
//Yine butonu oluşturduk. Ve her iki butonada click olduğunda çalıştıracakları fonksiyonları atadık
var solButton=document.createElement("span");
solButton.appendChild(document.createTextNode("<"));
solButton.setAttribute("class","btnSol");
anaDiv.appendChild(solButton);
solButton.onclick=function(){
	//sol buton yani geriye git denildiğinde çalışan fonsiyon
	slide[slideSira-1].style.animation="ortadanSola 1s ease";
	slide[slideSira-1].style.right="-640px";
	aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";
	aciklama[slideSira-1].style.left="100%";
	slideSira-=2;
	slideSira<0 ? slideSira=slide.length-1:"";
	slideStart();
	}

/*sol end*/
//slider fonksiyonunu bir kez start ettik.
slideStart();

function slideStart(){
	//döngüsel  olarak çalışan ana fonksiyon
	
	if(slideSira!=0){
		console.log("gelecek : "+slideSira);	
		slide[slideSira-1].style.animation="ortadanSola 1s ease";
		slide[slideSira-1].style.right="-640px";
		aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";
		aciklama[slideSira-1].style.left="100%";
		
		
		}
	
	slideSira>=slide.length ? slideSira=0:"";
	slide[slideSira].style.animation="sagdanOrtaya 1s ease";
	aciklama[slideSira].style.animation="aciklama 1s ease";
	slide[slideSira].style.right="0px";
	aciklama[slideSira].style.left="1em";
	slideSira++;
}

function imgGetir(index){
	slide[slideSira-1].style.animation="ortadanSola 1s ease";
	slide[slideSira-1].style.right="-640px";
	aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";
	aciklama[slideSira-1].style.left="100%";
	aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";
	aciklama[slideSira-1].style.left="100%";
	slideSira=index;
	slideStart();
	}
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

<!doctype html>

<html>

<head>

<title>Slider</title>

<style>

/**

Sliderda kayma efektini vermek için iki tane animasyon oluşuturuyoruz.

Aynı zamanda açıklamalarında efektli gelmesi için animasyon oluşturuyoruz.

@keyframes sagdanOrtaya{

from{

right:-640px;

}to{

right:0px;

}

@keyframes ortadanSola{

from{

right:0;

}to{

right:640px;

}

@keyframes aciklama{

from{

left:100%;

}to{

left:1em;

}

@keyframes aciklamaGit{

from{

left:1em;

}to{

left:-10em;

}

/**

anadiv içerisindeki resimlerin üst üste gelmesi ve taşmasını engellemek için

sliderin ana görünümünü sağlıyoruz.

**/

.anaDiv{

width:640px;

height:427px;

border:1px solid green;

position:relative;

margin:0 auto;

overflow:hidden;

}

.slide{

width:640px;

height:427px;

position:absolute;

top:0;

right:-640px;

}

.slide img{

width:100%;

height:100%;

}

.btnSag,.btnSol{

padding:0.25em 0.5em;

background-color:#90C;

color:white;

text-align:center;

border:1px solid white;

position:absolute;

top:45%;

opacity:0.5;

cursor:pointer;

font-weight:bold;

transition:all 0.5s ease;

}

.btnSag:hover,.btnSol:hover{

opacity:1;

transform:rotate(360deg);

border-radius:50%;

}

.btnSag{ right:1em;}

.btnSol{left:1em}

.aciklama{

width: auto;

height:auto;

padding:0.5em;

background-color:rgba(153,102,255,0.6);

color:white;

position:absolute;

bottom:1em;

left:100%;

}

.anaDiv ul{

list-style:none;

margin:0;

padding:0;

text-align:center;

width:100%;

height:auto;

position:absolute;

top:-10em;

z-index:1;

padding:1em;

background-color:rgba(153,102,255,0.3);

transition:all 0.5s ease;

box-shadow:0px 5px 5px #333;

}

.anaDiv ul li{

width:10%;

height:7vh;

overflow:hidden;

display:inline-block;

border:2px solid transparent;

transition:all 0.5s ease;

}

.anaDiv ul li img{

width:100%;

height:100%;

}

.anaDiv ul li:hover{

border-color:white;

}

.anaDiv:hover ul{

top:0em;

}

</style>

</head>

<body>

<ul>

</ul>

<div class="aciklama">Açıklama 1</div>

</div>

<div class="aciklama">Açıklama 2</div>

</div>

<div class="aciklama">Açıklama 3</div>

</div>

<div class="aciklama">Açıklama 4</div>

</div>

<div class="aciklama">Açıklama 5</div>

</div>

<div class="aciklama">Açıklama 6</div>

</div>

//bütün resim bulan slide klaslarını aldık dizi olarak.

var slide=document.getElementsByClassName("slide");

//Yine sayfadaki bütün açılamarı dizi olarak aldık.

var aciklama=document.getElementsByClassName("aciklama");

//slider başlangıcı için bir sayaç oluşturduk ve sıfır değerini atadık.

var slideSira=0;

//Sliderin oluşturan anaDivi bir değişkenin içine atadık

var anaDiv=document.getElementsByClassName("anaDiv")[0];

/*zaman start*/

/* iki saniyede bir sliderStart fonksiyonunu çalıştırdık.*/

var zaman=setInterval(slideStart,2000);

//Mouse anadivin üzerine gelince zamansal akışı durdurduk.

anaDiv.onmouseover=function(){

clearInterval(zaman);

}

//Mouse üzerinden ayrılınca zaman akışını tekrardan başlattık.

anaDiv.onmouseout=function(){

zaman=setInterval(slideStart,2000);

}

/*zaman end*/

/*sag start*/

//Sağ butonu fantazi olsundiye dinamik olarak oluşturduk.

//Amacım bütün sliderı html yazamdanda dinamik olarak javascriptle oluşturacağımızı

//anlatabilmekti.

var sagButton=document.createElement("span");

sagButton.appendChild(document.createTextNode(">"));

sagButton.setAttribute("class","btnSag");

anaDiv.appendChild(sagButton);

sagButton.onclick=function(){slideStart();};

/*sag end*/

/*sol start*/

//Yine butonu oluşturduk. Ve her iki butonada click olduğunda çalıştıracakları fonksiyonları atadık

var solButton=document.createElement("span");

solButton.appendChild(document.createTextNode("<"));

solButton.setAttribute("class","btnSol");

anaDiv.appendChild(solButton);

solButton.onclick=function(){

//sol buton yani geriye git denildiğinde çalışan fonsiyon

slide[slideSira-1].style.animation="ortadanSola 1s ease";

slide[slideSira-1].style.right="-640px";

aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";

aciklama[slideSira-1].style.left="100%";

slideSira-=2;

slideSira<0 ? slideSira=slide.length-1:"";

slideStart();

}

/*sol end*/

//slider fonksiyonunu bir kez start ettik.

slideStart();

function slideStart(){

//döngüsel olarak çalışan ana fonksiyon

if(slideSira!=0){

console.log("gelecek : "+slideSira);

slide[slideSira-1].style.animation="ortadanSola 1s ease";

slide[slideSira-1].style.right="-640px";

aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";

aciklama[slideSira-1].style.left="100%";

}

slideSira>=slide.length ? slideSira=0:"";

slide[slideSira].style.animation="sagdanOrtaya 1s ease";

aciklama[slideSira].style.animation="aciklama 1s ease";

slide[slideSira].style.right="0px";

aciklama[slideSira].style.left="1em";

slideSira++;

}

function imgGetir(index){

slide[slideSira-1].style.animation="ortadanSola 1s ease";

slide[slideSira-1].style.right="-640px";

aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";

aciklama[slideSira-1].style.left="100%";

aciklama[slideSira-1].style.animation="aciklamaGit 1s ease";

aciklama[slideSira-1].style.left="100%";

slideSira=index;

slideStart();

}

</script>

</body>

</html>

Javascirpt Slider Demo İçin Tıklayınız

İlgili

JAVASCRIPT

Javascript Slider

Hemen Başla

Yorumlar

Yorum Yap

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

Javascript Slider