Tutorials Themes Mods Inspiration Collections Theme Store Mod Store SMF HTML CSS geek Dani UX jane Lifestyle LimeStone

jQuery Slider

Written by Mick in Tutorials on 16 May 2010

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.
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>';
Mick

is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.


7 Comments

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 :)
#1
Quote from: me?Struggle... on 24 May 2010
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.
#2
well,that is a problem.In the file that I downloaded ,there is no .js file...only img folder and one psd file...
:)
#3
Quote from: me?Struggle... on 24 May 2010
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'.
#4
What about .js file? :)

Can I get it?
#5
Quote from: me?Struggle... on 10 Jun 2010
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 ;)
#6
Ok!
I will give it another try!

Thanks...
#7

Get more stuff like this