javascript - Slide in and slide out simultaneously -


I'm trying to create a slider that clicks the images with the right arrow button on the mouse, There are empty frames. I want it to be seamless here are my codes:

html:

  & lt; Div id = "img_slider" & gt; & Lt; Img src = "..//images/proj/1 (2) .jpg" id = "img_1" class = "slide_img" /> & Lt; Img src = "..//images/proj/1.jpg" id = "img_2" class = "slide_img" /> & Lt; Img src = "..//images/proj/2.jpg" id = "img_3" class = "slide_img" /> & Lt; Img src = "..//images/proj/3jpg" id = "img_4" class = "slide_img" /> & Lt; Img src = "..//images/proj/4jpg" id = "img_5" class = "slide_img" /> & Lt; Img src = "..//images/proj/5jpg" id = "img_6" class = "slide_img" /> & Lt; / Div & gt;   

And this is CSS:

  #img_slider {background: url (../ images / preloader.gif) No-double center; Background color: RGBA (253, 251, 187, .6); Background size: 50px; Hidden flurry; Z-index: 2; Height: 500px; } .slide_img {display: none; Width: 100%; Height: 500px; z-index: 1; } .slide_img: First-child {display: block; }   

And this is Javascript:

  var count = 1; Work correct () {count ++; If (calculation> 6) {count = 1; } $ (". Item"). CSS ("background", "# 333"); $ ("# Item_" + count) .css ("background" "# 3AF71A"); . Hide $ (". Slide_img") ("slide", {direction: 'right'}, 500); $ ("#Img _" + count) .delay (300) .show ("slide", {direction: 'leave'}, 500); If (calculation == 6) {count = 0; }}   

Any help is greatly appreciated.

You should do it:

HTML & lt; Div id = "slider_container" & gt; & Lt; Div id = "img_slider" & gt; & Lt; Img src = "http://placekitten.com/120/100" id = "img_1" class = "slide_img" /> & Lt; Img src = "http://placekitten.com/120/100" id = "img_2" class = "slide_img" /> & Lt; Img src = "http://placekitten.com/120/100" id = "img_3" class = "slide_img" /> & Lt; / Div & gt; & Lt; / Div & gt;

css

  #slider_container {status: relative; Hidden flurry; Width: 120px; Height: 100 pixels; } #img_slider {status: Completed; Left: 0 pixels; Width: 99999 pixels; } Img {float: left; }   

JS

  var number = 1; Var newLeft = 0; $ (Document) .ready (function () {var timer = setInterval (function () {newLeft = parseInt ($ ('# img_slider'). CSS ('left') - $ ('img'). Width () ;) (Counting ++;}, 1000);} (calculate == $ ('IMG'). Length) {count = 0; newLeft = 0;} $ ('# img_slider' ).);    

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -