در این قسمت از سایت رضاگرافیک می خواهیم براتون سورس کد هایی معرفی نمایییم که از طریق این کد ها می توانید اسلایدرعکس زیبایی ایجاد کنید پیش نمایش و سورس کامل این اسلایدر رو برای دانلود قرار دادم که در ادامه مطلب کد ها رو معرفی می کنم که فقط جهت آشنایی دارد و الا کلا سورس در یک فایل زیپ قرار داده شده است امیدوارم به دردتون خورده باشد .
حالا کد هارو معرفی می کنم .
این کد در داخل یک فایل با فرمت [ .html ] قرار می گیرد .
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/nivo-slider.css" media="screen" /> <link href="http://fonts.googleapis.com/css?family=Economica" rel="stylesheet" type="text/css" /> <!-- jQuery & Nivo Slider --> <script src="js/jquery-1.6.3.min.js"></script> <script src="js/jquery.nivo.slider.js"></script> <!-- Nivo Slider controller --> <script src="js/slide-show.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /> <![endif]--> </head> <body> <!--==============================header=================================--> <header> <h2>Stack Image Nivo Slider - jQuery Image Slider</h2> </header> <!--==============================content ================================--> <!-- Start Wrap --> <div id="wrap"> <!-- Start Framebackground --> <div> <!-- Start Third overlap border --> <div> <!-- Start Two overlap border --> <div> <!-- Start One overlap border --> <div> <!-- Slider --> <section> <div id="slider"> <img src="images/img1.png" alt="Car" /> <img src="images/img2.png" alt="Rabit" /> <img src="images/img3.png" alt="Cat" /> <img src="images/img4.png" alt="Leopard" /> <img src="images/img5.png" alt="Butterfly" /> <img src="images/img6.png" alt="Sealion" /> </div> </section> <!-- End Slider --> </div> <!-- End One overlap border --> </div> <!-- End Two overlap border --> </div> <!-- End Third overlap border --> </div> <!-- End Framebackground--> </div> <!-- End Wrap --> </body> </html>
این کد در داخل یک فایل با فرمت [ .css ] قرار می گیرد .
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; } mark, rp, rt, ruby, summary, time { display: inline; } html { width: 100%; } body { background: url(../images/background.png); color: #808080; font-family: Arial, Helvetica, sans-serif; font-size: 100%; min-width: 980px; text-shadow: 0 1px 0 #FFF; } h2 { color: #666; font-family: 'Economica', cursive; font-size: 48px; margin: 0 0px 0.2em; padding: 0px; } header { background-color: #d2e9fa; border-bottom: solid 1px #ccc; text-align: center; } #wrap { border-top: solid 1px #fff; margin-bottom: 90px; padding-top: 35px; } .overlap-third { background-color: #ffffff; border: 1px solid #d2d2d2; margin: 0px auto; position: relative; text-align: left; top: -2px; width: 512px; z-index: 10; } .frame-background { background: url(../images/frame-bg.png) no-repeat; height: 393px; margin: 0px auto; width: 550px; } .overlap-two { background-color: #ffffff; border: 1px solid #d2d2d2; left: -4px; position: relative; text-align: left; top: -1px; width: 518px; z-index: 10; } .overlap-one { background-color: #ffffff; border: 1px solid #d2d2d2; height: 251px; left: -5px; padding: 2px; position: relative; text-align: left; top: -1px; width: 523px; z-index: 10; } #container { background-color: #ffffff; border: 1px solid #d2d2d2; margin: 0px auto; padding: 15px; text-align: left; width: 610px; } footer { padding: 25px 0 46px; width: 100%; } .nivo-controlNav { bottom: -30px; left: 220px; position: absolute; } .nivo-controlNav a { background: #b5b5b5; border-radius: 10px; box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05); display: block; float: left; height: 10px; margin-right: 5px; moz-border-radius: 10px; moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05); text-indent: -9999px; webkit-border-radius: 10px; webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05); width: 10px; } .nivo-controlNav a.active, .nivo-caption span { background: #4d8da7; background: linear-gradient(top, #4a87a1 0%,#5295b1 100%); background: -moz-linear-gradient(top, #4a87a1 0%, #5295b1 100%); background: -ms-linear-gradient(top, #4a87a1 0%,#5295b1 100%); background: -o-linear-gradient(top, #4a87a1 0%,#5295b1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a87a1), color-stop(100%,#5295b1)); background: -webkit-linear-gradient(top, #4a87a1 0%,#5295b1 100%); box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3); moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3); webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3); }
لازم نیست که این کد ها رو قرار دهید فقط جهت آشنایی بود سورس کامل در این پست کاملا همراه با فونت ، عکس ، کد ضمیمه شده است خیلی زیبا و شیک است / + پیش نمایش این اسلایدر
دوباره سلام . فایل DS_Store که در دانلود بالا قرار دارد، را باید چه کرد؟ ممنون دوباره ممنون
هیچی ! به عنوان فشرده افتاده بیخیال اون .
با سلام
ممنون عالی بود
ممنون
سلام
خسته نباشید
ممنون سایت خوبی دارید.
خواهش میکنم !
دست گلتون درد نکنه.خیلی قشنگه
یه درخواست داشتم توی بخش” تماس با ما” براتون فرستادم.بررسی کنید
ممنون
سلام دوست عزیز چطور میشه تو سایت قرارش داد؟
من برای ماژول اچ تی ام ال میخوامش مشه بگی باید چیکار بکنم؟
سلام دوست عزیز سورسشو قرار دادیم
چطوری باید ازش استفاده کرد؟
سلام باید کد نویسی بلد باشید
ممنون . . .
سلام
سایت خوبی داید
ولی نام فایل سی اس اس باید چی باشه؟؟؟
سلام اون کد ها برای معرفی هست
شما می توانید سورس را کامل دانلود نمایید .