بروز خطا
[message]
اشتراک در سوال
رای ها
[dataList]
پلاگین اسلایدر Jssor
0
0
سلام
پلاگین خیلی جالب و حرفه ای اسلایدر هست به اسم http://www.jssor.com/ که من از همه کدهاش سردرنمیارم میخواستم ببینم کسی هست کمکم کنه
نحوه استفادش سخته اگه بخوام کاملشو کپی کنم راحت میشه و فقط عکس و سایزهاشو تغغیر میدیم و درست میشه
ولی میخوام سردربیارم چجوریه و چطوری میتونم اپشن بهش بدم و خودم باهاش کار کنم نمونه آمادش اینجوری ولی همشو سر در نمیارم
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">
<!-- #region Jssor Slider Begin -->
<!-- Generated by Jssor Slider Maker. -->
<!-- This demo works with jquery library -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jQuery(document).ready(function ($) {
var jssor_1_SlideoTransitions = [
[{b:5500,d:3000,o:-1,r:240,e:{r:2}}],
[{b:-1,d:1,o:-1,c:{x:51.0,t:-51.0}},{b:0,d:1000,o:1,c:{x:-51.0,t:51.0},e:{o:7,c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1,sX:9,sY:9},{b:1000,d:1000,o:1,sX:-9,sY:-9,e:{sX:2,sY:2}}],
[{b:-1,d:1,o:-1,r:-180,sX:9,sY:9},{b:2000,d:1000,o:1,r:180,sX:-9,sY:-9,e:{r:2,sX:2,sY:2}}],
[{b:-1,d:1,o:-1},{b:3000,d:2000,y:180,o:1,e:{y:16}}],
[{b:-1,d:1,o:-1,r:-150},{b:7500,d:1600,o:1,r:150,e:{r:3}}],
[{b:10000,d:2000,x:-379,e:{x:7}}],
[{b:10000,d:2000,x:-379,e:{x:7}}],
[{b:-1,d:1,o:-1,r:288,sX:9,sY:9},{b:9100,d:900,x:-1400,y:-660,o:1,r:-288,sX:-9,sY:-9,e:{r:6}},{b:10000,d:1600,x:-200,o:-1,e:{x:16}}]
];
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<style>
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url('img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('img/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/red.jpg" />
<div style="position: absolute; top: 30px; left: 30px; width: 480px; height: 120px; font-size: 50px; color: #ffffff; line-height: 60px;">TOUCH SWIPE SLIDER</div>
<div style="position: absolute; top: 300px; left: 30px; width: 480px; height: 120px; font-size: 30px; color: #ffffff; line-height: 38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position: absolute; top: 100px; left: 600px; width: 445px; height: 300px;">
<img src="img/c-phone.png" style="position: absolute; top: 0px; left: 0px; width: 445px; height: 300px;" />
<img src="img/c-jssor-slider.png" data-u="caption" data-t="1" style="position: absolute; top: 70px; left: 130px; width: 102px; height: 78px;" />
<img src="img/c-text.png" data-u="caption" data-t="2" style="position: absolute; top: 153px; left: 163px; width: 80px; height: 53px;" />
<img src="img/c-fruit.png" data-u="caption" data-t="3" style="position: absolute; top: 60px; left: 220px; width: 140px; height: 90px;" />
<img src="img/c-navigator.png" data-u="caption" data-t="4" style="position: absolute; top: -123px; left: 121px; width: 200px; height: 155px;" />
</div>
<div data-u="caption" data-t="5" style="position: absolute; top: 120px; left: 650px; width: 470px; height: 220px;">
<img src="img/c-phone-horizontal.png" style="position: absolute; top: 0px; left: 0px; width: 470px; height: 220px;" />
<div style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px; overflow: hidden;">
<img src="img/c-slide-1.jpg" data-u="caption" data-t="6" style="position: absolute; top: 0px; left: 0px; width: 379px; height: 213px;" />
<img src="img/c-slide-3.jpg" data-u="caption" data-t="7" style="position: absolute; top: 0px; left: 379px; width: 379px; height: 213px;" />
</div>
<img src="img/c-navigator-horizontal.png" style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px;" />
<img src="img/c-finger-pointing.png" data-u="caption" data-t="8" style="position: absolute; top: 740px; left: 1600px; width: 257px; height: 300px;" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/purple.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/blue.jpg" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:12px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:12px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
</body>
</html>
0
0
از آموزش هایی که خودشان ارائه کردند استفاده کنید: لینک البته اگر قصد دارید در یک پروژه رسمی از اسلایدر استفاده بهره ببرید، پیشنهاد میکنم هزینه کنید و Revolution Slider و Layer Slider را بخرید. بی نظیر هستند. (ارزان هم هستند. یکی 18 و دیگری 17 دلار) (7 سال پیش)
0
0
این لینک برای آموزش خود ویرایگشر سایت هست که داخل ویرایشگرش بسازیم من میخوام اطز طریق کد انجام بدم رو کد حرکت ها اجرا نمیشه (7 سال پیش)
برای این سوال پاسخی وجود ندارد.
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
