shayan

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

13 پست در این موضوع قرار دارد

سلام

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

0THZ7.png

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

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

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

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

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

ممنون

0

به اشتراک گذاری این پست


لینک به پست

سلام

slick به دردتون میخوره ؟

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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
0

به اشتراک گذاری این پست


لینک به پست

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

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>

3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

این کل تگ هد من


<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
0

به اشتراک گذاری این پست


لینک به پست

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

این کل تگ هد من


<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>

1

به اشتراک گذاری این پست


لینک به پست

شما فایل جی کوئری،میگریت و 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 قرار دادم ولی باز هم نشد !! :(

0

به اشتراک گذاری این پست


لینک به پست

همون طور که مشاهده فرمودید تمام اون فایل های 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>

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

1

به اشتراک گذاری این پست


لینک به پست

لطفا آدرس وبسایت خود را قرار دهید

0

به اشتراک گذاری این پست


لینک به پست

فعلا دارم طراحی میکنم عزیز

فعلا css html هست

0

به اشتراک گذاری این پست


لینک به پست

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


<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 اگر اشتباه نکنم

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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>

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط HADI.RBL
      سلام خسته نباشید من وقتی یک برگه رو در وردپرس خودم میسازم هرکار میکنم در سایتم نمایش داده نمیشه هرکی میدونه مشکل از کجاست لطفا راهنمایی کنه >. 
    • توسط amirdehghani
      سلام ببخشید من داخل سایت ام query monitor نصب کردم بعد بهم ارور slow query میده  میگه دو تا slow query داری 
      الان باید چیکار کنم که درست بشن با افزونه میشه درستش کرد یا باید کد های query رو تغییر بدم 
      لطفا کمک کنید خیلی مهمه تا امشب باید درستش کنم تحویل بدم
    • توسط mahnaz20
      با سلام خدمت دوستان و اساتید گرامی
      دیروز هنگام آپدیت افزونه ووکامرس مشکلی در بروزرسانی بوجود آمد و سایتم بالا نیومد مجبور شدم برم از هاست فایل maintance را پاک کنم و سایت بالا اومد .
      ولی تنظیمات پیکربندی گواهینامه ssl بهم ریخته و وقتی آدرس سایتم را میزنم مرورگر اخطار میده که این سایت امن نیست و سایت باز نمیشه. بجای آیکون سبز رنگ هم آیکون اخطار قرمز کنار url نشان میده.
      لطفا کمک کنید این مشکل را برطرف کنم. ممنونم
    • توسط mahsa98
      سلام دوستان. من از افزونه acf  برای نمایش برخی اطلاعات استفاده میکنم. ولی میخوام نمایش این اطلاعات رو یکم زیبا و منظم و مرتب کنم. مثلا تو یه کادر قرار بگیره، رنگشون تغییر کنه و ....
      میشه از شورتکد استفاده کرد؟ مثلا تو ویژوال کامپوزر یا صفحه ساز خود قالبم اون فرمی که میخوام رو بسازم بعد این اطلاعات رو نمایش بدم؟
       اگه نمیشه چطوری باید بهشون استایل دلخواهم رو بدم؟
      خواهش میکنم دوستانی که تواناییش رو دارن کمکم کنن خیلی کارم گیره
    • توسط mahsa98
      سلام دوستان. من میخوام صفحه جزییات محصول رو در ووکامرس سفارشی سازی کنم. تا حدودی موفق شدم ولی افزونه تخصصی برای اینکار هست؟
      و سوال مهم هم اینه که مکان دکمه افزودن به سبد خرید رو میخوام تغییر بدم. میشه راهنماییم کنین؟ به کد هم خیلی مسلط نیستم
      ممنون♥