C6 W3 S9 HW

[AliMD]

Method 1 (html5)

(function(){
  "use strict";

  var
    train = document.querySelector('.train'),
    btns = document.querySelectorAll('.btns li');

  for(var i=0;i<btns.length;i++){
    btns.item(i).index = i;
    btns.item(i).onclick=function(){
      train.style.left = (-450*this.index) +'px';
    };
  }
})();

live : http://jsbin.com/jsss/3

Method 2 (sefan jahate ettela)

(function(){
  "use strict";

  var
    train = document.querySelector('.train'),
    btns = document.querySelectorAll('.btns li');

  for(var i=0;i<btns.length;i++){
    (function(j){
       btns.item(j).onclick = function(){
         //alert(j);
         train.style.left = (-450*j) +'px';
      }
    })(i);
  }
})();

live : http://jsbin.com/jsss/4

[AliMD]

http://ali.md/jsss ro edame bedin

ozaye bacheha

@ehsansh :ab: @paskamari C @dante1357 :a: (shagerd aval :cake:) @arastoo :ab:

@hoseinBL :b: (key a mishi ?)

@mydavid66 CD (chikaret konam ?)

@mahdi-jannatian (jane ma alan man chi begam ?, be ghole @dante1357 in ke aslan check nemikone in issue ha ro velesh kon)

[AliMD]

Private for @paskamari http://jsbin.com/iqaquw/1/edit (baghiye be hich onvan check nakonin :D)

[omidgharib]

@AliMD oh paint ba canvas :)

[omidgharib]

@paskamari man ke khabar nadashtam :))

[omidgharib]

bashe poshte goshito didi mano didiiiiii :)))))

[omidgharib]

@dante1357 hastam o roye harfam va mistam :P :punch:

[omidgharib]

@dante1357 classetun s@t chande?

[hbehkamal]

@dante1357 oun code mane

dorostesh ine : http://jsbin.com/ogogeg/4

albate chize khassi nista... jadval zarbe

[paskamari]

@dante1357 hehe fahmidi hamasho copy past kardam ??

age mitooni dorost kon khoshhal misham:D

inja ham hast

[paskamari]

@dante1357 inaro didi 01

02

03

[dante1357]

Slider basic : http://jsbin.com/otazic/1

[dante1357]

slider with active btns : http://jsbin.com/ahuniv/1

[dante1357]

slider har 2 sanie mizane akse badi : http://jsbin.com/ihehey/1

[omidgharib]

@dante1357 khub yani chi mikhay nazane ??? darzemn on zamane setInterval hamishe yek motaghayer bede va aval codet tarifesh kon:)

[omidgharib]

manzoram in boud ke moshkelet chie? farghi nemikone injor modiriyate behtari dari ro projat :)

[omidgharib]

@dante1357 aha chun soali porsidi goftam :))

[omidgharib]

@dante1357 mekhendi .... :))))))

[omidgharib]

man o ba khudeton ghati nakon man faghat bahse elmi mikonam :P

[omidgharib]

:)

[dante1357]

slider with timer bar : http://jsbin.com/osarux/2

[ehsansh]

@dante1357 un overflow: hidden tuie div slideshow chi kar mikone?

[dante1357]

@ehsansh nemizare width ziade div e train dide beshe dge! div e train kheyli bozorge, hame aks ha chon dakhele une, overflow slide show ro hidden mikonim ke faghat ye slidesh dide beshe baghiash hidden bemune!

[ehsansh]

@dante1357 merc. vaghti b ie div poston nemidi chi mishe positionesh? age b dive train position relative bedim b dive babash k slidshow bashe position nadim natije farrghi nadare ke

[dante1357]

@ehsansh vaghti position midi yani un div o shenavar kardi! :) position nadi, yani asan position nemigire! :)) ya asan shenavaresh nakardi! fahmidi?! :D

na fargh dare, hala age slideshow jabeja she, dge train nesbat be un jabeja nemishe. nesbat bekhodesh jabeja mishe.

[ehsansh]

@dante1357 na train ro relative dadam slideshow ro margin leftesh hei avaz kardam vali train bazam dakhele slideshow hast b ghole khodet train nesbat b slideshow shenavare dige

[ehsansh]

http://jsbin.com/isufum/1/edit

[paskamari]

@ehsansh shoma bayad position pedaro relative bedi hala age farzandesho absolute bedi nesbat be pedare dar nazar gerefte mishe

bgcolor ro az .train hazf kon va be bachehash bede

kolan injoori dge

div.slideshow{
  width: 450px;
  height: 324px;
  margin: 30px auto 0;
  border: 1px solid green;
  overflow: hidden;
  position: relative;
  margin-left:200px;
}
div.slideshow div.train{
  width: 1700px;
  height: 50px;
  left:0px;
  top:0px;
  position: absolute;
  margin-left:-50px;

}
div.slideshow div.train div{
  width: 400px;
  height: 40px;
  background-color: red;
  float: left;
  margin:5px;
}

[paskamari]

My Tamrine Khane

[dante1357]

idea 1 (full page slider) - 4.5MB

[paskamari]

salam yani yeki peyda nashode roze mardo tabrik bege?

@AliMD @sedaghat @bachehayeClass makhsooan @dante1357 roozetoon mobarak:cake:

[paskamari]

Test 02 By Click

[paskamari]

Test 03 Auto

[dante1357]

idea 2 - 500kb

[AliMD]

@paskamari in paint ro khodet neveshti ? na jeddan ?! yani az ro ohamoon code hayi ke behet dadam !

[AliMD]

@paskamari aroom begir :a:

Yeki @dante1357 ro begire :D

[dante1357]

@AliMD hehehehe! :D man shahed budam khode @paskamari nevesht, injuri: raft ru code haye shoma ctrl+a zad badesh ctrl+c badesh umad to code haye khodesh ctrl+v! :)) @paskamari :P :D

@AliMD man ke faghat ruzi ye kar anjam midam, bache ha bikaran! :D albate bejoz hamid!

[paskamari]

@dante1357 mage behet nagoftam nagoo riya mishe:D

[dante1357]

@paskamari na beza hame bedunan to che pesare kushai hasti! :D :P

[ehsansh]

ehsan vared mishavad :D karhaie man:

do ta kare aval karaie ali.md has faghat vase iadgiri ie dor neveshtam

1. basics http://jsbin.com/adogaj 2.active btns http://jsbin.com/axosej

va hala karaie khalaghane

1. http://jsbin.com/ivasoh tu in kar hameie tasavir ruie hame gharar migiran iani float=left nadaran va ba taghire z-index dide mishan
2. http://jsbin.com/ozufij mese kare ghabli hast faghat opacity tadriji taghir mikone mese filma k iek frame dar frame badi mahv mishe :)
3. http://jsbin.com/ufabar tuie in kar tasavire miani dide nemishan iani masalan alan tasvir avali ro browser neshun mide li tasvire chaharom ro ke bezani dige tasvir dovom va sevom dide nemishan
4. http://jsbin.com/obagoz inja tasvir az goosheie samte rast shoroo mikone b baz shodan hese varagh zadan safhe ro b adam mide :)
5. http://jsbin.com/iqisec inja tasvir az ie daiere kuchik shoroo mishe va daiere bozorg mishe ta tamame tasvir dide beshe inam mese bazi filmas :)

morede 4,5 ie moshkeli dare gahi kheili khub dide mishe gahi in harekat tasvir dide nemishe iek ho tasvir zaher mishe nafahmidam chera injurie !

[dante1357]

@ehsansh ey kargardan!!!! :D ey peter jackson!!! :D ey frame dar frame mahv shavande! :D ey mahv shode dar ofogh! :)) :D morede 3 ke eshkal dare! ghati mikone! 4,5 ham kheyli jalebe! idea ghashngie! damet jiz! :+1: :)

vase varagh khordan in kare mano bebin!

[dante1357]

@ehsansh dadash che kardiiiiiiiiiiii!!!! :OOOOOO vase shomare 4 : slideshow male neshun dadane ye chize tu ye slide ha! to ke width o height hamaro sefr dadi ina hamash borderan! :O chio mikhad in neshun bede alan?! :O

vase shomare 5 : scale ke ziad mikoni birikht mishe ha! unam 14 ta! kolan harchi bezari dakhelesh 4bit 4 bit mishe!

[ehsansh]

@dante1357 ghorbanat :)
morede 3 linke jadid barash gozashtam doros shod alan http://jsbin.com/ufabar morede 4 ras migi baiad iejur dige mosalas besazam felan karbord nadare :) vase 5 nemikhastam scale bedam vali niaz b ie rahi dashtam k b markaze ie moraba(ia hamun daiere) position bedam k age width & height ziad shod markaze daiere avaz nashe k peida nakardam majbur shodam scale bedam

[AliMD]

@ehsansh Code nevisit too halgham :D vajeb shod jalase bad jQuery ro shoroo konam kash class feshorde nabood tekam behetoon design pattern va algorithm migoftam vaghean behesh niyaz darin :dango:

[AliMD]

@paskamari @dante1357 @ehsansh ali.md/jsss ro ta ghable php edame bedin

[AliMD]

@arastoo bikhiyal concept chand ta kar anjam bede

@hoseinBL azat khabari nist ?! heyfe aghab bemooni ye kari nakon nazaram nesbat e barnameyi ke barat daram avaz beshe !

@mydavid66 hadde aghal dar bahs ha sherkat kon kar haro bebin shayad be zogh oomadi ! ta 3 shanbe 2 rooz vaght dari lotfan daste khali naya niyaz be tahdid nist baraye khodet miyay class na baraye man

[AliMD]

ye nokteye fun !!! too jsbin tab (indent) ba ctrl+[ hastesh :D @remy ye shaskool ! (omidvaram ino bebine va translate kone)

[dante1357]

@AliMD ogey! :+1: :)

[paskamari]

@AliMD khaylekhob :ok:

[ehsansh]

tuie Auto Play and Stop

---

var autoPlayIv = false;
autoPlayStart = slideshow.onmouseout = function(){
    if(autoPlayIv) return;
    autoPlayIv = setInterval(nextSlide,2000);
}

---

in code chi kar mikone? if badesh return iani chi?

[dante1357]

@ehsansh azizam bebin in male btns hast ke mouse over mishan stop beshe automatic rad kardane aks ha! okay?

aval az hame tarif mikone autoPlayIv o behesh mige false, badesh mige age mouse out shod, yani mouse ke az ru btns ha raft kenar, miad sharte if o nega mikone mige aya autoPlayIv true e? age are, return mikone az un function miad birun age false in code o anjam mide autoPlayIv = setInterval(nextSlide, 5000);

girifti?! :D