✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Content Slider Using jQuery And CSS

Last Updated : Jul 1, 2023

IN - jQuery CSS | Written & Updated By - Amruta

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

Content Slider Using jQuery And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

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.

I hope this tutorial on Content Slider jquery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪