اسلایدر hero-ریسپانسیو
اسلایدر زیبا و ریسپانسیو – Hero
نحوه استفاده :
استایل ها و جاوااسکریپت های مورد نیاز :
۱ ۲ ۳ ۴ ۵ | <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --> <link rel="stylesheet" href="css/style.css"> <!-- Resource style --> <script src="js/modernizr.js"></script> <!-- Modernizr --> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> |
ایجاد محتوای هر اسلاید(هر اسلاید یک نگ li) :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ | <ul class="cd-hero-slider"> <li class="selected"> <div class="cd-full-width"> <h2>iwebpro.ir</h2> <p>یک اسلایدر ریسپانسیو و تمام صفحه</p> <a href="https://iwebpro.ir" class="cd-btn">دانلود کنید</a> </div> <!-- .cd-full-width --> </li> <li> <div class="cd-half-width"> <h2>آموزش PHP</h2> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p> <a href="#۰" class="cd-btn">شروع کنید</a> <a href="#۰" class="cd-btn secondary">اطلاعات بیشتر</a> </div> <!-- .cd-half-width --> <div class="cd-half-width cd-img-container"> <img src="assets/tech-1.jpg" alt="tech 1"> </div> <!-- .cd-half-width.cd-img-container --> </li> </ul> <!-- .cd-hero-slider --> |
ایجاد لینک برای هر اسلاید :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ | <div class="cd-slider-nav"> <nav> <span class="cd-marker item-1"></span> <ul> <li class="selected"><a href="#۰">اسلاید ۱</a></li> <li><a href="#۰">اسلاید ۲۰</a></li> </ul> </nav> </div> |
