Add a jquery slider to you portal

[Mick.]

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.

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

Demo: http://www.bluedevilcustoms.com/index.php?page=page4898

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="http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=95">Read 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="http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=96">Read 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="http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=93">Read 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="http://www.chevyavalancheclub.com/index.php?action=articles;sa=view;article=75">Read More...</a></p>
      </div>
    </div>
  </div>
</div>';   

[Liam.]

I prefer anythingSlider myself but this looks plain and cool Thanks!

[Baloch]

Thank you so much this is what I was seeking for since couple of days. I'll work then will let u know about the result.
Thanks once again.

[Baloch]

May I add YOUTUBE VIDEOS instead of IMAGES?