如何使水平图标旋转木马

我怎样才能让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

我有点自举新的，我知道，我想用传送带，但我不知道如何来定制它，这样我就可以把在同一视图中的多个图形符号，就像我包含的例子一样，给我一个链接到纪录片并不完全是我期待的 –

如何使水平图标旋转木马

回答

相关问题