CODEWITHSUNDEEP
twitter-bootstrapslidercarousel
Krystian
Krystian

Reputation: 987

Bootstrap carousel without arrows and auto slide

I am trying to get an auto-slide carousel with 2 activ/showing images and without arrows like on this page (the brand-logos on the right, if you scroll down a few px): http://www.videoboost.de/#anfrage

Unfortunately I couldnt find a solution. Thats my current code, which isnt working of course, as the data-target was for pressing the arrows. Could you please help me or give any advising hint? Thank you very much!

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
</head> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
  </div>

  <div class="item">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/JPmorgan.png" alt="b" height="71">
  </div>

  <div class="item">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/rheinland-logo.png" alt="c" height="71">
  </div>

  <div class="item">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
  </div>
</div>
</div>

Upvotes: 0

Views: 1269

Answers (1)

neophyte
neophyte

Reputation: 6626

So you have a few problems in your code--

  • you forgot to close head tag.
  • you didn't add jquery and bootstrap js these are required libraries to make carousel working.

  • to show two images in a carousel slide use bootstrap responsive classes. in the following way--

    <div class="row">
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
     <div class="col-xs-6">
     <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
     </div>
     </div>

Working Snippet

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
  <div class="row">
  <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    
  <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    </div>
  </div>

  <div class="item">
  <div class="row">
  <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/JPmorgan.png" alt="b" height="71">
    </div>
     <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    </div>
  </div>

  <div class="item">
  <div class="row">
   <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/rheinland-logo.png" alt="c" height="71">
    </div>
     <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    </div>
  </div>

  <div class="item">
  <div class="row">
   <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
    </div>
    <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
    </div>
   </div> 
  </div>
</div>
</div>

Hope this helps!

Upvotes: 1

Related Questions