رفتن به مطلب

درخواست کد اسلایدر ساده


پست های پیشنهاد شده

سلام

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

0THZ7.png

من قبلا از easyslider استفاده میکردم ، با وجود این که استایل دهی بهش واقعا مشکل بود ولی کارم رو راه مینداخت

ولی متاسفانه تو این پروژه جدیدم با 2 روز کلنجار رفتن نتونستم به نتیجه مناسبی برسم

و با توجه به این که قالبم ریسپانسیو هست یه مقدار بهم ریختگی واسم ایجاد میکنه

کلا از استفاده از این کد منصرف شدم

حالا شما یه لطف کنید یه سورسی رو معرفی کنید که بتونم دقیقا به طرح بالایی برسم و ادیتش ساده باشه

ممنون

لینک به ارسال

من میخوام اینو داشته باشم

tzvl_dfgdg.png

این کد رو تو html اضافه کردم


<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>

اینا رو هم به بین تگ head


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>

الان کار نمیکنه

دیگه باید چیکار کنم؟

ویرایش شده توسط shayan
لینک به ارسال

من میخوام اینو داشته باشم

tzvl_dfgdg.png

این کد رو تو html اضافه کردم


<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>

اینا رو هم به بین تگ head


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>

الان کار نمیکنه

دیگه باید چیکار کنم؟

طبق این دستورالعمل برید

فقط کدای اجرای اسلایدر توی هدر اینجوری باید تغییر کنه :


<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
slidesToShow:4,
slidesToScroll:4
});
});
</script>

لینک به ارسال

اجرا نشد متاسفانه

این کل تگ هد من


<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.css" rel="stylesheet">
<!-- Start WOWSlider.com HEAD section --><!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript" src="js/migrate.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
slidesToShow:4,
slidesToScroll:4
});
});
</script>
</head>

فایل html رو هم کلا دست نزدم !!!

ویرایش شده توسط shayan
لینک به ارسال

اجرا نشد متاسفانه

این کل تگ هد من


<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.css" rel="stylesheet">
<!-- Start WOWSlider.com HEAD section --><!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript" src="js/migrate.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
slidesToShow:4,
slidesToScroll:4
});
});
</script>
</head>

فایل html رو هم کلا دست نزدم !!!

شما فایل جی کوئری،میگریت و slick رو حتما باید دانلود و در پوشه قالب خودتون قرار بدید .

بعد دانلود شما به این صورت لینک بده شاید حل شد :


<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/js/migrate-1.2.1.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/slick/slick.min.js"></script>

اگه درست نشد کد دستور اسلایدر رو اینجوری تغییر بدید :


<script type="text/javascript">
$(document).ready(function(){
$('.trial').slick({
slidesToShow:4,
slidesToScroll:4,
slidesPerRow:3,
arrows:true,
rows:1,
rtl:true,
draggable:true,
infinite:false,
});
});
</script>

لینک به ارسال

شما فایل جی کوئری،میگریت و slick رو حتما باید دانلود و در پوشه قالب خودتون قرار بدید .

بعد دانلود شما به این صورت لینک بده شاید حل شد :


<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/js/migrate-1.2.1.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/slick/slick.min.js"></script>

اگه درست نشد کد دستور اسلایدر رو اینجوری تغییر بدید :


<script type="text/javascript">
$(document).ready(function(){
$('.trial').slick({
slidesToShow:4,
slidesToScroll:4,
slidesPerRow:3,
arrows:true,
rows:1,
rtl:true,
draggable:true,
infinite:false,
});
});
</script>

همون طور که مشاهده فرمودید تمام اون فایل های js رو فراخوانی کرده بودم

این تگ اسکریپت رو هم قرار بین head قرار دادم ولی باز هم نشد !! :(

لینک به ارسال

همون طور که مشاهده فرمودید تمام اون فایل های js رو فراخوانی کرده بودم

این تگ اسکریپت رو هم قرار بین head قرار دادم ولی باز هم نشد !! :(

آخ فک کنم فهمیدم اشکالشو :


<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
slidesToShow:4,
slidesToScroll:4,
slidesPerRow:3,
arrows:true,
rows:1,
rtl:true,
draggable:true,
infinite:false,
});
});
</script>

کلا چیزی براتون نمایش نمیده یا دیو ها زیر همن ؟

لینک به ارسال

آخ فک کنم فهمیدم اشکالشو :


<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
slidesToShow:4,
slidesToScroll:4,
slidesPerRow:3,
arrows:true,
rows:1,
rtl:true,
draggable:true,
infinite:false,
});
});
</script>

کلا چیزی براتون نمایش نمیده یا دیو ها زیر همن ؟

فقط از عدد 1 تا 5 اگر اشتباه نکنم

اونم به صورت عمودی

لینک به ارسال
  • 4 هفته بعد...

فقط از عدد 1 تا 5 اگر اشتباه نکنم

اونم به صورت عمودی

اگه میشه یه عکس ازش قرار یدید . کد ها کاملا درستن !

البته در ابتدا ممکنه که چیزی براتون نشون نده چون من هم همین مشکلو اوایل باهاش داشتم ولی با فایرباگ کدهای اسلایدر موردنظرمو در اوردم و جای گذاری کردم و بعد که اسلایدر راه افتاد کد های اضافیش مثل dots و arrows رو پاک کردم . شما هم یه بار امتحان کنید .

لینک به ارسال
  • 4 هفته بعد...

الان فقط اسلایدر فعال نیست ؟

کار نمیکنه ؟ منظور این هست ؟

http://jsbin.com/xemuxozeno/

البته استایل نداره


<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<style>.slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}</style>
<body>
<div class="data" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/js/scripts.js"></script>
</body>
</html>

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...