کد اسلایدر متنی زیبا برای صفحات html

کد اسلایدر متنی زیبا برای صفحات html با کد زیر شما میتوانید یک صفحه اچ تی ام ال با طرح و رنگهای زیبا با قابلیت تعویض اسلاید متن و نمایش اسکرول با دکمه یک صفحه زیبا برای تبلیغات یا معرفی محصول خود ایجاد کنید.دکمه بستن بالای صفحه را میتوانید لینکدار کنید و یا با قرار دادن # لینک ان را خنثی کنید- این کد بصورت کاملا راستچین و بهینه شده برای شما در ادامه مطلب قرار خواهد گرفت.

کد اسلایدر متنی زیبا برای صفحات html
کد اسلایدر متنی زیبا برای صفحات html

دمو کد

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Pure css based fullscreen slider Demo | HTMLlion Demo</title>
<meta name="Description" content="Pure css based fullscreen slider Demo">
<meta name="author" content="Ashok Prajapati">
<meta property="og:url" content="http://www.htmllion.com/examples/pure-css-based-fullscreen-slider-demo.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Pure css based fullscreen slider - HTMLlion Demo">
<meta property="og:description" content="Pure css based fullscreen slider, css based image slider  ">
<meta property="og:site_name" content="HTML Lion">
<meta property="og:image" content="http://www.htmllion.com/img/pure-css-based-fullscreen-slider.png">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="com/css/css.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script><script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36432234-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<style>
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
/* Slider wrapper*/
.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* Slider */
.slider {
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* each slide backgound color */  
.slide1 {
  background: #00bcd7;
  left: 0;
}
.slide2 {
  background: #009788;
  left: 100%
}
.slide3 {
  background: #ff5608;
  left: 200%
}
.slide4 {
  background: #607d8d;
  left: 300%;
}
.slider > div {
  text-align: center;
}
/* Slider inner slide effect */
.slider h2 {
  color: #FFF;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 45px;
  line-height: 120%;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
.slider .button {
  color: #FFF;
  padding: 5px 30px;
  background: rgba(255,255,255,0.3);
  text-decoration: none;
  opacity: 0;
  font-size: 15px;
  line-height: 30px;
  display: inline-block;
  -webkit-transform: translateX(-500px);
  transform: translateX(-500px);
}
.slider h2, .slider .button {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}
/* Next and Preive arrow */ 
.control {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  z-index: 55;
}
.control label {
  z-index: 0;
  display: none;
  text-align: center;
  line-height: 50px;
  font-size: 50px;
  color: #FFF;
  cursor: pointer;
  opacity: 0.2;
}
.control label:hover {
  opacity: 0.5;
}
.next {
  right: 1%;
}
.previous {
  left: 1%;
}
/* Slider Pagger */ 
.slider-pagination {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}
.slider-pagination label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255,255,255,0.2);
  margin: 0 2px;
  border: solid 1px rgba(255,255,255,0.4);
  cursor: pointer;
}
/* Slider Pagger arrow event */
.slide-radio1:checked ~ .next .numb2, 
.slide-radio2:checked ~ .next .numb3, 
.slide-radio3:checked ~ .next .numb4, 
.slide-radio2:checked ~ .previous .numb1, 
.slide-radio3:checked ~ .previous .numb2, 
.slide-radio4:checked ~ .previous .numb3 {
  display: block;
  z-index: 1
}
/* Slider Pagger event */
.slide-radio1:checked ~ .slider-pagination .page1, 
.slide-radio2:checked ~ .slider-pagination .page2, 
.slide-radio3:checked ~ .slider-pagination .page3, 
.slide-radio4:checked ~ .slider-pagination .page4 {
  background: rgba(255,255,255,1)
}
/* Slider slide effect */
.slide-radio1:checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
  -webkit-transform: translateX(-300%);
  transform: translateX(-300%);
}
.slide-radio1:checked ~ .slide1 h2,  
.slide-radio2:checked ~ .slide2 h2,  
.slide-radio3:checked ~ .slide3 h2,  
.slide-radio4:checked ~ .slide4 h2,  
.slide-radio1:checked ~ .slide1 .button,  
.slide-radio2:checked ~ .slide2 .button,  
.slide-radio3:checked ~ .slide3 .button,  
.slide-radio4:checked ~ .slide4 .button {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

@media only screen and (max-width: 767px) {
.slider h2 {
  font-size: 20px;
}
.slider > div {
  padding: 0 2%
}
.control label {
  font-size: 35px;
}
.slider .button {
  padding: 0 15px;
}
}
</style>
</head>


<body>
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked="" id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>
  <div class="next control">
    <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label>
  </div>
  <div class="previous control">
    <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label>
  </div>
  <div class="slider slide1">
    <div>
      <h2>کدبازان - کدستان</h2>
      <a href="https://codebazan.ir" class="button" title="css slider">برگشت</a>  <a href="http://www.htmllion.com/download/pure-css-based-fullscreen-slider.zip" onclick="_gaq.push(['_trackEvent','Download','zip',this.href]);" class="button">دانلود  محتوای اسلایدر متنی</a> </div>
  </div>
  <div class="slider slide2">
    <div>
     
کدبازان سایت کامل و جامع برای انتشار اونواع کدهای مربوط به سایت و  وبلاگ میباشد.امیدوارم با کاوش در سایت به خواسته های خود برسید.
<a href="https://codebazan.ir">
		                                                    <img src="https://codebazan.ir/wp-content/uploads/2016/10/headergif.gif" alt="کدبازان – کدستان" width="100%" height="300">
                                                                                               
                                                		                    </a>
      <a href="https://codebazan.ir" class="button" title="css slider">برگشت</a>  <a href="http://www.htmllion.com/download/pure-css-based-fullscreen-slider.zip" onclick="_gaq.push(['_trackEvent','Download','zip',this.href]);" class="button">دانلود  محتوای اسلایدر متنی</a> </div>
  </div>
  <div class="slider slide3">
    <div>
      <h2>طراحی سایت کدبازان</h2>
<p>طراحی سایت با دامنه دات ای ار فقط با ۱۰ هزار تومن !!!!!باورش ی کم سخته اما کاملا واقعیت داره با دامنه .ir فقطو فقط با ۱۰ هزار تومان یک سایت اختصاصی و کاملا حرفه ای داشته باشید.<p>
<img class="wp-image-2876 aligncenter" src="https://codebazan.ir/wp-content/uploads/2017/05/adv59213fd4e52068.06641833-300x160.png" alt="" width="100%" height="213" srcset="https://codebazan.ir/wp-content/uploads/2017/05/adv59213fd4e52068.06641833-300x160.png 300w, https://codebazan.ir/wp-content/uploads/2017/05/adv59213fd4e52068.06641833.png 566w" sizes="(max-width: 100%) 100vw, 399px">
<p>
     <a href="https://codebazan.ir" class="button" title="css slider">برگشت</a>  <a href="http://www.htmllion.com/download/pure-css-based-fullscreen-slider.zip" onclick="_gaq.push(['_trackEvent','Download','zip',this.href]);" class="button">دانلود  محتوای اسلایدر متنی</a> </div>
  </div>
  <div class="slider slide4">
    <div>
      
با ابزار پیش نمایش کدبازان خیلی راحت بدون نیاز به اتصال داءم به اینترنت میتوانید کدهای جاوا اسکریپت سی اس اس و اچ تی ام ال خود را بصورت زنده  پیش نمایش کد خود را مشاهده کنید.
<a href="https://codebazan.ir/Tools/editor_v2/">ورود به ابزار<P>
<a href="https://codebazan.ir/Tools/editor_v2/"> <img onclick="tool_box('full_screen_code')" class="toolsbtn" src="https://codebazan.ir/Tools/editor_v2/full scrin code.png" tiptitle="کد نویسی تمام صفحه"></a>
<p>
    <a href="https://codebazan.ir" class="button" title="css slider">برگشت</a>  <a href="http://www.htmllion.com/download/pure-css-based-fullscreen-slider.zip" onclick="_gaq.push(['_trackEvent','Download','zip',this.href]);" class="button">دانلود  محتوای اسلایدر متنی</a> </div>
  </div>
</div>


</body>

برای ویرایش هر چه اسانتر کد میتوانید کد را در ابزار \یش نمایش کدبازان ویرایش کنید.

ابزار زا از منوی بالای سایت انتخاب کنید

2 Comments

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *