Twitter Bootstrap Question posted in

How to make an horizontal icons carousel – Twitter bootstrap

How can I make this with twitter bootstrap , I found it in this website https://www.crowdcontent.com/

I don’t even know what is it called or how to start

thank you

Tags:

2

Answers


  1. 0

    Not sure how familiar you are with bootstrap, but you will basically need:

    http://getbootstrap.com/javascript/#carousel

    The documentation is pretty straightforward and if you want to customize the look you can simply override the default CSS in your own custom.css file (make sure to include it AFTER the default bootstrap stuff).

    You can also find a full example of it at http://getbootstrap.com/examples/carousel/

    The source code for the example should be in the bootstrap sourcecode (docs/examples)

    Login or Signup to reply.
  2. 0

    The link you provided was of wordpress theme, i did my best to copy that style and reflect in bootstrap code. Finally i successed by using the combination of css and jQuery.
    Below is my code for the same style.

    Note that i have used 2 css files which u will also need to include in order to run the carousel perfectly, the link for the same in given above line !DOCTYPE Html. Rest all files are CDN so u need not worry about them.

    Jquery Snippet

    $(".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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search