Simple content slider


 
Now i am going to show you simple content slider. you just have to put small javascript code for slide your content.

It will never conflict with other javascript.

It will work only on previous and next arrow functionality.

CSS section :

<style type="text/css">
  li { display:none;}
  li.current{
    color:#ff0000;
    display:block;
  }
</style>

Javascript section :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script> 
$(document).ready(function(){

  $("#next").click(function(){
		
    total = $("#mobileMenu ul").children("li").length;
    cur = $("#mobileMenu ul li.current").index();
		
    $("#mobileMenu ul li").attr('class','normal');
		
    if(cur==(total-1)){
        $("#mobileMenu ul li").eq(0).attr('class','current');
    }else{
        $("#mobileMenu ul li").eq(cur+1).attr('class','current');
    }
  });


  $("#prev").click(function(){
		
    total = $("#mobileMenu ul").children("li").length;
    cur = $("#mobileMenu ul li.current").index();
		
    $("#mobileMenu ul li").attr('class','normal');
		
    $("#mobileMenu ul li").eq(cur-1).attr('class','current');
		
  });

});
</script>

HTML section :

<div id="mobileMenu">
  <ul>
    <li class="normal">
      <a href="/agentur/flugplan.html">First Slide</a>
    </li>
	
    <li class="current">
      <a href="/agentur/unsere-agentur.html">Second Slide</a>
    </li>
	
    <li class="normal">
      <a href="/agentur/unsere-leistungen.html">Third Slide</a>
    </li>
		
  </ul>
  
  <div class="arrow">
    <img id="prev" src="left_arrow.png" alt="Prev" />
    <img id="next" src="right_arrow.png" alt="Next" />
  </div>
</div>

You can set your design as you want.

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Advertisements

One thought on “Simple content slider

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s