Как добавить mi-слайдер в Bootstrap?

У меня этот довольно аккуратный слайдер, и мне бы хотелось, чтобы он работал так или иначе с помощью бутстрапа. Могу ли я просто добавить его или требуется много настроек?Как добавить mi-слайдер в Bootstrap?

Это действительно прост в использовании и хорошо выглядит на любом сайте и автоматически изменяет размер ect, поэтому я не уверен, что с ним делать.

Я не хочу начинать играть с ним, если есть простой способ или альтернатива?

<!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

страницы Bootstrap обычно выглядят как, например, в сниппет

<!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-сетке, поэтому каждая строка имеет максимум imum из 12 столбцов (по умолчанию). Для ВАШИХ целей вы можете поместить свой код внутри container-fluid, поместите ссылку библиотеки jquery внизу, и это сработает.

источник

2017-01-23 17:32:25 scoopzilla

Как добавить mi-слайдер в Bootstrap?

ответ

Смежные вопросы