首页>>焦点图>>支持文字和图片特效的响应式轮播图banner(2020-06-02)

支持文字和图片特效的响应式轮播图banner

支持文字和图片特效的响应式轮播图banner
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="bootstrap-touch-slider" class="carousel bs-slider fade  control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="5000" >  
  2.   
  3.             <!-- Indicators -->  
  4.             <ol class="carousel-indicators">  
  5.                 <li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>  
  6.                 <li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>  
  7.                 <li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>  
  8.             </ol>  
  9.   
  10.             <!-- Wrapper For Slides -->  
  11.             <div class="carousel-inner" role="listbox">  
  12.   
  13.                 <!-- Third Slide -->  
  14.                 <div class="item active">  
  15.   
  16.                     <!-- Slide Background -->  
  17.                     <img src="images/slide1.jpeg" alt="Bootstrap Touch Slider"  class="slide-image"/>  
  18.                     <div class="bs-slider-overlay"></div>  
  19.   
  20.                     <div class="container">  
  21.                         <div class="row">  
  22.                             <!-- Slide Text Layer -->  
  23.                             <div class="slide-text slide_style_left">  
  24.                                 <h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>  
  25.                                 <p data-animation="animated fadeInLeft">Bootstrap carousel now touch enable slide.</p>  
  26.                                 <a href="#" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>  
  27.                                 <a href="#" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>  
  28.                             </div>  
  29.                         </div>  
  30.                     </div>  
  31.                 </div>  
  32.                 <!-- End of Slide -->  
  33.   
  34.                 <!-- Second Slide -->  
  35.                 <div class="item">  
  36.   
  37.                     <!-- Slide Background -->  
  38.                     <img src="images/slide2.jpeg" alt="Bootstrap Touch Slider"  class="slide-image"/>  
  39.                     <div class="bs-slider-overlay"></div>  
  40.                     <!-- Slide Text Layer -->  
  41.                     <div class="slide-text slide_style_center">  
  42.                         <h1 data-animation="animated flipInX">Bootstrap touch slider</h1>  
  43.                         <p data-animation="animated lightSpeedIn">Make Bootstrap Better together.</p>  
  44.                         <a href="#" target="_blank" class="btn btn-default" data-animation="animated fadeInUp">select one</a>  
  45.                         <a href="#" target="_blank"  class="btn btn-primary" data-animation="animated fadeInDown">select two</a>  
  46.                     </div>  
  47.                 </div>  
  48.                 <!-- End of Slide -->  
  49.   
  50.                 <!-- Third Slide -->  
  51.                 <div class="item">  
  52.   
  53.                     <!-- Slide Background -->  
  54.                     <img src="images/slide3.jpeg" alt="Bootstrap Touch Slider"  class="slide-image"/>  
  55.                     <div class="bs-slider-overlay"></div>  
  56.                     <!-- Slide Text Layer -->  
  57.                     <div class="slide-text slide_style_right">  
  58.                         <h1 data-animation="animated zoomInLeft">Beautiful Animations</h1>  
  59.                         <p data-animation="animated fadeInRight">Lots of css3 Animations to make slide beautiful .</p>  
  60.                         <a href="#" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>  
  61.                         <a href="#" target="_blank" class="btn btn-primary" data-animation="animated fadeInRight">select two</a>  
  62.                     </div>  
  63.                 </div>  
  64.                 <!-- End of Slide -->  
  65.   
  66.   
  67.             </div><!-- End of Wrapper For Slides -->  
  68.   
  69.             <!-- Left Control -->  
  70.             <a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">  
  71.                 <span class="fa fa-angle-left" aria-hidden="true"></span>  
  72.                 <span class="sr-only">Previous</span>  
  73.             </a>  
  74.   
  75.             <!-- Right Control -->  
  76.             <a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">  
  77.                 <span class="fa fa-angle-right" aria-hidden="true"></span>  
  78.                 <span class="sr-only">Next</span>  
  79.             </a>  
  80.   
  81.         </div> <!-- End  bootstrap-touch-slider Slider -->  

 


原文地址:http://www.freejs.net/article_jiaodiantu_870.html