Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Content Slider Using jQuery And CSS.

Friday, Dec 15, 2017

Tags:- jQuery CSS


In this tutorial we will create a Content Slider Using jQuery and CSS without the help of any Slider Plugin and it is very easy and simple to code and use in your webpage.You can also create Image Slider using this process. You may also like Disable Text Selection Using CSS


See Demo
Crop Image Using PHP


To Create Content Slider it takes only two steps:-

  1. Make a HTML file and define markup and script for Slider
  2. Make a CSS file and define styling for Slider


Step 1.Make a HTML file and define markup and script for Slider

We make a HTML file and save it with a name slider.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="slider_style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function next()
  {
	var mar=$("#img_ul").css("margin-left");
	var nm=mar.replace("px","");
	if(nm==0)
	{
	  $("ul").animate({"marginLeft":"-500px"},"slow");
	}
	else if(nm>0 || nm!=-2000)
	{
	  nm=nm-500;
	  $("ul").animate({"marginLeft":nm+"px"},"slow");
	}
	else if(nm==-2000)
	{
	  $("ul").animate({"marginLeft":"0px"},"slow");
	}
  }

  function previous()
  {
	var mar=$("#img_ul").css("margin-left");
	var nm=mar.replace("px","");
	if(nm==0)
	{
	  $("ul").animate({"marginLeft":"-2000px"},"slow");
	}
	else
	{
	  nm=+nm + +500;
	  $("ul").animate({"marginLeft":nm+"px"},"slow");
	}
  }
  </script>
</head>

<body>

  <div id="slide_wrapper">
    <ul id="img_ul">

     <li>
      <q>
        Learn everything you can, anytime you can, from anyone you can there will always come a time when you will be grateful 
        you did.
      </q>
     </li>

     <li>
      <q>
        Make it simple. Make it memorable. Make it inviting to look at. Make it fun to read.
      </q>
     </li>

     <li>
      <q>
        If plan A fails, remember there are 25 more letters.
      </q>
     </li>

     <li>
      <q>
        Do not go where the path may lead, go instead where there is no path and leave a trail.
      </q>
     </li>

     <li>
      <q>
        A journey of a thousand miles must begin with a single step.
      </q>
     </li>


    </ul>
  </div>

<input type="button" id="previous" value="Previous" onclick="previous();">
<input type="button" id="next" value="Next" onclick="next();">

</body>
</html>

In this step we create a div to hold our content and we create two functions one is next() and other is previous() function.


In first function we display the next content one by one as the user clicks the main thing is we get and set margin-left property and to animate the content left and right.Now we begin our calculations we use 500px in first condition because our div width is 500px and we use (-) sign to move the content to left side then 2 content will ayutomaticaaly appear and after that we use 2000 because our li tag width is 500px each so the there is 5 li tags and the sum is 2500 but because our first li tag in 0px in margin left we use 2000px(2500px-500px) we use jquery animate function to get sliding effect.


In second function we do the same process as we did in next() function but instead of moving the content to left we move the content in right direction by using margin-left property.You may also like Change Elements Design Using JavaScript And CSS



Step 2.Make a CSS file and define styling for Slider

We make a CSS file and save it with name slider_style.css.

body
{
	margin:0px auto;
	padding:0px;
	text-align:center;
	background-color:#0B173B;
	font-family:helvetica;
}
#slide_wrapper
{
	margin:0px auto;
	padding:0px;
	background-color:#0B173B;
	margin-top:50px;
	overflow:hidden;
	width:500px;
	height:300px;
	text-align:center;
	border:2px dashed white;
}
ul
{
	margin:0px;
	padding:0px;
}
li
{
	margin:0px;
	padding:0px;
	float:left;
	width:500px;
	height:300px;
	font-family: Copperplate / Copperplate Gothic Light, sans-serif;
	font-style:italic;
	font-size:25px;
	padding:20px;
	padding-top:70px;
	box-sizing:border-box;
	color:white;
}
#previous
{
	margin-top:20px;
	width:150px;
	height:50px;
	background:none;
	color:white;
	border:1px solid white;
	font-size:18px;
}
#next
{
	margin-top:20px;
	width:150px;
	height:50px;
	background:none;
	color:white;
	border:1px solid white;
	font-size:18px;
}

Thats all, this is how to Create Content Slider using jQuery and CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.