جستجو در انجمن

در حال نمایش نتایج برای برچسب های 'اسلایدر جی کوئری'.

  • جستجو بر اساس برچسب

    برچسب ها را با , از یکدیگر جدا نمایید.
  • جستجو بر اساس نویسنده

نوع محتوا


انجمن ها

  • بخش عمومی
    • اخبار و اطلاعیه های انجمن
    • پیشنهادها و انتقادات
  • بخش وردپرس
    • وردپرس
    • افزونه ها
    • پوسته ها
    • فروشگاه سازها
  • دیگر
    • بخش برنامه نویسی
    • بخش خرید و فروش
    • بحث آزاد
  • بایگانی
    • بایگانی

پیدا شد 2 نتیجه

  1. سلام من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از 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
  2. سلام . من می خوام از این اسلایدر استفاده کنم : 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>