• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Creating a Custom Basic Slider

0
  • by Gavin
  • In Best Practices · CSS · TUTORIALS
  • — 22 Jul, 2014

Slider is a fun way of rotating your images instead of a plain thumb that consumes a lot of site’s space. It also adds value to your site as it runs dynamically.

Although there are different ways to create a slider using CSS3 alone, there might be some drawbacks. When users navigate your site on older browsers like IE 8 or below there might be some inconsistency with the design or worse the functionality itself.

That’s why in this tutorial I am going to show you how to create a basic rotating slider with navigation using both CSS3 and jQuery.

Ok let’s start.

Things you need for this tutorial

  • Google’s jQuery Hosted Library
  • Any images with 750 X 300px height
  • Basic Knowledge with CSS3 and jQuery

View Demo

STEP 1 – The Markup

The slider html markup is very simple, we’ll wrap everything with a div class slider and then inside it we’ll place the slide images.

For the slider we will create two buttons and will wrap them with a div class slider nav. We’ll also put some data attribute to embed some custom data.

Check out the codes below.

<div class="slider">
	<ul>
		<li><img src="images/slide1.jpg" alt="image"></li>
		<li><img src="images/slide2.jpg" alt="image"></li>
		<li><img src="images/slide3.jpg" alt="image"></li>
		<li><img src="images/slide4.jpg" alt="image"></li>
		
	</ul>
</div>

<div id="slider-nav">
	<button data-dir="prev"> &laquo; Previous</button>
	<button data-dir="next" >Next &raquo;</button>
</div>

STEP 2 – The CSS

First we will some basic styles for our body elements such as the background color, width and so on.

body {
    width:750px;
    margin:85px auto 0;
    background:#f0eeee;
    font-family:'Open Sans'
}
* {
    margin:0;
    padding:0
}

Now that we have our basic styles for our body, let’s go ahead and style our slider navigation and the slider itself.

Below you can see that we set the slider nav to display nothing, this will make sense later as we go along to our jQuery part. We also set some cool box shadow on our container.


#slider-nav {
    display:none;
    margin-top:1em
}

#slider-nav button {
    font-family:'Open Sans';
    font-weight:300;
    padding:.8em 1em
}

.slider {
    width:inherit;
    height:300px;
    overflow:scroll;
    -webkit-box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);
    -moz-box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);
    box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75)
}

Finally, we can now add styles to our list of slides. Each list will be float on the left and we’ll remove the list style.


.slider ul {
    width:10000px;
    list-style:none
}
.slider li {
    float:left

STEP 3 – The jQuery

For this part of the tutorial, create a new js file and name it custom.js. This will contain our jQuery code that will manipulate the slides of our basic slider.

Now go ahead and copy the code below and paste on the custom.js you just created.

function Slider( container, nav ) {
	this.container = container;
	this.nav = nav.show();
	this.imgs = this.container.find('img');
	this.imgWidth = this.imgs[0].width; // 600
	this.imgsLen = this.imgs.length;

	this.current = 0;
}

Slider.prototype.transition = function( coords ) {
	this.container.animate({
		'margin-left': coords || -( this.current * this.imgWidth )
	});
};

Slider.prototype.setCurrent = function( dir ) {
	var pos = this.current;
	pos += ( ~~( dir === 'next' ) || -1 );
	this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;
	return pos;
};


In the code above we created a function name Slider and parse the container and nav. There rest of the code will identify the image width length and so on.

Notice that we also use the .animate function which performs a custom animation of a set of CSS properties. This may work but we need to run it on our main html file. So let’s do it.

Go ahead and copy the codes below on your main html file.

(function() {
	var container = $('div.slider').css('overflow', 'hidden').children('ul'),
		slider = new Slider( container, $('#slider-nav') );

	slider.nav.find('button').on('click', function() {
		slider.setCurrent( $(this).data('dir') );
		slider.transition();
	});		
})();

The JavaScript code above will target slider class and will take the unordered list images slides. It will also set the slider navigation to make it rotate and give it a slider transition.

Note: You must also add the following codes for jQuery Hosted Library and the custom.js file link above this code to make it work. See codes below.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="custom.js"></script>

Conclusion

This is the end of this tutorial. I hope you find it useful and have learned something new from it. Sliders are great way to display your images. If you have any question please feel free to drop your comments below and don’t forget to subscribe!

Share

Tags: create slider in jquery css3custom jscustom sliderhow to create a sliderjquery tutoriallt imgquot gtslider navsrc quot

— Gavin

A Web addicted Geek stuck inside Tron.

  • Previous story 15 Useful Plugins for WordPress Developers
  • Next story Best Video Editing Apps for iOS and Android

You may also like...

  • wp security How to Secure Your WordPress Site Against Hackers
  • Fresh and Useful CSS Frameworks for Developers
  • Download Instagram Stories Fast and Easy
  • sfdc testing Challenges and Best Practices of SFDC Test

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • Best Practices
    • Creating a Custom Basic Slider
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM