如何使水平圖標旋轉木馬

我怎樣才能讓this與Twitter的引導，我發現它在這個網站https://www.crowdcontent.com/如何使水平圖標旋轉木馬

我甚至不知道什麼叫或如何啓動

謝謝

2016-01-31 joko liptos

您提供的是WordPress主題的鏈接，我盡我所能複製這種風格並反映在引導代碼中。最後我通過使用css和jQuery的組合成功。下面是我對同樣風格的代碼。

請注意，我已經使用了2個css文件，您還需要包含這些文件才能完美地運行傳送帶，上面給出的鏈接爲！DOCTYPE Html。其餘所有文件都是CDN所以你不用擔心它們。

jQuery的片段

$(".home-solutions-nav-left").click(function() { 
 
    $(".home-solution-items").animate({ 
 
     left: "-=250px" 
 
    }, 
 
    10, function() { 
 
     /* stuff to do after animation is complete */ 
 
     var length = parseInt($(".home-solution-items").css('left')); 
 
     if (length < -1250) { 
 
     resetLeft(); 
 
     }; 
 
    }); 
 
}); 
 

 
function resetLeft() { 
 
    $(".home-solution-items").css('left', '0px'); 
 
} 
 

 
$(".home-solutions-nav-right").click(function() { 
 
    $(".home-solution-items").animate({ 
 
     left: "+=250px" 
 
    }, 
 
    10, function() { 
 
     /* stuff to do after animation is complete */ 
 
     var length1 = parseInt($(".home-solution-items").css('left')); 
 
     if (length1 >= 0) { 
 
     resetRight(); 
 
     }; 
 
    }); 
 
}); 
 

 
function resetRight() { 
 
    $(".home-solution-items").css('left', '-1500px'); 
 
}

.home-solution-items { 
 
    left: 0px; 
 
}

<link href="https://www.crowdcontent.com/wp-content/themes/crowdcontent/css/services-nav.css" rel="stylesheet" /> 
 
<link href="https://www.crowdcontent.com/wp-content/themes/crowdcontent/css/home-solutions.css" rel="stylesheet" /> 
 
<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <title>TechGenium</title> 
 

 
    <!-- Font-Awesome CDN --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 

 
    <link rel="stylesheet" href="css/services-nav.css"> 
 
    <link rel="stylesheet" href="css/home-solutions.css"> 
 

 

 
</head> 
 

 
<body> 
 

 
    <section class="home-solutions" id="home-products"> 
 
    <div class="home-solutions-nav-left"></div> 
 
    <div class="container home-solutions-container"> 
 
     <div class="home-solution-items" style="width:2500px;left:0px;"> 
 
     <ul id="menu-services-nav-with-icons" class="menu"> 
 

 
      <div id="menu-item-405" class="home-solution-item cct-service-nav-item blog-posts menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-wordpress"></i> 
 
            <span>Blog Posts</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-406" class="home-solution-item cct-service-nav-item product-description menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-shopping-cart"></i> 
 
            <span>Product Description</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-464" class="home-solution-item cct-service-nav-item tweets menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-twitter"></i> 
 
            <span>Tweets</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-463" class="home-solution-item cct-service-nav-item facebook-posts menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-facebook-square"></i> 
 
            <span>Facebook Posts</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-451" class="home-solution-item cct-service-nav-item metadata menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-search"></i> 
 
            <span>Metadata</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-407" class="home-solution-item cct-service-nav-item website-content menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-sitemap"></i> 
 
            <span>Website Content</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-408" class="home-solution-item cct-service-nav-item ebooks menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-tablet"></i> 
 
            <span>eBooks</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-402" class="home-solution-item cct-service-nav-item white-papers menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-file-o"></i> 
 
            <span>White Papers</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-401" class="home-solution-item cct-service-nav-item press-release menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-bullhorn"></i> 
 
            <span>Press Releases</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
      <div id="menu-item-403" class="home-solution-item cct-service-nav-item newsletters menu-item menu-item-type-post_type menu-item-object-page"> 
 
      <a href="http://www.techgenium.in/blogs"> 
 
       <strong> 
 
            <i class="_mi _before fa fa-newspaper-o"></i> 
 
            <span>Newsletters</span> 
 
           </strong> 
 
      </a> 
 
      </div> 
 

 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="home-solutions-nav-right"></div> 
 
    </section> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
 

 
</body> 
 

 
</html>

來源

2016-02-01 11:33:11 Niraj

不知道你是如何引導熟悉，但你基本上需要：

該文檔非常簡單，如果你想自定義外觀，你可以簡單地在你自己的custom.css文件中覆蓋默認的CSS（確保在默認的引導程序內包含它）。

您還可以找到它在http://getbootstrap.com/examples/carousel/

一個完整的示例該示例的源代碼應該是在引導源代碼（文檔/實例）

來源

2016-01-31 17:16:52

我有點自舉新的，我知道，我想用傳送帶，但我不知道如何來定製它，這樣我就可以把在同一視圖中的多個圖形符號，就像我包含的例子一樣，給我一個鏈接到紀錄片並不完全是我期待的 –

如何使水平圖標旋轉木馬

回答

相關問題