Utilizar un carrusel con bootstrap en dos partes
Publicado por Sergio (2 intervenciones) el 22/01/2018 20:43:35
Buen día. Mi objetivo es hacer un carrusel que tenga el texto en una columna y sus controladores, y en la otra columna el carrusel en sí.
Intenté hacer un script ue cuando estuviera en un item, el cambiara de color para al menos intentar un script que cambiara el texto con inner.html. Pero no funcionó
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
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="container oscuro">
<div class="row ">
<div class="col-md-6">
<div id="carouselId" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="imagenDePrueba1.jpg" alt="First slide" class="img-fluid">
<div class="carousel-caption d-none d-md-block">
<h3>Title</h3>
<p>Description</p>
</div>
</div>
<div class="carousel-item">
<img src="imagenDePrueba2.jpg" alt="Second slide" class="img-fluid">
<div class="carousel-caption d-none d-md-block">
<h3>Title</h3>
<p>Description</p>
</div>
</div>
<div class="carousel-item">
<img src="imagenDePrueba3.jpg" alt="Third slide" class="img-fluid">
<div class="carousel-caption d-none d-md-block">
<h3>Title</h3>
<p>Description</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselId" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselId" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-6">
<div id="main"> main </div>
<ol class="carousel-indicators">
<li class="item1" data-target="#carouselId" data-slide-to="0" class="active">Texto</li>
<li class="item2" data-target="#carouselId" data-slide-to="1"></li>
<li class="item3"data-target="#carouselId" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
Intenté hacer un script ue cuando estuviera en un item, el cambiara de color para al menos intentar un script que cambiara el texto con inner.html. Pero no funcionó
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
if ($('li.item1').hasClass('active')) {
$('#main').addClass('woodwork');
}if ($('li.item2').hasClass('active')) {
$('#main').addClass('woodwork2');
}if ($('li.item3').hasClass('active')) {
$('#main').addClass('woodwork3');
}});
Valora esta pregunta
0