Add a cool slider using jquery to your front page.  You can customize images with your own colors using photoshop or gimp.

Download the zip below, create a new folder in your forum root called "slickjqueryslider" and add all the contents from the zip into the folder.

Demo: SMF Themes & Design. Free & Premium.

Change the path of URLs, the titles and content with yours.   

Add this code to a php block or article page.

Code Select Expand

echo'

<style type="text/css">
<!--
/**
* Slideshow style rules.
*/
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://www.chevyavalancheclub.com/slickjqueryslider/img/bg_slideshow.png) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}

/**
* Slideshow controls style rules.
*/
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(http://www.chevyavalancheclub.com/slickjqueryslider/img/control_left.png) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(http://www.chevyavalancheclub.com/slickjqueryslider/img/control_right.png) no-repeat 0 0;
}

/**
* Style rules for Demo page
*/
* {
  margin:0;
  padding:0;
  font:normal 11px;
 
}
a:hover {
  text-decoration:underline;
}



.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  font:italic 24px Georgia, "Times New Roman", Times, serif;
  color:#7f7f7f;
  letter-spacing:-1px;
}
.slide img {
  float:right;
  margin:0 15px;
}

-->
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $(\'.slide\');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $(\'#slidesContainer\').css(\'overflow\', \'hidden\');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll(\'<div id="slideInner"></div>\')
    // Float left to display horizontally, readjust .slides width
.css({
      \'float\' : \'left\',
      \'width\' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $(\'#slideInner\').css(\'width\', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $(\'#slideshow\')
    .prepend(\'<span class="control" id="leftControl">Clicking moves left</span>\')
    .append(\'<span class="control" id="rightControl">Clicking moves right</span>\');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $(\'.control\')
    .bind(\'click\', function(){
    // Determine new position
currentPosition = ($(this).attr(\'id\')==\'rightControl\') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $(\'#slideInner\').animate({
      \'marginLeft\' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $(\'#leftControl\').hide() } else{ $(\'#leftControl\').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $(\'#rightControl\').hide() } else{ $(\'#rightControl\').show() }
  }
});
</script>


  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        <h2>Painting the Tail Pipes</h2>
        <p><img src="http://i120.photobucket.com/albums/o170/BlueDevil_photo/c474c76e.jpg" alt="Painting the tail pipes in your chevy avalanche truck" width="150" height="100" /></a>Got the rust blues? Dupli-Color hi-temp engine enamel can make the tail pipes look great.<br /><br /><a href="[url=http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=95">Read]Chevy Avalanche Club - Articles - Painting the tail pipes[/url] More...</a></p>
      </div>
      <div class="slide">
        <h2>Replacing The Tailgate Handle on the 2002-2006</h2>
        <p><img src="http://i120.photobucket.com/albums/o170/BlueDevil_photo/ac91d52f.jpg" alt="Replacing The Tailgate Handle on the 2002-2006 Chevy Avalanche" width="150" height="100" /></a>Dealing with the dreaded busted tailgate handle,well show you how to replace it in a jiff. <br /><br /><a href="[url=http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=96">Read]Chevy Avalanche Club - Articles - Replacing the busted tailgate handle 2002-2006[/url] More...</a></p>
        <p>
      </div>
      <div class="slide">
        <h2>Replacing the 2005 Cabin Filter</h2>
        <p><img src="http://www.chevyavalancheclub.com/index.php?action=dlattach;topic=8371.0;attach=11337;image" alt="2002-2006 Chevy Avalanche cabin filter" width="150" height="100" /></a>This write up is to show how you can cover the opening you made after you replace the cabin filters. <br /><br /><a href="[url=http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=93">Read]Chevy Avalanche Club - Articles - Replacing the 2005 Cabin Filter[/url] More...</a></p>
      </div>
      <div class="slide">
        <h2>Tail Lights Nite Shades</h2>
        <p><img src="http://www.chevyavalancheclub.com/index.php?action=dlattach;topic=5597.0;attach=7904;image" alt="transparent black tail lights" width="150" height="100" /></a>VHT Nite-Shades is a transparent black tail light lens coating for creating a custom European styling. <br /><br /><a href="[url=http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=75">Read]Chevy Avalanche Club - Articles - Tail Lights Nite Shades[/url] More...</a></p>
      </div>
    </div>
  </div>
</div>';

I LOVE YOU MAN.MILLION TIMES THANKS!!!
But,I have a problem with it.I uploaded everything like you sad and I dont get that slide like in demo here,with left and right arrows,only plain page with content.What seems to be problem?


p.s. sorry for my english :)

I LOVE YOU MAN.MILLION TIMES THANKS!!!
But,I have a problem with it.I uploaded everything like you sad and I dont get that slide like in demo here,with left and right arrows,only plain page with content.What seems to be problem?


p.s. sorry for my english :)

Make sure the path for the .js and images are correct in the code.

well,that is a problem.In the file that I downloaded ,there is no .js file...only img folder and one psd file...
:)

well,that is a problem.In the file that I downloaded ,there is no .js file...only img folder and one psd file...
:)

Ooops, sorry about that.  Youre right, it doesnt have a .js file.  I got confused with another mod.


I would make sure the paths are correct tho'.

What about .js file? :)

Can I get it?

What about .js file? :)

Can I get it?

There is no .js in the zip and you dont need it.  I would make sure the paths are correct and change all links in the code above with your own ;)

Ok!
I will give it another try!

Thanks...