javascript - Slider continuous switch -


i have slider switching between dividers using previous/next buttons. when dividers end, slider stops. how change when reaching end 1 side(next/previous) continues. let's have 4 div, 1 2 3 4 click next.. reach 4, when click 4 should continue 1. help?

html:

<div id="wrapper">     <div id="nav">         <button id="prev" disabled>&lt;&lt;&lt;</button>         <button id="next">&gt;&gt;&gt;</button>     </div>     <div id="mask">         <div id="item1" class="item"> <a name="item1"></a>              <div class="content">                 <img id="image1" src="http://placehold.it/350x150" />                 <img id="image2" src="http://placehold.it/350x150" />                 <img id="image3" src="http://placehold.it/350x150" />                 <img id="image4" src="http://placehold.it/350x150" />                 <img id="image5" src="http://placehold.it/350x150" />                 <img id="image6" src="http://placehold.it/350x150" />                 <img id="image7" src="http://placehold.it/350x150" />                 <img id="image8" src="http://placehold.it/350x150" />                 <img id="image9" src="http://placehold.it/350x150" />                 <img id="image10" src="http://placehold.it/350x150" />             </div>         </div>         <div id="item2" class="item">             <div class="content">                 <img id="image1" src="http://placehold.it/350x150" />                 <img id="image2" src="http://placehold.it/350x150" />                 <img id="image3" src="http://placehold.it/350x150" />                 <img id="image4" src="http://placehold.it/350x150" />                 <img id="image5" src="http://placehold.it/350x150" />                 <img id="image6" src="http://placehold.it/350x150" />                 <img id="image7" src="http://placehold.it/350x150" />                 <img id="image8" src="http://placehold.it/350x150" />                 <img id="image9" src="http://placehold.it/350x150" />                 <img id="image10" src="http://placehold.it/350x150" />             </div>         </div>     </div> </div>

css:

body {     margin: 0; } #wrapper {     width: 100%;     height: 350px;     /*position: absolute;*/     top: 0;     left: 0;     background-color: white;     overflow: hidden; } #nav button {     position: absolute;     top: 100px;  } #prev {     left: 40px;  } #next {     right: 40px;   } #mask {     width: 50000px;     height: 100%;     background-color: white; } .item {     width: 1200px;     height: 100%;     float: left;     background-color: white; } .content img {     height: 100px;     width: 17%;     float:left;     margin-right: 10px;     margin-bottom: 10px; } .content {     width: 50%;     height: 220px;     top: 20%;     margin: auto;     background-color: white;     position: relative; } .content {     position: relative;     top: -17px;     left: 170px; } .selected {     background: #fff;     font-weight: 700; } .clear {     clear:both; }

jquery:

$(document).ready(function () {     function shift(direction) {         var             $mask = $('#mask'),             $items = $('.item'),             items = $items.size(),             currentitem = $mask.data('currentitem'),             newitem;          if (currentitem == undefined) {             currentitem = 0;         }          newitem = currentitem + direction;         $mask.data('currentitem', newitem).animate({            marginleft: -newitem * $items.eq(0).width()         });          if (newitem == 0) {             $("#prev").prop('disabled', true);         } else {             $("#prev").prop('disabled', false);         }         if (newitem == items - 1) {             $("#next").prop('disabled', true);         } else {             $("#next").prop('disabled', false);         }     }      $('#prev').click(function () {         return shift(-1);     });     $('#next').click(function () {         return shift(1);     });      function resizepanel() {         width = $(window).width();         height = $(window).height();          $('#wrapper, .item').css({             width: width,             height: height         });     }      $(window).resize(function () {         resizepanel();     });     resizepanel(); });

jsfiddle: http://jsfiddle.net/909zce06/7/

i have changed code bit accomodate cyclic transition of images.

what have done:

  • the code disable previous/next button removed, restrict cyclic sliding of images.
  • extra code added handle transition when slider hits extreme ends(either direction).

js code(relevant code) :

$('#prev').click(function () {     if (newitem === 0) {         newitem = itemcount - 1;     } else {         newitem--;     }     return shift(); }); $('#next').click(function () {     if (newitem === itemcount - 1) {         newitem = 0;     } else {         newitem++;     }     return shift(); });

live demo @ jsfiddle:

http://jsfiddle.net/dreamweiver/909zce06/12/

suggestion:if planning extend current slider more features, suggest go existing slider plugins, "why re-invent wheel when have 1 already"

happy coding :)


Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more