Search
showing results for - "carousel jquery"
Alonso
09 May 2016
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <title>Bootstrap Example</title>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
10  <style>
11  .carousel-inner > .item > img,
12  .carousel-inner > .item > a > img {
13    width: 70%;
14    margin: auto;
15  }
16  </style>
17</head>
18<body>
19
20<div class="container">
21  <br>
22  <div id="myCarousel" class="carousel slide" data-ride="carousel">
23    <!-- Indicators -->
24    <ol class="carousel-indicators">
25      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
26      <li data-target="#myCarousel" data-slide-to="1"></li>
27      <li data-target="#myCarousel" data-slide-to="2"></li>
28      <li data-target="#myCarousel" data-slide-to="3"></li>
29    </ol>
30
31    <!-- Wrapper for slides -->
32    <div class="carousel-inner" role="listbox">
33
34      <div class="item active">
35        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
36        <div class="carousel-caption">
37          <h3>Chania</h3>
38          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
39        </div>
40      </div>
41
42      <div class="item">
43        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
44        <div class="carousel-caption">
45          <h3>Chania</h3>
46          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
47        </div>
48      </div>
49    
50      <div class="item">
51        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
52        <div class="carousel-caption">
53          <h3>Flowers</h3>
54          <p>Beautiful flowers in Kolymbari, Crete.</p>
55        </div>
56      </div>
57
58      <div class="item">
59        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
60        <div class="carousel-caption">
61          <h3>Flowers</h3>
62          <p>Beautiful flowers in Kolymbari, Crete.</p>
63        </div>
64      </div>
65  
66    </div>
67
68    <!-- Left and right controls -->
69    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
70      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
71      <span class="sr-only">Previous</span>
72    </a>
73    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
74      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
75      <span class="sr-only">Next</span>
76    </a>
77  </div>
78</div>
79
80</body>
81</html>
similar questions
sliding element jqueryjquery vertical sliderjquery sliderjquery slider valuecarousel javascript vanillaslide right jqueryimage slideshow in jquery
queries leading to this page
html jquery carousel divcarousel image jqueryjquery carousecarousel using api jquery carousal jqueryuse jquery carousel pluginjquery carousel functionlogo slider carousel jqueryjquery sliding carousellight carousel withou jquerycarousel plugin jquerycarousel libraries for jqueryjquery carousel slider example codejquery carousel 5dimage carousel jqueryhtml carousel jquery 24 28 27 carousel 27 29 onjquery carousel 22tingyuan 22 24 28 27 carousel 27 29 carousel 28 29build a carousel jqueryjquery simple carousel with buttonsjquery carousel slidercreate carousel using jquerybest jquery carouseljquery simple carouselcaraousel jquerycarousel jquery examplecarousel jquery code 24 28 29 carouselcarousel in jquery 24 28 29 carouselcarousel jqueryjquery carouseljquery carousel codecarousel using jqueryslider carousel jquerycarousel slider jquery pluginhow to create a carousel jqueryitem carousel jquery horizontal j 24 28 27 carousel 27 29jquery carousel 28 29carousel with jquerysection carousel jqueryjquery carousel functionsimple jquery carouselsteps jquery with carouseljquery barouselcreate logo slider carousel jquery 24 28 22 carousel 22 29 carousel 28 7bjquery carrouseljquery carousaljquery plugin carouseljquery carousel plugineasy carousel using jqueryimage carousel jquery examplejquery carouselsmarquee carousel jqueryjquery carousel sliderscarousel jqeryjquery image carouseljquery carousel 28 29carousel slider jquerycarousel with thumb in jqueyrcarousel slider jquery libraryjquery simple carousel for htmljquery for carousel slidercarousel javascript jqueryslide carousel jqueryjquery slider carouseljquery carousel slideshowcarsoual slider jqerybuild carousel jquerycarousel function jquerycontent carousel jqueryhow to create logo slider carousel jquerybest carousel jquerysimple image carousel jquerybest jquery based carouselcarousel image gallery slider using jqueryjquerys carouselcarousel script jqueryusing jquery to build carouseljquery create your own carouseljquery carousel slider video 22carousel 28 29 22slider jquery carouseljquery plugins carouselsimple carousel jqueryjquery carousel 28 29 3bjquery carousel slider examplejquery header carouselcarousel using html and jqueryjquery best carouselshow to create carousel div jquerycarousel 28 29what is a jquery carouseljquery carousel slider pluginjquery mobile carouselli carousel slider jqueryjquery carousel slider plugin descriptionjq carouseljquery carouselli convert into carousel jqueryjquery carousel examplejquery logo carouselslider 2f carousel for logo jquerycarousel jquery plugincarousel jqcarousel slider jquery examplehow to make carousel using jquerysimple carousel jqeryjquery carousel slidehow to make carousel slider jquery carousel jquerycarousel jquery