طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

اسلاید شو حرفه ای (شماره 3)

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

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/demo2.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/ipresenter.packed.js"></script>
<script>
	$(document).ready(function(){
		$('#ipresenter').iPresenter({
			animSpeed: 1500,
			timer: '360Bar',
			timerDiameter: 60,
			timerStroke: 5,
			timerPadding: 5,
			timerColor: '#000',
			timerBg: '#FFF',
			timerOpacity: 0.4,
			directionNav: false,
			controlNav: true
		});
	});
</script>

2- کد html جهت استفاده پلاگین

	<div class="container">
		<div id="ipresenter">
			<div class="step" data-x="0" data-y="0" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="1500" data-y="0" data-rotatex="180" data-easing="easeInOutQuint" data-pausetime="15000" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="3000" data-y="0" data-rotatey="180" data-pausetime="2000" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="4500" data-y="0" data-rotatex="180" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="6000" data-y="0" data-rotate="180" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="7500" data-y="0" data-rotatey="180" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="9000" data-y="0" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="10500" data-y="0" data-rotate="80" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="12000" data-y="0" data-rotatex="180" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="13500" data-y="0" data-rotatey="180" data-scale="0.6" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="15000" data-y="0" data-rotatey="-180" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="16500" data-y="0" data-rotatey="180" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>
		</div>
	</div>

 

6 نظر

  • اسلاید ها و طرحهای دیگه که گذاشتید واقعا بینظیرند !
    موفق و پایدار باشید .

  • ببخشید میشه یه توضیح مختصر بدهید من چطوری از این کد استفاده کنم
    ممنون مشم

    • سلام بهار جان
      کد های قسمت اول رو در head قرار بده
      کد های قسمت دوم رو در body قرار بده
      البته اول فایل رو دانلود کن

  • سلام
    واقعا ممنون از سایت خوبتون
    واقعا خیلی شرف دارید که مثل بعضیا نمیاید اینا رو بفروشید و فقط به فکر سود خودتون باشید
    موفق باشید

دانلود و پیش نمایش

دانلود و پیش نمایش فایل اسلاید شو حرفه ای (شماره 3)

دانلود پلاگین پیش نمایش آنلاین

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)