آموزش ساخت اسلایدر بدون نیاز به جاوا اسکریپت

اسلایدر ابزاری است که کمتر وبلاگ نویسی یافت می شود که با آن آشنایی ندشته باشد .ما امروز در وبلاگ بروزیها ابزار اسلایدر بدون نیاز به درج جاوا اسکریپت را برای شما وبلاگ نویسان عزیز آماده کرده ایم آماده کرده ایم .این ابزار بسیار شیک، کاربردی و جذاب طراحی شده و امکان درج لینک برای هر تصویر را دارا می باشد.

 در ادامه می توانید پیشنمایش زنده این اسلایدر زیبا را مشاهده کنید.

 

(پیشنمایش پایین در برخی از موبایل ها یا کامپیوتر ها به درستی اجرا نمی شود پیشنهاد می کنم حتما تصویر پیشنمایش را ببینید)

 

تصویر پیشنمایش

 

اسلایدر

 

 

 

 

 

از ویژگی های اسلایدر میتوان به :

واکنشگرا بودن

زیبایی

راحتی کار با این اسلایدر

هدایت کاربر به لینک مورد نظر

عدم ا

ستفاده از جاوا اسکریپت 

و..

اشاره کرد.

 

خوب توضیحات و پیشنمایش این اسلایدر رو مشاهده کردید

حالا وقت استفاده از این ابزار رسیده...

 

کد های زیر رو در جایی که دوست دارید اسلایدر به نمایش دربیاد ذخیره کنید ، سپس لینک تصاویر خود را جایگزین تصاویر فعلی موجود در اسلایدر کنید. اگر خواستید میتونید در بخش "لینک پست ، لینک پست مورد نظر خودرا جایگزین کنید"

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">.broziha-box {
	background: #1389;
	padding: 10px;
	margin-bottom: 25px;
	border-radius: 10px;
	box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.09);
}
.broziha {
	width: auto;
	margin: 10px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	overflow-x: auto;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	
}
.broziha img {
	margin: 10px;
	height: 150px;
	
	width: auto;
	
	border-radius: 10px;
}
.broziha h3 {
	display: inline-block;
	text-align: right;
}
.broziha-title {
	/* background: #3470db; */
	/* background-image: linear-gradient(45deg, #34c1db 0%, #3470db 100%); */
	border-radius: 100px;
	padding-right: 5px;
	color: #000;
}
.broziha a {
	color: #fff;
}
.broziha a:hover {
	-webkit-filter:opacity(50%);
	filter:opacity(50%);
}</style><p> <div class="broziha-box"><div class="broziha-title"><h2>اسلایدر</h2></div><div class="broziha"><div class="lgs-image"><a href="لینک پست"><img src="http://uupload.ir/files/8j8m_tqcrliaxte.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/8788536054703985963/5g-graphic.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/8788536054703985963/5g-graphic.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/2202388099905415576/space-1586231007082-6113.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/2202388099905415576/space-1586231007082-6113.jpg" /></a></div></div><p> </p></div></p><p>&nbsp;</p><p><span style="font-size:16px;"><strong><span style="color:#c0392b;">

/توضیح ساده تر/

تصاویر خود را جایگزین این لینک ها کنید:

http://bayanbox.ir/view/8788536054703985963/5g-graphic.jpg

http://bayanbox.ir/view/2202388099905415576/space-1586231007082-6113.jpg

http://uupload.ir/files/8j8m_tqcrliaxte.jpg