CSS only Slider

by marakoss

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">One</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">Two</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">Three</li>
    <li data-target="#carousel-example-generic" data-slide-to="3">Four</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        First one
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Then two
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Third slide
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Last slide
      </div>
    </div>
  </div>

  <!-- Controls -->
  <!--
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  -->
</div>

CSS

#carousel-example-generic
{
  background-color: black;
}

#carousel-example-generic .carousel-indicators
{
    left: auto;
    width: auto;
    margin-left: auto;
}

#carousel-example-generic .carousel-indicators li
{
    display: block;
    width: 200px;
    /* How should I change height?: */
    height: 124px;
    border: 0;
    border-radius: 0;
    margin: 1px 0 0 0;
    background-color: red;
    text-indent: 0;
    color: #fff;
}

#carousel-example-generic .carousel-indicators li.active
{
    background-image: none;
    background-color: #009fc3;
}

@media screen and (min-width: 768px)
{
    #carousel-example-generic .carousel-indicators
    {
        bottom: auto;
    }
}

JavaScript

$(document).ready(function() {

  var slideshow = $('#carousel-example-generic');
  
  // Fire The click event to switch slides on hover
  // But only when .next or .prev classes are not present AKA carousel is currently not animating.
	slideshow.find('li').hover(function() {
		if ((slideshow.find('.next, .prev').length === 0)){
			$(this).click();
		}
  });

	// Initialize the carousel
  $("#carousel-example-generic").carousel();
});