jquery_img_slidshow

How To Create Simple jQuery Slideshow?

In this post, I will show you How To Create Simple jQuery Simple Slideshow? Dont Know JQuery? If you are new to jQuery, Dont worry its real simple to use and implement. If you really want to get stuck into jquery then nettuts have wrote a complete series on the subject SEE THIS LINK. Whats JQuery? Firstly [...]

In this post, I will show you How To Create Simple jQuery Simple Slideshow?

Dont Know JQuery?

If you are new to jQuery, Dont worry its real simple to use and implement. If you really want to get stuck into jquery then nettuts have wrote a complete series on the subject SEE THIS LINK.

Whats JQuery?

Firstly whats jquery? i hear you ask, well jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.

Tutorial Details

  • Language: jQuery, CSS, HTML
  • Difficulty: Beginner
  • Estimated Completion Time: 30  minutes

 

Demo Download

 


Final Product What You’ll Be Creating

jquery_img_slidshow


Step 1: HTML Code

As you can see its a very simple html code, We just attached jQuery and jquery.imageslider.js file.






How to create jQuery Simple Slide Show?

Step 2: CSS Code

*{margin:0;padding:0;}

.title
{
background-image:url(images/title.png);
width:315px;
height:200px;
margin:10px auto 10px;
}

.abouttext
{
font-family: Verdana,Geneva,sans-serif;
font-size: 20px;
font-weight: bold;
margin: 50px auto;
text-align: center;
width: 630px;
}
.sliderscontainer
{
position:relative;
margin:30px auto 0;
width:630px;
height:350px;
background-color:#fff;
border:15px solid #fff;
box-shadow:1px 1px 10px #000;
-moz-box-shadow:1px 1px 10px #000;
-webkit-box-shadow:1px 1px 10px #000;
}
.slidersindicator
{
position:relative;
margin:10px auto;
width:640px;
text-align:center;
}
.slidersindicator .counter
{
width:19px;
height:19px;
display:inline-block;
background-image:url("images/inactive.png");
margin-right:10px;
background-repeat:no-repeat;
}

.slidersindicator .isactive
{
background-image:url("images/active.png") !important;
}

.arrow_next
{
width:50px;
height:100px;
background-image:url("images/arrow_next.png");
background-repeat:no-repeat;
position:absolute;
right:0;top:40%;
cursor:pointer;
}

.arrow_prev
{
width:50px;
height:100px;
background-image:url("images/arrow_prev.png");
background-repeat:no-repeat;
position:absolute;
left:0;top:40%;
cursor:pointer;
}
/*Style for plugin image slider*/
.slides
{
width:640px;
height:480px;
background-position:center center;
}

Related posts:

  1. Create Ajax Search Using PHP MYSQL and jQuery
  2. Top 10 Jquery Tutorials you should know
  3. Create simple wordpress plugin From Scratch Part-1