پلاگین جیکوئری تصاویر متحرک J Slider

zeenquery J Slider

یک اسلایدر اتوماتیک است که برای صفحه نمایش های گوناگون قابل بارگزاری میباشد

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

چگونه از این فایل استفاده کنیم:

1) فایل های مورد نیاز را در Head سند فراخوانی میکنیم.

1	<link rel="stylesheet" href="j-sliding-banner.css">

2	<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

3	<script src="j-sliding-banner.js"></script>

2) کدهای زیر را در صفحه وارد میکنیم تا اسلایدر ایجاد شود.

01	<div class="banner">

02	<div class="sliding-banner-container">

03	<ul class="sliding-banner">

04	<li class="sliding-banner-item">

05	<img class='sliding-banner-img' src="1.jpg">

06	<div class="sliding-banner-content">

07

<div>

08	<div class="content">

09

Content 1

10

</div>

11

</div>

12

</div>

13

</li>

14	<li class="sliding-banner-item">

15	<img class="sliding-banner-img" src="2.jpg">

16	<div class="sliding-banner-content">

17

<div>

18	<div class="content">

19

Content 2

20

</div>

21

</div>

22

</div>

23

</li>

24	<li class="sliding-banner-item">

25	<img class="sliding-banner-img" src="3.jpg">

26	<div class="sliding-banner-content">

27

<div>

28	<div class="content">

29

Content 3

30

</div>

31

</div>

32

</div>

33

</li>

34

</ul>

35

</div>

36

</div>

3) با فراخوانی کردن تابع زیر اسلایدر با ویژگی های از پیش تعیین شده به نمایش گذاشته خواهد شد.

1	$('.banner').jSlidingBanner();

4) با فراخوانی کردن تابع زیر و با تغییر متغییرها میتوانید ویژگی های دلخواه را ایجاد کنید

1	$('.banner').jSlidingBanner({

2	setOverlay : true,

3	overlayColor : "#000000",

4	displayImageDuration : 4000,

5	slideSpeed : 500,

6

});

دانلود فایل