logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Jquery Me Simple Slider Kaise Bnate Hai

Jquery Me Simple Slider Kaise Bnate Hai

April 10, 2016 No comments Article SEO Website Designing

Hello Dosto, Aaj mein apko jquery me simple slider kaise bnate hai eske bare me btane ja rha hu. Dosto jaise ki apko pta hai har website me slider ki jarurat padti hai or har jagah bahut sare code karna padta hai apko apni website me slider lgane ke liye.

Agar apko Jquery ke bare me kuch nhi pta toh aap Learn JQUERY Code Step By Step For Beginners pad sakte hai.

Aaj mein apko bahut hi kam jquery code or styling ke sath slider bnana sikhata hu. apko kuch steps ko follow karna hoga. or aap ache se sikh jayenge slider kaise bnate hai.

SEO Website Designing Live Demo    SEO Website Designing Download

Aap jquery ke simple slider ka demo niche diye button se dekh sakte hai or chahe toh pura code download bhi kar sakte hai niche diye gye button se.

Jquery Me Simple Slider Kaise Bnate Hai:

Jquery me basic slider bnane ke liye apko kuch steps follow karne honge.

Step1: Apko sabse pehle kuch files create karni hongi agar apke paas file created hai toh aap usme bhi add kar sakte hai apne slider ka code.

Step2: Apko HTML, CSS or JAVASCRIPT ki file create karni hogi. Just like index.html, style.css, index.js and add jquery.min.js.




Step3: Pehle HTML ke code par najar daalte hai.
Index.html

<!DOCTYPE html>
<html >
 <head>
 <meta charset="UTF-8">
 <title>SEO Website Designing Simple Slider</title>
 <meta name="description" content="SEO Website Designing company provide Responsive Web design Services in gurgaon; Do Marketing of your Webpage content with Search Engine &amp; Social Media Optimization"/>
<meta name="keywords" content="SEO Keyword Strategy, SEO Services in Gurgaon, Website Designing Company in Gurgaon, Best Seo Company in Gurgaon, Web Design Services in Gurgaon, Content Marketing in Gurgaon"/> 
 <link rel="stylesheet" href="css/style.css">
 </head>
<body>
 <h1>SEO Website Designing Simple Slider</h1>
<div id="slider">
 <a href="#" class="control_next">>></a>
 <a href="#" class="control_prev"><<</a>
 <ul>
 <li><img src="http://i1.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/04/Wordpress-par-theme-kaise-change-karte-hai.jpg?w=940"></li>
 <li><img src="http://i0.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/04/Nameserver-kaise-update-karte-hai.jpg?w=940"></li>
 <li><img src="http://i2.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/04/33-New-Awesome-Features-in-.jpg?w=940"></li>
 <li><img src="http://i1.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/03/Learn-JQUERY-Code-Step-By-Step-For-Beginners.jpg?w=940"></li>
 
 </ul> 
</div>
<div class="slider_option">
 <input type="checkbox" id="checkbox">
 <label for="checkbox">Autoplay Slider</label>
</div>
 <script src="http://seowebsitedesigning.com/code/jquery-me-simple-slider-kaise-bnate-hai/js/jquery.min.js?x46163"></script>
<script src="js/index.js"></script>
 
 </body>
</html>

Ess file me jaisa ki aap dekh rhe maine CSS and JS file add ki hai slider bnane ke liye. aap en files ko kahi bhi lga sakte hai. Agar aap JQuery ki files ko niche lgayege toh apka page jaldi load hoga.

ess code me maine 2 control bnanye hai apke user ke liye taaki voh kabhi bhi previous or next slide par pahuch sake asani se.

Uske baad aap ko apni images ke path dene hai.

<img src="Your Image Path" alt="" />

Eske Andar aap agar dekh rhe ho maine ek Slider Autoplay karne ka open bhi diya hai.

style.css

html {
border-top: 5px solid #fff;
background: #FAEBD7;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #000;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 940px;
height: 400px;
background: #ccc;
text-align: center;
line-height: 300px;
}

a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

a.control_prev {
border-radius: 0 2px 2px 0;
}

a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}

Esme maine slider ki styling define ki hai.




index.js

$(document).ready(function(){

$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};

function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};

$('a.control_prev').click(function () {
moveLeft();
});

$('a.control_next').click(function () {
moveRight();
});

});

Apko ye code apply karna hai. aap chahe toh ek structure define kar sakte hai CSS folder me apni style sheet daalo or JS me JAVASCRIPT or JQUERY ki files daale or apne structure ko easy bnaye or slider ko enjoy kare.

Aab aap Jquery Me Simple Slider Kaise Bnate Hai ye sikh gye hai

Read About Other Interesting Things below.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: how to create basic slider, How to create simple slider, how to make sjquery slider, Jquery Me Simple Slider Kaise Bnate Hai

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,505 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,505 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.