Bootstrap Snippet carousel using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='g-carousel'>
  <a class='prev' href='#'><</a>
  <a class='next' href='#'>></a>
  <ul class='carousel'>
    <li>
      <img src='http://th05.deviantart.net/fs71/200H/f/2013/217/c/5/beauty_nature_by_darshsasalove-d6gnpfg.jpg'>
    </li>
    <li>
      <img src='http://truth-saves.com/images/natural-beauty.jpg'>
    </li>
    <li>
      <img src='http://images.all-free-download.com/images/graphicmedium/beauty_of_nature_14_210801.jpg'>
    </li>
    <li>
      <img src='http://static.funnypik.com/the-unseen-beauty-of-nature-image_256164.jpg'>
    </li>
    <li>
      <img src='http://images.all-free-download.com/images/graphicmedium/beauty_of_nature_3_209842.jpg'>
    </li>
    <li>
      <img src='http://www.prestigehw.com/CLIENTES/prestige.igmtech.com/imagenes/hoteles/SPORTING/sporting_destino.jpg'>
    </li>
    <li>
      <img src='http://wellness-shop.co.uk/img/items/small/1825.jpg'>
    </li>
    <li>
      <img src='http://www.bestmoviesbyfarr.com/images/newsletters/newsletter113_theme.jpg'>
    </li>
    <li>
      <img src='http://www.funcanada.ca/uploads/files/2013/08/queen-elizabeth-park-gardens-in-canada.jpg'>
    </li>
    <li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.g-carousel .prev, .g-carousel .next {
  text-decoration: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  height: 100%;
  min-height: 20px;
  width: 40px;
  background: #ccc;
  text-align: center;
  line-height: 200px;
  position: relative;
  z-index: 5;
}
.g-carousel {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 880px;
}
.g-carousel .prev {
  float: left;
}
.g-carousel .next {
  float: right;
}
.g-carousel ul.carousel {
  position: absolute;
  top: 0;
  height: 200px;
  margin: 0;
  left: 40px;
  right: 40px;
  padding: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function() {
  $(document).ready(function() {
    var $carouselList, $width, currentItem, initLeft, numberOfItems, totalNumberOfItems;
    initLeft = 40;
    $width = 800;
    numberOfItems = 4;
    $carouselList = $('ul.carousel');
    totalNumberOfItems = $carouselList.children().size();
    currentItem = numberOfItems;
    $('a.next').on('click', function() {
      var left;
      left = parseInt($carouselList.css('left'));
      left = left - 200;
      if (currentItem === totalNumberOfItems) {
        left = initLeft;
        currentItem = numberOfItems;
      } else {
        currentItem += 1;
      }
      return $carouselList.animate({
        'left': left + "px"
      }, 400);
    });
    return $('a.prev').on('click', function() {
      var left;
      left = parseInt($carouselList.css('left'));
      left = left + 200;
      if (currentItem === numberOfItems) {
        left = initLeft - 200 * (totalNumberOfItems - numberOfItems);
        currentItem = totalNumberOfItems;
      } else {
        currentItem -= 1;
      }
      return $carouselList.animate({
        'left': left + "px"
      }, 400);
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"carousel"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel"
Bootstrap 3.0.0 Snippet by evarevirus