如何將mi-slider添加到Bootstrap？

我有這個漂亮整齊的滑塊，並希望它以某種方式或以自舉方式工作。我可以簡單地添加它還是需要很多定製？如何將mi-slider添加到Bootstrap？

這是真的很容易使用，並在任何網站看起來不錯，並自動調整等，所以我不確定如何處理它。

如果有一個簡單的方法或替代方案，我不想開始玩它嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
      <title>test</title> 
      <meta name="Description" content="Test"/> 
      <meta name="Keywords" content="Test"/> 
      <link href="style2.css" rel="stylesheet" type="text/css"/> 
      <link rel="stylesheet" type="text/css" href="css/slider.css" /> 
      <script src="js/modernizr.custom.63321.js"></script> 
      <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"> 
      </head> 
      <body> 
      <div id="mi-slider" class="mi-slider" style="left: 0px; top: 0px"> 
       <ul> 
        <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>slasssgs</h4></a></li> 
        <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxforssds</h4></a></li> 
        <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafesssrs</h4></a></li> 
        <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneaksssers</h4></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>slasg</h4></a></li> 
        <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hassts &amp; Caps</h4></a></li> 
        <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglassssssses</h4></a></li> 
        <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scssarves</h4></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>ssssss</h4></a></li> 
        <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li> 
        <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>sssss</h4></a></li> 
        <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li> 
        <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptossssssp Bags</h4></a></li> 
        <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefsssscases</h4></a></li> 
       </ul> 
       <nav> 
        <a href="#">Limos</a> 
        <a href="#">Coaches</a> 
        <a href="#">Minibuses</a> 
        <a href="#">Executive cars</a> 


       </nav> 
      </div> 
     </div> 




     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="js/jquery.catslider.js"></script> 
     <script> 
      $(function() { 
      $('#mi-slider').catslider(); 
       }); 
      </script> 
      </body> 
      </html>

來源

2017-01-23 TheDiggler

Bootstrap附帶滑塊類，但您可以使用自己的滑塊類。我只是說要小心jQuery庫的翻倍。 – scoopzilla

您必須在您html頭，你body

引導頁面底部的引導庫通常看起來像例子中的片段

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style type="text-css"> 
 
    .example { 
 
     min-height: 400px; 
 
     background-color: #333333; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-4 example"> 
 
      <p>This is column 1</p> 
 
      </div> 
 
      <div class="col-md-4 example"> 
 
      <p>This is column 2</p> 
 
      </div> 
 
      <div class="col-md-4 example"> 
 
      <p>This is column 3</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    </body>

而Bootstrap模板基於12格，所以每一行都有一個最大值最多12列（默認情況下）。出於您的目的，您可以將代碼放入container-fluid，將jquery庫鏈接放置在底部，它就可以工作。

來源

2017-01-23 17:32:25 scoopzilla

如何將mi-slider添加到Bootstrap？

回答

相關問題