j1989m

مشکل در ساخت اسلایدر ریسپانسیو

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

سلام 

من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از  html, css, JS, jquery
(بدون بوت استرپ یا فریمورک یا پلاگین یا هرچیز دیگه ای...)

 

مشاهده اسلایدر


وقتی بازش کنید میبینید درست اجرا میشه (هر 3 ثانیه اسلایدها عوض میشن) 
اما وقتی مرورگر رو ریسایز کنید (یعنی ابعاد مرورگر رو تغییر بدید)، اسلایدر قاطی میکنه

فکر میکنم مشکل مربوط به دستور setInterval میشه

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: none;
border: none;
font-size: medium;
font-family: Tahoma,Arial;
}
body {
direction: rtl;
background: #f8f8f8;
text-align: right;
color: #333333;
position: relative;
}
#sliderWrap {
display: block;
width: 100%;
position: relative;
overflow: auto;
direction: ltr;
}
#slider {
display: block;
position: relative;
}
#slider > li {
display: block;
position: relative;
float: left;
}
#slider > li > img {
display: block;
width: 100%;
height: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var cLi = $("#slider > li").length;
var wUl = (cLi*100)+"%";
$("#slider").css("width",wUl);
var wLi = (100/cLi)+"%";
$("#slider > li").css("width",wLi);
$("#sliderWrap").css("overflow","hidden");
var size = $("#slider > li").width();
var i = 1;
function sliderMove(){
var sizeSlide = i*size;
if(i<cLi){
$("#sliderWrap").animate({scrollLeft: sizeSlide},500);
i++;
}
else{
$("#sliderWrap").animate({scrollLeft: 0},500);
i = 1;
}
}
var anim = setInterval(sliderMove,3000);
$(window).resize(function(){
clearInterval(anim);
$("#sliderWrap").scrollLeft(0);
var size = $("#slider > li").width();
var i = 1;
function sliderMove(){
var sizeSlide = i*size;
if(i<cLi){
$("#sliderWrap").animate({scrollLeft: sizeSlide},500);
i++;
}
else{
$("#sliderWrap").animate({scrollLeft: 0},500);
i = 1;
}
}
var anim = setInterval(sliderMove,3000);
});
});
</script>
</head>
<body>
<div id="sliderWrap">
<ul id="slider">
<li>
<img src="http://uupload.ir/files/ltbl_slide-1.jpg">
</li>
<li>
<img src="http://uupload.ir/files/t0p0_slide-2.jpg">
</li>
<li>
<img src="http://uupload.ir/files/1tmb_slide-3.jpg">
</li>
</ul>
</div>

 

slider.html

0

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


لینک به پست
در 10 ساعت قبل، j1989m گفته است :

؟

سلام . چون به body , direction:rtl دادید. در استایل پایین .

کاروسل dirction:ltr اما وقتی شما به body , dirction::rtl میدید کاروسل قاطی می کنه . فقط کافیه الان direction: rtl; در body پاک کنید.

body {
direction: rtl;
background: #f8f8f8;
text-align: right;
color: #333333;
position: relative;
}

 

1

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


لینک به پست
در 4 ساعت قبل، Mirrajabi گفته است :

سلام . چون به body , direction:rtl دادید. در استایل پایین .

کاروسل dirction:ltr اما وقتی شما به body , dirction::rtl میدید کاروسل قاطی می کنه . فقط کافیه الان direction: rtl; در body پاک کنید.


body {
direction: rtl;
background: #f8f8f8;
text-align: right;
color: #333333;
position: relative;
}

 

سلام

کردم نشد

0

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


لینک به پست

واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟
من واقعا نمیدونم اشکال کارم کجاست

لطفا وارد لینک مشاهده اسلایدر بشید،  اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره

0

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


لینک به پست
در 38 دقیقه قبل، j1989m گفته است :

واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟
من واقعا نمیدونم اشکال کارم کجاست

لطفا وارد لینک مشاهده اسلایدر بشید،  اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره

من با گوشی وارد آدرس شدم، برای من درست کار می کنه. البته مرورگرم کرومه. 

1

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


لینک به پست
در ۱ ساعت قبل، Mirrajabi گفته است :

من با گوشی وارد آدرس شدم، برای من درست کار می کنه. البته مرورگرم کرومه. 

نه متاسفانه درست کار نمیکنه

اگه حین اجرای اسلایدر (مثلا وقتی روی تصویر دوم: عکس گربه هست) گوشی رو افقی یا عمودی کنید و ابعاد تغییر کنه، می بینید قاطی میکنه

چه تو گوشی چه تو کامپیوتر و با مرورگرهای مختلف تست کردم، قاطی میکنه

دیگه واقعا دارم از طراحی وب و برنامه نویسی زده میشم

0

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


لینک به پست

https://jsfiddle.net/kirana/b5bqk68j/

ببینید این به کارتون میاد؟ 

ویرایش شده در توسط Mirrajabi
1

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


لینک به پست
در 1 ساعت قبل، Mirrajabi گفته است :

https://jsfiddle.net/kirana/b5bqk68j/

ببینید این به کارتون میاد؟ 

نه، چون نمیخوام از پلاگین استفاده کنم... به این خاطر که با پلاگین ها ویرایش خیلی محدود میشه، نهایتا میشه رنگ ها و اندازه ها و غیره رو تغییر داد... اما مثلا فرض کنید بخوام حین نمایش هراسلاید/یا یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن نمایش بدم... در اینصورت باید نشست کل کدهای پلاگین رو از اول تا آخر خوند و درک کرد... تازه آخرشم معلوم نیست بشه یا نه...

0

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


لینک به پست
در 17 ساعت قبل، j1989m گفته است :

نه، چون نمیخوام از پلاگین استفاده کنم... به این خاطر که با پلاگین ها ویرایش خیلی محدود میشه، نهایتا میشه رنگ ها و اندازه ها و غیره رو تغییر داد... اما مثلا فرض کنید بخوام حین نمایش هراسلاید/یا یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن نمایش بدم... در اینصورت باید نشست کل کدهای پلاگین رو از اول تا آخر خوند و درک کرد... تازه آخرشم معلوم نیست بشه یا نه...

این آدرسی که واستون فرستادم پلاگین نیست،  فقط js owl carousel تو سایت خودتون فراخوانی می کنید تا کاروسل ایجاد بشه،  من خودم نمی دونم چرا شما ایتقدر واسه خودتون سخت گرفتید. 

0

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


لینک به پست
در 13 ساعت قبل، Mirrajabi گفته است :

این آدرسی که واستون فرستادم پلاگین نیست،  فقط js owl carousel تو سایت خودتون فراخوانی می کنید تا کاروسل ایجاد بشه،  من خودم نمی دونم چرا شما ایتقدر واسه خودتون سخت گرفتید. 

ممنون که جواب میدی اما این کاروسل که میگی دقیقا چیه که باید فراخوانیش کرد؟ من تو پست اول گفتم نمیخوام از فریمورک یا پلاگین یا هرچیز دیگه ای استفاده کنم

سرچ کردم میگه پلاگینه: https://hive.ir/معرفی-پلاگین-جی-کوئری-owl-carousel/

خب حالا من استفاده کردم از این، بعد اگه مثلا فرض کنید بخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

نمیدونم منظورمو گرفتید یا نه؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

ویرایش شده در توسط j1989m
0

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


لینک به پست
در 9 ساعت قبل، j1989m گفته است :

ممنون که جواب میدی اما این کاروسل که میگی دقیقا چیه که باید فراخوانیش کرد؟ من تو پست اول گفتم نمیخوام از فریمورک یا پلاگین یا هرچیز دیگه ای استفاده کنم

سرچ کردم میگه پلاگینه: https://hive.ir/معرفی-پلاگین-جی-کوئری-owl-carousel/

خب حالا من استفاده کردم از این، بعد اگه مثلا فرض کنید بخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

نمیدونم منظورمو گرفتید یا نه؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

سلام .

پلاگین نیست .

فقط یک کتابخانه باید فراخوانی کنید .

 

این ادرس بالا فرستادم به نظرم چیزیکه که مد نظرتون هست .

0

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


لینک به پست

برای دانلود owl carosel باید به این ادرس برید.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

هم می تونید demo رو بزنید مثال های دیگشو ببنید و هم می تونید گزینه downlod بزنید و فقط owl.carousel.css  بگیرید بزارید تو فایل css و owl.carousel.min.js  بزارید بزارید تو فایل js   و در انتها در قالب خود فراخوانی کنید .

باز هم اگر اموزش بیشتری می خواید کافیه owl carosel سرچ کنید.

0

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


لینک به پست
در 6 ساعت قبل، Mirrajabi گفته است :

سلام .

پلاگین نیست .

فقط یک کتابخانه باید فراخوانی کنید .

 

این ادرس بالا فرستادم به نظرم چیزیکه که مد نظرتون هست .

 

در 5 ساعت قبل، Mirrajabi گفته است :

برای دانلود owl carosel باید به این ادرس برید.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

هم می تونید demo رو بزنید مثال های دیگشو ببنید و هم می تونید گزینه downlod بزنید و فقط owl.carousel.css  بگیرید بزارید تو فایل css و owl.carousel.min.js  بزارید بزارید تو فایل js   و در انتها در قالب خود فراخوانی کنید .

باز هم اگر اموزش بیشتری می خواید کافیه owl carosel سرچ کنید.

بازم ممنون

اما چیزی که من میخوام اینه:

میخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

آیا owl carosel این امکان رو میده؟ چطور میشه این انیمیشن ها رو اضافه کرد؟؟؟

0

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


لینک به پست
در 3 ساعت قبل، j1989m گفته است :

 

بازم ممنون

اما چیزی که من میخوام اینه:

میخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

آیا owl carosel این امکان رو میده؟ چطور میشه این انیمیشن ها رو اضافه کرد؟؟؟

خیر، شما باید برای آون آیتم های جدید ی که مد نظر هست جی کویری بنویسید،  اما می تونید از حالت اسلایدری عکس ها کاروسل استفاده کنید ولی برای اینکه چند تا آلمان دیگه قرار بدید روی عکس و انیمیشن هم داشته باشه باید استایل و جی کويری دلخواه بنویسید. 

0

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


لینک به پست
در 5 ساعت قبل، Mirrajabi گفته است :

خیر، شما باید برای آون آیتم های جدید ی که مد نظر هست جی کویری بنویسید،  اما می تونید از حالت اسلایدری عکس ها کاروسل استفاده کنید ولی برای اینکه چند تا آلمان دیگه قرار بدید روی عکس و انیمیشن هم داشته باشه باید استایل و جی کويری دلخواه بنویسید. 

مرسی

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

اگه ممکنه براتون لطفا یک نمونه برام بسازید: مثلا 3 تا اسلاید باشه و داخل هراسلاید چند تا عنصر (آیکون و متن) مختلف باشه، بطوریکه با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن...

 

مثل اسلایدر این سایت: https://beyamooz.com

ویرایش شده در توسط j1989m
0

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


لینک به پست

بله میشه،  چون همه ایکن ها و آلمان داخل آیتم کاروسل قرار می گیره و و با رفتن هر آیتم، آلمان های داخل هم ناپدید  میشن.  

عذر می خوام من تا یکشنبه به سیستم دسترسی ندارم و با گوشی انلاینم. 

0

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


لینک به پست

deleted

ویرایش شده در توسط j1989m
0

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


لینک به پست
در در 9/7/2017 at 13:40، Mirrajabi گفته است :

بله میشه،  چون همه ایکن ها و آلمان داخل آیتم کاروسل قرار می گیره و و با رفتن هر آیتم، آلمان های داخل هم ناپدید  میشن.  

عذر می خوام من تا یکشنبه به سیستم دسترسی ندارم و با گوشی انلاینم. 

 

سلام

از کاروسل استفاده کردم، داخل اسلاید دوم و سوم المان هایی رو قرار دادم... حالا میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...

ویرایش شده در توسط j1989m
0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط sajjadmp
      سلام .
      من می خوام از این اسلایدر استفاده کنم :
      http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-infinite-carousel-plugin/
      اما متاسفانه راهنمایی به درد بخوری نداره و فقط مثال زده .
      اگه کسی با این اسلایدر آشنایی داره و نحوه استفادشو میدونه لطفا راهنمایی کنه . اسلایدر مشابه هم اگه میشناسید لطف می کنید اگه معرفی کنید .
      در ضمن من از این کدا هم استفاده کردم که توفیقی نداشته :


      محل مورد نظر
      <ul id="carousel">
      <li><img width="200" height="133" alt="" src="p1.png" /><p>This is <strong>a caption</strong></p></li>
      <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p2.png" /></a></li>
      <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p3.png" /></a></li>
      </ul>
      استایل دکمه های پیش فرض
      .ic_caption{
      float:right;
      background:red;
      }
      .ic_button{
      float:right;
      background:red;
      }
      .ic_active{
      float:right;
      background:red;
      }
      .ic_thumbnails{
      float:right;
      background:red;
      }
      فراخوانی در هدر
      <script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.infinitecarousel3.js"></script>
      <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
      $(‘#carousel’).infiniteCarousel({
      transitionSpeed: 300 milliseconds,
      displayTime: 6000 milliseconds,
      internalThumbnails: false,
      thumbnailType: 'buttons',
      customClass: 'myCarousel',
      progressRingColorOpacity: '0,0,0,1',
      progressRingBackgroundOn: false,
      margin: 10,
      easeLeft: 'easeOutExpo',
      easeRight:'easeOutQuart',
      inView: 1,
      advance: 1,
      autoPilot: true,
      prevNextInternal: true,
      autoHideCaptions: false,
      });
      });
      </script>